JS中的DOM文档对象模型总结

总览

DOM结构：

事件

添加事件句柄

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 对象添加事件句柄

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

事件传递

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

• 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

  元素的点击事件先触发，然后会触发

  元素的点击事件。

• 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

  元素的点击事件先触发 ，然后再触发

  元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(*event*, *function*, useCapture);
//默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

NodeList对象

访问

var myNodeList = document.querySelectorAll("p");

//NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。

//访问第二个 <p> 元素可以是以下代码:
y = myNodeList[1];

length

获取

元素的集合：

var myNodelist = document.querySelectorAll("p");

显示节点列表的元素个数：

document.getElementById("demo").innerHTML = myNodelist.length;

length 属性常用于遍历节点列表。

修改样式

修改节点列表中所有

元素的背景颜色

var myNodelist = document.querySelectorAll("p"); 
var i; 
for (i = 0; i < myNodelist.length; i++) {    
    myNodelist[i].style.backgroundColor = "red"; 
}

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

相同：

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

不同：

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。