DOM基础之Node Objects

发表于 | | 阅读次数

文档对象模型（DOM）

DOM全称Document Object Model，由浏览器实现的一套编程接口，以便动态更改文档（通过JavaScript）。DOM是一棵树，在浏览器解析HTML页面的时候生成，这棵树由JavaScript节点对象（Node Objects）组成。

<!DOCTYPE html>
<html>
    <head><title>DOM Tree</title></head>
    <body>
        <p>DOM Demo</p>
    </body>
</html>

上面的代码将生成如下的DOM：

                        ■ DOCTYPE(9)
                        ↓
                        ■ HTML(1)
          ↙        ↙              ↘             ↘
   ■ #text(3)  ■ HEAD(1)          ■ BODY(1)       ■ #text(3)
                  ↓               ↙   ↓  ↘
               ■ TITLE(1)  ■ 回车换行(3)  ■ P(1)   ■ 回车换行(3)
                  ↓                       ↓
               ■ #text(3)                #text(3)

括号中的数字代表节点类别：1代表元素节点、3代表文本节点、10代表文档类型节点

节点对象（Node Objects）

DOM树由节点对象组成，节点对象根据类型的不同又分为许多类别，但都派生于Node。Node类是一个JavaScript构造函数，继承Object，拥有节点的通用属性和方法。节点对象的继承关系例子：

元素节点对象A
HTMLAnchorElement < HTML *Element < HTML Element < Element < Node < Object

文本节点
Text < CharacterData < Node < Object

文档节点
HTMLDocument < Document < Node < Object

文档片段节点
DocumentFragment < Node < Object

根据节点的不同，节点对象分为许多类别，这些类别都有自己的构造函数。常见的节点类别有：

ELEMENT_NODE 元素节点，比如DIV
TEXT_NODE 文本节点，比如普通文字也包括回车换行符、空白符
DOCUMENT_NODE 文档节点，比如window.document
DOCUMENT_TYPE_NODE 文档类型节点，比如
DOCUMENT_FRAGMENT_NODE 文档片段节点，比如通过document.createDocumentFragment()创建的节点

节点对象的类别信息以键值对形式作为静态属性存储于Node构造函数中。可以通过以下的代码查看所有的节点类别信息：

for (var p in Node) {
    console.log(p, " = " + Node[p]);
}

输出的结果片段：


ELEMENT_NODE = 1
ATTRIBUTE_NODE = 2
TEXT_NODE = 3
...

从输出的结果中可以看出每种类别对应一个数字的值，在判断节点类别的时候，通常使用这个数字值进行判断，例如：

var ul = document.getElementById("ul");
console.log(ul.nodeType === Node.ELEMENT_NODE); // true
console.log(ul.nodeType === 1); // true

节点对象的属性与方法

Node构造函数定义了节点通用的属性和方法。

Node实例属性列表：


  • childNodes

  • firstChild

  • lastChild

  • previousSibling

  • nextSibling

  • parentNode

  • nodeName

  • nodeType

  • nodeValue


常用的Node实例方法：



  • appendChild()

  • insertBefone()

  • cloneNode()

  • removeChild()

  • replaceChild()

特定的节点类别继承了Node的属性和方法，同时还有拥有特定的方法：

例如，DOCUMENT_NODE拥有方法document.createElement()和document.createTextNode()方法。

HTML *ELMENT节点拥有以下常见的属性：


  • innerHTML

  • outerHTML

  • innerText

  • outText

  • children

0%