快速了解JavaScript的DOM模型 _DOM模型

文章插图

概述DOM全称Document Object Model，即文档对象模型。是html和XML文档的编程接口，DOM将文档（HTML或XML）描绘成一个多节点构成的结构。使用JAVAScript可以改变文档的结构、样式和内容。
W3C DOM由以下三部分组成：

核心DOM - 针对任何结构化文档的标准模型。
XML DOM - 针对XML文档的标准模型。
HTML DOM - 针对HTML文档的标准模型。

分类DOM目前有三种级别：

DOM Level 1：1998年10月成为W3C的推荐标准，主要定义HTML和XML文档的底层结构。
DOM Level 2：在DOM1基础上扩充了方法和属性，引入了与文档更多的交互能力。主要包括DOM视图、DOM样式、DOM事件、DOM遍历和范围等。
DOM Level 3：引入了将XML文档加载和序列化的方法。提供了验证文档有效性的能力。

节点树以下面的HTML为例：

<html><head><meta charset="UTF-8"><title>节点树</title></head><body><div>测试块</div><a href=https://www.isolves.com/it/cxkf/yy/js/2021-11-16/"/about">链接

浏览器会将HTML文档解析成节点并组成节点树。

文章插图

HTML DOM中通过不同类型节点来表示， Document是每个文档的根节点。这里的document只有一个<html>子节点，称之为文档元素(Element) 。Element表示元素类型的节点，Text表示文本类型的节点。
节点类型DOM 的最小组成单位叫做节点（node）。上面的节点树中，每一段都由不同类型的节点组成。节点的类型有如下几种：

Node：浏览器提供的原生节点，下面的节点都继承它。
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）。
Element：网页的各种HTML标签（比如<body>、<a>等）。
Attr：网页元素的属性（比如class="right"）。
Text：标签之间或标签包含的文本。
Comment：注释。
CDATASection：CDATA区域，与Comment类型类似。
DocumentFragment：文档的片段。

NodeDOM1中定义了一个Node接口，JavaScript中所有节点类型都继承自Node类型，因此属性和方法都相同。
在Node类型中定义了nodeType属性来表明节点的类型，由12个常量表示。任何节点必居其一：

Node.ELEMENT_NODE：数值1，对应元素节点Element 。
Node.ATTRIBUTE_NODE：数值2，对应属性节点Attr 。
Node.TEXT_NODE：数值3，对应文本节点Text 。
Node.CDATA_SECTION_NODE：数值4，对应文档中CDATA部（不会由解析器解析的文本）。
Node.ENTITY_REFERENCE_NODE：数值5，对应实体引用。
Node.ENTITY_NODE：数值6，对应实体类型Entity 。
Node.PROCESSING_INSTRUCTION_NODE：数值7，对应处理指令。
Node.COMMENT_NODE：数值8，对应注释节点Comment 。
Node.DOCUMENT_NODE：数值9，对应文档节点Document 。
Node.DOCUMENT_TYPE_NODE：数值10，对应文档类型节点DocumentType 。
Node.DOCUMENT_FRAGMENT_NODE：数值11，对应文档片段节点DocumentFragment 。
Node.NOTATION_NODE：数值12，对应DTD中声明的符号。

使用nodeType可以很容易确定节点类型，IE中没有公开Node类型的构造函数，使用Node.ELEMENT_NODE比较会导致错误。为了兼容IE，可以使用数值进行比较：

if (onenode.nodeType == Node.ELEMENT_NODE) {// 在IE中无效console.log("The Node is an Element.");}// 或者if (oneNode.nodeType == 1) {// 适用所有浏览器console.log("The Node is an Element.");}

nodeName返回节点的标签名
var div = document.getElementByTagName('div')[0];console.log(onenode.nodeName);// DIVnodeValue返回字符串，表示节点的文本值，可读写。
var div = document.getElementByTagName('div')[0];console.log(onenode.nodeValue);// null节点关系文档中节点都存在着一定的关系，节点之间的关系可以使用类似人类家族关系的形式描述。如，在HTML文档中，可以把<html>看作是<body>的父元素；相对的，<body>也就是<html>的子元素；而作为<body>同级的<head>两者之间的关系为兄弟（姐妹）关系。