JavaScript DOM 核心概念与常用操作详解

JavaScript DOM 核心概念与操作总结

JavaScript DOM 核心概念与操作总结

许多人最初认为 DOM（文档对象模型）是 JavaScript 中最简单的部分。确实，由于其思维模式相对固定，只需掌握少量常用方法即可上手，因此 DOM 常被视为客户端 JavaScript 学习的起点。

近期在涉及 DOM 的练习中，我发现自己的 DOM 知识体系较为零散，尽管自认为掌握良好。许多开发者可能认为只需调用几个方法，或直接使用 jQuery 封装好的功能，无需深究 DOM 细节。虽然 jQuery 对 DOM 的封装确实出色，但正如学习过程需先学会走路再奔跑，深入理解 DOM 细节仍是必要的。基于此，我对 DOM 的常用方法进行了系统梳理。

在 W3C 制定的 DOM 规范中，包含大量方法，其中部分实用，部分则较少使用。本文将聚焦于常用的 DOM 操作，暂不赘述基本概念。

节点层次与 Node 接口

节点层次

所谓节点层次，是指 HTML 文档中由具有特定属性、数据及方法的节点（如标签）构成的层级关系，可形象地理解为树状结构。W3C 的 DOM1 级规范定义了一个 Node 接口，其中包含若干实用方法。

Node.ELEMENT_NODE（元素节点）

Node.TEXT_NODE（文本节点）

Node.DOCUMENT_NODE（文档节点）

每个节点均拥有表示其类型的 NodeType 属性。例如，元素节点的 nodeType 值为 '1'，文本节点为 '3'，文档节点为 '9'。

文档节点 (Document Node)

1. 文档节点

在文档中，文档节点由 document 对象表示，其基本特征如下：

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点) 

tip one（文档的子节点）：

1. 可通过 document.documentElement 获取 html 元素，也可通过 document.childNodes[0] 或 document.firstChild 获取。相比之下，documentElement 的访问方式更为直接高效。

tip two（文档的相关信息）：

1. 获取文档标题：document.title;

2. 获取完整 URL：document.URL;

3. 获取域名（IP）：document.domain;

4. 获取页面来源 URL：document.referrer;

tip three（文档查找元素）：

1. 通过 ID 查找：document.getElementById("xxx"); 通常页面中 ID 唯一，若存在多个相同 ID，则返回第一个匹配的元素。

2. 通过标签名查找：document.getElementsByTagName("xxx"); 返回所有标签名为 "xxx" 的元素集合。

3. 通过 name 属性查找：document.getElementByName();

理解 document 对象相对简单，且其兼容性表现较好。

元素节点 (Element Node)

2. 元素节点

元素节点提供了对元素标签名、子节点及特性的访问权限。其基本特征如下：

var ele = document.getElementById("element"); //通过document取到一个标签对象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的标签名 
console.log(ele.nodeValue); //永远返回null! 

tip one（html 元素）：

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

var div = document.getElementById("div");

1. console.log(div.id); // "myDiv"

2. console.log(div.className); // "bd"

3. console.log(div.title); // "Body text"

4. console.log(div.lang); // "en"

5. console.log(div.dir); // "ltr"

tip two（取得、设置和删除特性）：

1. div.getAttribute("id"); // "myDiv"

2. div.setAttribuye("id","yourDiv"); // id 已变动

3. div.removeAttribute("id"); // id 已删除

需注意：在 IE7 及以下版本中，上述三种方法存在异常行为。通过 set 设置 class 和 style 特性，特别是事件处理程序时，往往无效，get 操作亦然。因此，一般开发中建议避免直接使用这三种方法，推荐通过属性来设置特性。

tip three（元素的子节点）：

此处需重点说明，参考如下代码逻辑。

<ul id="myList"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 
 
var mL = document.getElementById("myList"); 
//很明显mL对象有三个元素节点，我们也知道用childNodes属性去找到节点数，然而陷阱随之而来 
 
console.log(mL.childNodes); // 7 
//?!怎么会有7个? 
 
//原因在于childNodes中不仅包含了元素节点，还有4个文本节点。因此需要过滤 
 
for(var i=0,len=ml.childNodes.length;i<len;i++){ 
   if(ml.childNodes[i].nodeType == "1"){ // 利用元素节点的特性 
     // .... 
   }   
}<br>//最好的方法可以这么做<br>//如果元素对象内部标签名是一样的<br>var items = ml.getElementsByTagName("li"); //能得到三个li节点对象 
　　

文本节点 (Text Node)

3. 文本节点

文本节点包含可照字面解释的纯文本内容，其中可包含转义后的 HTML 字符，但不能包含 HTML 代码。文本节点的基本特征如下：

<div id="myDiv">123</div> 
 
var myDiv = document.getElementById("myDiv") //取到元素节点 
var tx = myDiv.childNodes[0] //前面也提过childNodes的特性，这次取到了文本节点 
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) // 所有文本节点的nodeName都是"#text"; 
console.log(tx.nodeValue) // 123(节点包含的文本)，注意元素节点是不能取到它包含的文本节点的文本的 
 
//所以其父节点显然是个元素节点. 

Tip one：

创建文本节点的两个方法：document.createTextNode() 和 document.createText();

创建后的节点不会直接嵌入文档，需手动引用并插入。

var a = document.createElement("p");

　　　　var b = document.createTextNode("123");

　　　　a.appendChild(b);

　　　　document.body.appendChild(a);

执行后，在 body 末尾会出现 <p>123</p> 这样的标签结构。

个人认为，DOM 虽是 JavaScript 的入门点，但需要长期打磨。我研读 DOM 规范（仅 DOM1 级）不少于三遍，每次都有新发现。学习 DOM 时，务必注意常见陷阱，并投入时间深入琢磨。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！