首页手记 DOM 节点

DOM 节点

标签：

JavaScript 深度学习

基本概念

DOM ，文档对象模型，这里的文档，主要是针对 HTML 和 XML 文档。对象模型，意味着使用对象的方式来描述文档。

我们编写的 HTML 代码在经过词法和语法分析之后，就会在内存中得到一个树形的对象模型，而我们则可以通过 JavaScript 等语言来查看、创建、删除和修改这个对象模型的结构。也可以这样说，DOM 的存在就是为了能够动态改变文档。

下面，我们借鉴 JavaScript 中对象的概念，去重新认识一下 DOM 。

节点

DOM 模型的基本要素是节点，以 HTML文档为例，大到整个文档( Document )都是一个节点，称为根节点，小到 HTML 中的每一个标记也个节点，称为元素节点。还有一些并不常用的节点，比如注释（Comment）节点等。

总之，HTML 文档中的所有内容都会在 DOM 中以节点的形式存在，JavaScript 并不会直接去操作文档，DOM 才是 JavaScript 对 HTML 文档中所有内容进行访问的入口。

HTML 文档与 HTML DOM 对应关系图：

*HTML DOM 中，Document 节点和 DocumentFrangment 节点并没有与之对应的 HTML 写法。

Node 类型

DOM 是一组与平台、语言无关的接口，主要体现在它底层接口可以表示任何结构化文档，XML 和 HTML 都可以。Node 就属于这种底层核心接口。

我们最常使用的 HTML DOM 就是在 Node 接口之上，定义的一系列上层标准接口( XML DOM 接口不是学习重点 )，例如标准中把 HTML 文档的内容分为根节点（Document）、属性节点（Attribute）、元素节点（Element）、文本节点（Text）等等。所有节点都是对 Node 类型的实例化，自然也会继承 Node 类型上的属性和方法。这就很像 JavaScript 中所有引用类型都会默认继承 Object.prototype 对象一样。当然了，DOM 的继承关系更为复杂，不同渲染引擎对其实现的方式也各不相同。

HTML DOM 节点继承关系图：

Node 类型常用属性和方法

我们可以使用 Google 浏览器打印出 Node 类型上的部分属性和方法。

常用属性举例

例子：

<div id="parent">
    <p id="first_child">0</p>
    <p id="middle_child">1</p>
    <p id="last_child">2</p>
</div>

//返回当前节点的父节点
console.log($("first_child").parentNode.id);

//返回当前节点的前一个同胞元素节点
console.log($("middle_child").previousElementSibling.id);

//返回当前节点的后一个同胞元素节点
console.log($("middle_child").nextElementSibling.id);

//返回当前节点的第一个元素子节点
console.log($("parent").firstElementChild.id);

//返回当前节点的最后一个元素子节点
console.log($("parent").lastElementChild.id);

//返回一组有序的节点集合
console.log($("parent").children);

//公用函数
function $(id) {
    return document.getElementById(id);
}

*HTML DOM 接口在 Node 等核心接口的基础上，进行了自己独有的扩展，包括很多新的属性、方法和接口，在此就不再一一列举。可以参考我以前写的有关于DOM节点类型的系列手记，里面有更为详细的介绍。

创建节点

JavaScript 创建对象，最基本的方法是使用 new 运算符，DOM 标准规定了节点需要使用 document 节点的 create 方法创建出来。

例子：

//创建元素节点
var p_element = document.createElement("p");

//为元素节点添加属性
p_element.className = "style";
p_element.id = "text";

//创建文本节点
var txt = document.createTextNode("hello");

//插入文本节点
p_element.appendChild(txt);

//插入元素节点
document.body.appendChild(p_element);

在浏览器上可以看到我们创建的内容：

元素节点与属性

尽管属性也是节点，但他们通常被认为不是 DOM 树中的一部分，我们也很少直接创建和引用属性节点。大部分情况下，我们比较关注的是元素，而属性只是元素的状态描述，以字符串的形式表现。

例子：

<input id="txt" value="I am text">

var txt = document.getElementById("txt");
console.log(txt.value);
//输出：I am text

我们也可以使用元素节点的 getAttribute()、setAttribute() 和 removeAttribute() 方法来操作属性。

例子：

<input id="txt" value="I am text">

var txt = document.getElementById("txt");
console.log(txt.getAttribute("value")); //输出：I am text

txt.setAttribute("value", "Hello");
console.log(txt.getAttribute("value")); //输出：Hello

虽然不建议直接访问属性节点，但我们可以简单了解一下属性节点常用的属性和方法。

例子：

<input id="txt">

var txt = document.getElementById("txt");
var val = document.createAttribute("value");
val.value = "hello";
txt.setAttributeNode(val);

打开浏览器可以看到效果：