DOM知识点总结（1）

1.1 概述

我们把火狐的MDN当做手册：https://developer.mozilla.org/zh-CN/

火狐MDN中有一些描述非常经典，准备面试的时候可以试着背一背。

 

文档对象模型（Document Object Model）。DOM 是一个 可以访问和修改当前文档的 API。通过它可以操作文档里的Node和Element。Node就是节点，Element就是节点的属性、节点的文本等等。

 

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。

 

 

1.2 DOM访问

我们之前学习了两个访问HTML元素的方法：

getElementById()         //通过id得到元素

getElementsByTagName()  //通过标签名得到元素们

这两个方法都是IE6兼容的。可以把HTML元素读取到JavaScript中。

 

记住，这是所有DOM对象的方法，不是document对象的专属方法。

比如可以通过一个HTML元素继续打点调用这些方法，获得他们内部的节点：

var oBox = document.getElementById("box");

var lis = oBox.getElementsByTagName("li");

lis[2].style.background = "red";

 

 

通过类名得到节点们：

getElementsByClassName()

得到的是一个类数组对象。可以用[]来枚举。

var teshus = document.getElementsByClassName("teshu");

teshus[0].style.background = "red";

getElementsByClassName()在Internet Explorer 5,6,7,8 中无效。

 

 

 

通过querySelectorAll()是ECMAScript2015的方法，通过选择器选择元素们。

querySelectorAll();

比如：

var lis = document.querySelectorAll("#box ul li.teshu");  //选择一组元素

for(var i = 0 ; i < lis.length ; i++){

lis[i].style.background  = "red";

}

 

 

querySelector()选择某一个元素，不是得到类数组对象，而是HTML对象：

var oli = document.querySelector("#box ul li.teshu");  //选择一个元素

oli.style.background = "red";

IE6、7不兼容。从IE8开始兼容。