剖析React内部运行机制-重温DOM

HTML DOM（文档对象模型）

当网页被加载时，浏览器会建立页面的文档对象模型DOM（Document Object Model）。经过HTML DOM，JavaScript 可以访问和改变 HTML 文档的全部元素（内容，结构和样式）。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

• 做为对象的 HTML 元素
• 全部 HTML 元素的属性
• 访问全部 HTML 元素的方法
• 全部 HTML 元素的事件

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

经过这个对象模型，JavaScript 得到建立动态 HTML 的全部力量：

• JavaScript 能改变页面中的全部 HTML 元素
• JavaScript 能改变页面中的全部 HTML 属性
• JavaScript 能改变页面中的全部 CSS 样式
• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中全部已有的 HTML 事件做出反应
• JavaScript 能在页面中建立新的 HTML 事件

DOM节点

W3C 的 HTML DOM 标准，HTML 文档中的全部内容都是节点：

• 整个文档是一个文档节点
• 每一个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每一个 HTML 属性是属性节点
• 注释是注释节点

---

nodeName 属性

nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

注意：nodeName 始终包含 HTML 元素的大写字母标签名。

---

nodeValue 属性

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本自己
• 属性节点的 nodeValue 是属性值

---

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	nodeType
元素	1
属性	2
文本	3
注释	8
文档	9

DOM 对象 - 经常使用方法和属性

一些经常使用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）
• appendChild(node) - 插入新的子节点（元素）
• removeChild(node) - 删除子节点（元素）

一些经常使用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点

DOM 节点(node)对象 - 实例

<div id="rootDiv">
    <ul id="items">
        <li id="item1">item1</li>
        <li id="item2">item2</li>
        <li id="item3">item3</li>
    </ul>
</div>
复制代码

在Chrome浏览器控制台使用下面命令

var rootDiv = document.getElementById('rootDiv');
// 这里若是用console.log()不能输出DOM节点对象结构
console.dir(rootDiv);
复制代码

看下面输出结果能够获知DOM节点对象包含了哪些属性。

下面还有

把rootDivDOM节点的childNodes属性的详细展开以下

从上图中咱们能够获知HTML文件中除了正常的标签，一些“换行”符被解析成了DOM节点，类型为text。

总结

这篇文章的内容很基础，主要介绍了DOM领域一些比较重要的概念，咱们须要重点了解的是DOM节点对象都有哪些属性好比nodeName，nodeValue，nodeType，childNodes等和方法尤为是appendChild(node)。