JS系列 -- JavaScript DOM API

概述

1. DOM（Document Object Model）文档对象模型，指的是 XML 文档，需要说明的是，HTML 是 XML 的衍生品，如果要操作 HTML 可以使用关于 XML 的文档 DOM。

2. JS 中的对象继承自 Object ，页面中的对象继承自 Node 函数。
   Model 将页面中的 Document（html、head、body）和内存中的 Object 一一映射。

3. DOM 就是把文档变成对象的一种模型。

4. 内存中的 Object 是一个个 node （构造函数），其包括：

   • Element Node（元素节点）
   • Text Node（文本节点）
   • Comment Node（注释节点）
   • Document Node（文档节点）

5. DOM 功能：页面中的节点通过构造函数构造出对应的对象

   Element.__proto__ === Node.prototype
   Document.__proto__ === Node.prototype
   

API

Node 接口

Node 派生自Object
Node是一个接口，许多DOM类型从这个接口继承，并允许类似地处理（或测试）这些各种类型。

属性

• .childNodes ==> 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）

• .firstChild ==> 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null

• .lastChild ==> 只读属性，返回当前节点的最后一个子节点。如果没有子节点，则返回 null

• .nextSibling ==> 只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。可能会获取到文本节点

• .previouSibling ==> 返回当前节点的前一个兄弟节点,没有则返回null。可能会获取到文本节点

• .nodeName ==> 返回当前节点的节点名称（svg 标签返回小写字母，其余返回大写字母）

• .nodeValue ==> 返回或设置当前节点的值

• .nodeType ==> 只读属性，表示的是该节点的类型

  • 元素节点（Node.ELEMENT_NODE） ==> nodeType === 1
  • 文本节点（Node.TEXT_NODE） ==> nodeType === 3
  • 注释节点（Node.COMMENT_NODE） ==> nodeType === 8
  • 文档节点（Node.DOCUMENT_NODE） ==> nodeType === 9
  • 描述文档类型的 DocumentType节点（Node.DOCUMENT_TYPE_NODE） ==> nodeType === 10
  • 一个 DocumentFragment 节点（Node.DOCUMENT_FRAGMENT_NODE） ==> nodeType === 11（使用 DocumentFragment 进行性能优化）

• .parentElement ==> 返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个元素节点.则 返回null

• .parentNode ==> 返回指定的节点在DOM树中的父节点

• .innerText ==> 表示一个节点及其后代的“渲染”文本内容的属性

• .textContent ==> 表示一个节点及其后代的文本内容
  说明：.innerText 和 .textContent 的区别

  • textContent 会获取所有元素的内容，包括