《JavaScript高级程序设计（第3版）》第10章 DOM总结

DOM 描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

10.1、节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。

所有页面标记则表现为一个以特定节点为根节点的树形结构。

HTML 中的每一段标记都可以通过树中的一个节点来表示：HTML 元素通过元素节点表示，特性通过特性节点表示，文档类型通过文档类型节点表示，注释则通过注释节点表示。

10.1.1、Node 类型

JS 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个 nodeType 属性，用于表明节点的类型。用来表示节点类型的 Node 类型下的12个数值常量：

• Node.ELEMENT_NODE(1);
• Node.ATTRIBUTE_NODE(2);
• Node.TEXT_NODE(3);

• Node.CDATA_SECTION_NODE(4);
• Node.ENTITY_PEFERENCE_NODE(5);
• Node.ENTITY_NODE(6);

• Node.PROCESSING_INSTRUCTION_NODE(7);
• Node.COMMENT_NODE(8);
• Node.DOCUMENT_NODE(9);

• Node.DOCUMENT_TYPE_NODE(10);
• Node.DOCUMENT_FRAGMENT_NODE(11);
• Node.NOTATION_NODE(12);

console.log(document.nodeType);  // 9

1. nodeName 和 nodeValue 属性

注意：对于元素节点，nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。

<h1>Hello world！</h1>
<script>

  var h1 = document.getElementsByTagName('h1');
  if (h1[0].nodeType == 1) {
    console.log(h1[0].nodeName); // H1
  }
  
</script>

2.节点关系

每个节点都有 childNodes 属性，其中保存着一个 NodeList 对象。

注意：NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

<div id="container">
  <h1>Wiki</h1>
  <p>A wiki is run using wiki software, otherwise known as a wiki engine. A wiki engine is a type of content management system.</p>
</div>
<script>

  var div = document.getElementById('container');
  var firstChild = div.childNodes[0];
  var secondChild = div.childNodes.item(0);
  console.log(firstChild === secondChild);  // true
  var count = div.childNodes.length;
  console.log(div.childNodes);  // NodeList(5) [text, h1, text, p, text]
  console.log(count);                       // 5

</script>

每一个节点都有 parentNode 属性，该属性指向文档树中的父节点。

• previousSibling：和该节点在同一列表中的前一个节点，该列表中第一个节点的 previousSibling 为 null；
• nextSibling：和该节点在同一列表中的后一个节点，该列表中最后一个节点的 nextSibling 为 null。

当节点包含一个或多个子节点时，hasChildNodes() 方法返回 true。

<div id="container">
  <h1>Wiki</h1>
  <p>A wiki is run using wiki software, otherwise known as a wiki engine. A wiki engine is a type of content management system.</p>
</div>
<script>
  var div = document.getElementById('container');
  console.log(div.hasChildNodes());  // true
</script>

3.操作节点

（1）appendChild() 方法，用于向 childNodes 列表的末尾添加一个节点。

注意：如果传入 appendChild() 中的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置。

（2）insertBefore() 把节点放在 childNodes 列表中某个特定的位置，该方法接受两个参数：要插入的节点和作为参照的节点。

（3）replaceChild() 替换节点，该方法接受两个参数：要插入的节点和要替换的节点；该方法返回要替换的节点。

（4）removeChild() 移除节点，该方法只接受一个参数：要移除的节点；该方法返回移除的节点