1、JavaScript的组成部分
JavaScript可以分为三个部分：ECMAScript标准、DOM、BOM。
- ECMAScript标准
即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。 - DOM
即文档对象模型，Document Object Model，用于操作页面元素，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。
-BOM
即浏览器对象模型，Browser Object Model，用于操作浏览器，比如：弹出框、控制浏览器跳转、获取分辨率等。
2、DOM介绍
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。
2.1 DOM相关概念：
- 文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
- 元素：网页中的标签
- 属性：标签的属性
2.2 DOM常用操作
- 元素的获取
- 元素的动态创建
- 元素属性的操作
- 元素绑定的事件
3、DOM操作
3.1 元素的获取
var div = document.getElementById('main');
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
console.log(divs[i]);
}
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
3.2 元素的事件
事件三要素
- 事件源:触发(被)事件的元素
- 事件名称: click 点击事件
- 事件处理程序:事件触发后要执行的代码(函数形式)
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
3.3 元素的属性操作
- 操作表单元素属性
如：value、type、disabled、selected、checked等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox和radio</title>
</head>
<body>
<input id="btn" type="button" value="单选"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="nv"/>女
<input type="radio" value="3" name="sex"/>保密
<br/>
<input id="btn2" type="button" value="复选框"/>
<input type="checkbox" value="1" name="hobby" class="hobby"/>看书
<input type="checkbox" value="2" name="hobby" class="hobby"/>看电视
<input type="checkbox" value="3" name="hobby" class="hobby"/>打篮球
<input type="checkbox" value="4" name="hobby" class="hobby"/>吃饭
<input type="checkbox" value="5" name="hobby" class="hobby"/>睡觉
<input type="checkbox" value="6" name="hobby" class="hobby"/>打豆豆
<br/>
<input id="btn3" type="button" value="下拉框"/>
<select>
<option value="-1">--请选择--</option>
<option value="1" id="sel">油闷大虾</option>
<option value="2">清蒸豆腐</option>
<option value="3">油炸土豆条</option>
<option value="4">烤羊腿</option>
<option value="5">酸菜鱼</option>
<option value="6">外婆菜</option>
</select>
<script type="text/javascript">
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
my$("nv").checked = true;
}
my$("btn2").onclick = function () {
var hobbyObjs = document.getElementsByClassName("hobby");
for (var i = 0; i < hobbyObjs.length; i++) {
if (i % 2 == 0) {
hobbyObjs[i].checked = true;
}
}
}
my$("btn3").onclick = function (){
my$("sel").selected = true;
}
</script>
</body>
</html>
- 操作非表单元素属性
如href、title、id、src、className等
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
常用的HTML转义符
" "
' '
& &
< < // less than 小于
> > // greater than 大于
空格
? ©
- 操作自定义属性
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
</head>
<body>
<ul id="score">
<li>成绩A</li>
<li>成绩B</li>
<li>成绩C</li>
<li>成绩D</li>
<li>成绩E</li>
</ul>
<script type="text/javascript">
var scoreList = my$("score").getElementsByTagName("li");
for (var i=0; i<scoreList.length; i++){
scoreList[i].setAttribute("score", (i+1)*10);
scoreList[i].onclick = function (){
alert(this.getAttribute("score"));
}
}
function my$(id){
return document.getElementById(id);
}
</script>
</body>
</html>
3.4 元素的创建
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
性能问题
- innerHTML方法会对字符串进行解析，需要避免在循环内多次使用。
- 可以借助字符串或数组的方式进行替换，再设置给innerHTML
- 优化后与document.createElement性能相近
|