javaScript操作DOM

发表于

文档对象模型（Document Object Model, DOM）,在控制面板中用window.document获取

1.简单的html5页面元素

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javaScript操作DOM</title>
</head>
<body>
<h1>Hello DOM</h1>
<p>
    This<span>Hello javaScript</span>DOM
</p>
</body>
</html>

2.对应的树状图，其中代表HTML元素的是Element节点，代表文本的节点是Text节点。

alt text

3.文档元素的选取

- 通过ID document.getElementById( )
- 通过名字document.getElementsByName( )
- 通过标签名document.getElementsByTagName( )            快捷属性：document.images document.body document.head 等
- 通过CSS类名document.getElementsByClassName( )
- 通过CSS选择器：如（Sizzle） document.querySelectorAll( ) document.querySelector('.class')

4.文档结构

-  parentNode，该节点的父节点
-  childNodes，该节点的子节点，类数组对象（NodeList对象）
-  firstChild、lastChild，该节点的子节点的第一个和最后一个，如果没有则为null
-  nextSibling、previousSibling，该节点的兄弟节点中的前一个和最后一个
-  nodeType，节点类型 
-  nodeValue，节点的文本内容
-  nodeName，元素的标签名

5.属性的访问

-  标准HTML属性:style、href、textContent（文本内容）等等
-  非标准HTML属性：getAttribute()、setAttribute()、hasAttribute()、removeAttribute()
-  数据集属性（H5 dataset）

6.节点的操作

-  创建节点 createElement() createElementNS() createTextNode()
-  复制节点 cloneNode()
-  插入节点 appendChild() insertBefore()    
-  删除节点 removeChild()    
-  替换节点 replaceChild()

7.事件操作

DOM0级事件处理程序

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

1
2
3
4
5
var btn = document.getElementById("mybtn"); // 取得该按钮的引用 
btn.onclick = function () {
    alert('clicked');
    alert(this.id); // mybtn
}
DOM2 级事件处理程序

DOM2 级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：

addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名，做为事件处理程序的函数和一个布尔值。最后这个参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 fasle，表示在冒泡阶段调用事件处理程序。

1
2
3
4
5
6
7
8
9
10
11
12
var btn = document.getElementById("mybtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);


var btn = document.getElementById("mybtn");
var hander = function () {
    alert(this.id);
};
btn.addEventListener("click", hander, false);
btn.removeEventListener("click", hander, false); // 有效

7.阻止事件

阻止默认事件（a标签的跳转）
1
2
3
4
var samp = document.getElementByTagName("a");
samp.addEventListener("click", function (e) {
    e.preventDefault()
}, false);
阻止冒泡事件
1
2
3
document.getElementById('c3').addEventListener('click', function (e) {
    e.stopPropagation()
}, false);