饥人谷技术博客前端修仙之路

JS 核心之 DOM

2019-04-19  本文已影响2人  养乐多__

一、理解 DOM

1. DOM 定义

DOM 的全称是" Document Object Model "，中文意思为“文档对象模型”。

  • Document： 表示 XML 或 HTML 文档（HTML 是 XML 的衍生品）
  • Object：把文档变成对象
  • Model：把 DOM 抽象理解成一棵 树模型
2. 节点

Document（html）、Element（元素）、Text（文本）
Comment（注释）、Attribute（属性）
DocumentType（doctype 标签）、DocumentFragment（文档片段）

就像 JS 中所有的对象都继承自 Object 一样，浏览器提供一个原生的节点对象 Node（Node 是一个函数），DOM 的所有节点都继承自 Node，Node 又继承自 Object，因此它们具有一些共同的属性和方法。

3. 节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。

DOM 树形结构： DOM 树形结构

顶层的根节点 html 属于 Document 节点，代表整个文档；
第二层级和第三层级的属于 Element 节点，即网页的各种 HTML 标签；
第四层级的属于 Text 节点，即标签之间或标签包含的文本。

4. 深刻理解 DOM
将构造这些节点的构造函数也用树形结构表示： DOM 构造关系

页面中的节点，通过上述不同的构造函数，构造出相应的对象。
由此可以看出 DOM 的主要作用：DOM 是 JavaScript 操作网页的接口，它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（如增删改查）。
DOM 有自己的国际标准，目前通用版本是 DOM 3。

二、Node 接口

1. 属性

Node 属性有很多，用到时可以查询文档。

节点类型 值 对应常量
元素节点（element） 1 Node.ELEMENT_NODE
文本节点（text） 3 Node.TEXT_NODE
注释节点（Comment） 8 Node.COMMENT_NODE
文档节点（document） 9 Node.DOCUMENT_NODE
文档类型节点（DocumentType） 10 Node.DOCUMENT_TYPE_NODE
文档片断节点（DocumentFragment） 11 Node.DOCUMENT_FRAGMENT_NODE
例： 节点类型

注意：textContent 与 innerText 的区别：

  • textContent会获取所有元素的内容，包括<script>和<style>元素，而 innerText 不会；
  • innerText受 CSS 样式的影响，且不会返回隐藏元素的文本，而textContent会；
  • innerText受 CSS 样式的影响会触发重排（reflow），但textContent不会；
  • 在 Internet Explorer (<= IE11 的版本) 中对innerText进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。
2. 方法

如果一个属性是函数，那么这个属性也叫做方法；即方法是函数属性。

cloneNode(true) // 深拷贝，克隆此节点及它的子节点（递归克隆）。
cloneNode(false) // 浅拷贝，只克隆此节点本身。

insertBefore(newNode, referenceNode) // （新节点，父节点内部的一个子节点）

<body>
  <div class="red">div</div>
  <div class="red">div</div>
</body>

var div1 = document.body.children[0]
var div2 = document.body.children[1]
div1.isEqualNode(div2) // true
div1.isSameNode(div2) // false

var wrapper = document.createElement("div");
wrapper.appendChild(document.createTextNode("part 1 "));
wrapper.appendChild(document.createTextNode("part 2 "));
wrapper.childNodes.length // 2
wrapper.childNodes[0].textContent // "part 1 "
wrapper.childNodes[1].textContent // "part 2 "

wrapper.normalize()
wrapper.childNodes.length // 1
wrapper.childNodes[0].textContent // "part 1 part 2 "

三、Document 接口

document对象是文档的根节点，window.document属性就指向这个对象。

1. 属性

loading：document 仍在加载；
interactive：文档已经完成加载并被解析，但是诸如图像，样式表和框架之类的子资源仍在加载；
complate：文档和所有子资源已完成加载。load 事件即将被触发。

visible：此时页面内容至少是部分可见（即文档在前景标签页中且窗口没有最小化）。
hidden： 此时页面对用户不可见（即文档处于背景标签页或者窗口处于最小化状态，或者操作系统处于锁屏状态）。
prerender：此时页面正在渲染中, 因此是不可见的（文档只能从此状态开始，永远不能从其他值变为此状态）。
unloaded：页面从内存中卸载清除。

2. 方法

通过 DOM API 获取到的 elements 都是伪数组。

四、Element 接口

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个 Element节点对象。

1. 属性
2. 方法

五、节点集合

DOM 提供两种节点集合，用于容纳多个节点：NodeList 和HTMLCollection。这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是 NodeList 实例或 HTMLCollection 实例。

1. NodeList 接口
  1. NodeList 实例是一个类似数组的对象，它的成员是节点对象。
    NodeList 是伪数组，可以使用 length 属性、 forEach() 方法和 for 循环。
document.body.childNodes instanceof NodeList // true
  1. NodeList 实例可能是动态集合，也可能是静态集合。所谓动态集合就是一个活的集合，DOM 删除或新增一个相关节点，都会立刻反映在 NodeList 实例。目前，只有 Node.childNodes 返回的是一个动态集合，其他的 NodeList 都是静态集合。
  2. NodeList 只能使用数字索引引用。
2. HTMLCollection 接口
  1. HTMLCollection 是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。HTMLCollection 也是伪数组，它没有 forEach 方法，只能使用 for 循环遍历。
  2. HTMLCollection 实例都是动态集合，节点的变化会实时反映在集合中。
  3. HTMLCollection 实例可以用 id 属性或 name 属性引用该节点元素。

六、其他接口

节点对象除了继承 Node 接口以外，还会继承其他接口。

1. ParentNode 接口
  1. ParentNode 接口表示当前节点是一个父节点。如果当前节点是父节点，就会继承 ParentNode 接口。
  2. 由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会继承 ParentNode 接口。
  3. 相关属性和方法：
2. ChildNode 接口
  1. ChildNode 接口表示当前节点是一个子节点。如果一个节点有父节点，那么该节点就是一个子节点，就会继承 ChildNode 接口。
  2. Element 节点、DocumentType 节点和 CharacterData 接口，部署了ChildNode 接口，凡是这三类节点（接口），都可以使用以下相关方法。
  3. 相关方法：

七、其他知识点

    • <div id="x"></div>，x 的值为：这个 div 对应的 Element 对象。
    • <div id="parent"></div>，parent 的值为：如果有父窗口，就是父窗口；如果没有，就是当前窗口。
    • <div id="parent1"><div id="child"></div></div>，parent1.childNodes 的值为：{0::child, length:1} 伪数组。
    • parent.ChildNodes 属性返回的 NodeList 是动态集合。DOM 删除或新增一个相关节点，都会立刻反映在 NodeList 接口之中。
    • document.querySelectorAll() 方法返回的 NodeList 是静态集合。DOM 内部的变化，不会实时地反映在该方法的返回结果之中。
上一篇 下一篇

猜你喜欢

热点阅读