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

698 阅读3分钟

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节点对象都有哪些属性比如nodeNamenodeValuenodeTypechildNodes等和方法尤其是appendChild(node)