JavaScript

JavaScript 知识量：26 - 101 - 483

13.1 节点层级><

什么是DOM- 13.1.1 -

DOM（Document Object Model）是一种处理可扩展标志语言的标准编程接口，它是由W3C组织推荐的。DOM提供了使用JavaScript与网页交互的方式，将HTML文档以对象的形式在内存中进行表示，它是以面向对象的方式来描述文档模型的。

在网页上，组织页面（或文档）的对象被组织在一个树形结构中，这个树形结构被称为DOM树，用来表示文档中对象的标准模型。DOM树从根节点开始，根节点是文档对象，然后分支为不同的元素节点，例如文本节点、图像节点、链接节点等。

DOM定义了表示和修改文档所需的对象以及这些对象的行为和属性，以及这些对象之间的关系。通过DOM，可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

Node类型- 13.1.2 -

Node类型是所有DOM节点对象的基类，它定义了一些基本的属性和方法，其他的DOM节点类型（如Element、Document等）都是继承自Node类型。

Node类型的主要属性包括：

nodeType：表示节点的类型，是一个只读属性。Node类型一共定义了12种类型，例如元素类型、属性类型、文本类型和文档类型等。
nodeName：表示节点的名称，通常与标签名相同。
nodeValue：表示节点的值，例如元素节点的值就是该元素所包含的内容。
parentNode：表示节点的父节点。
childNodes：表示节点的子节点集合。
firstChild：表示节点的第一个子节点。
lastChild：表示节点的最后一个子节点。
previousSibling：表示当前节点的前一个兄弟节点。
nextSibling：表示当前节点的后一个兄弟节点。

除了这些基本的属性之外，Node类型还定义了一些基本的方法，如appendChild()、removeChild()、replaceChild()等，这些方法可以用于对节点的操作和修改。

nodeType属性- 13.1.3 -

nodeType属性是Node对象的一个属性，它返回节点的类型。nodeType属性的值是一个整数，对于不同的节点类型，它有不同的值。以下是12种可能的nodeType值：

Node.ELEMENT_NODE：值为1，表示元素节点，例如HTML标签（如<p>、<div>等）。
Node.ATTRIBUTE_NODE：值为2，表示属性节点，例如HTML标签中的属性（如<img src="image.jpg">中的src属性）。
Node.TEXT_NODE：值为3，表示文本节点，例如HTML或XML文档中的文本内容。
Node.CDATA_SECTION_NODE：值为4，表示字符数据节点，用于包含不需要解析的字符数据。
Node.ENTITY_REFERENCE_NODE：值为5，表示实体引用节点，用于表示HTML或XML文档中的实体引用。
Node.ENTITY_NODE：值为6，表示实体节点，用于表示HTML或XML文档中的实体。
Node.PROCESSING_INSTRUCTION_NODE：值为7，表示处理指令节点，用于表示HTML或XML文档中的处理指令。
Node.COMMENT_NODE：值为8，表示注释节点，用于表示HTML或XML文档中的注释。
Node.DOCUMENT_NODE：值为9，表示文档节点，用于表示整个HTML或XML文档。
Node.DOCUMENT_TYPE_NODE：值为10，表示文档类型节点，用于表示HTML或XML文档的文档类型声明。
Node.DOCUMENT_FRAGMENT_NODE：值为11，表示文档片段节点，用于表示文档中的一部分内容。
Node.NOTATION_NODE：值为12，表示符号节点，用于表示HTML或XML文档中的符号。

这些常量都在Node对象中定义，可以用来判断当前节点的类型。例如，如果一个节点的nodeType属性等于Node.ELEMENT_NODE，那么这个节点就是一个元素节点。

nodeName与nodeValue- 13.1.4 -

nodeName属性表示节点的名称。对于元素节点，nodeName与标签名相同；对于属性节点，nodeName是属性名称；对于文本节点，nodeName永远是"#text"；对于文档节点，nodeName永远是"#document"。

nodeValue属性表示节点的值。对于文本节点，nodeValue属性包含文本自身；对于属性节点，nodeValue属性包含属性值。然而，对于文档节点和元素节点，nodeValue属性是不可用的。

以下是nodeName和nodeValue的应用示例，演示如何使用DOM来获取和操作HTML文档中的元素和属性：

<!DOCTYPE html>  
<html>  
<head>  
 <title>DOM Example</title>  
</head>  
<body>  
 <h1 id="myHeading">Hello World!</h1>  
 <p>This is a paragraph.</p>  
 <p>This is another paragraph.</p>  
 <script>  
 // 获取元素节点  
 var heading = document.getElementById("myHeading");  
 // 获取属性节点  
 var lang = heading.getAttributeNode("id");  
 // 输出节点名称  
 console.log("Heading nodeName: " + heading.nodeName);  
 // 输出节点值  
 console.log("Heading nodeValue: " + heading.nodeValue);  
 // 输出属性名称和属性值  
 console.log("lang nodeName: " + lang.nodeName);  
 console.log("lang nodeValue: " + lang.nodeValue);  
 </script>  
</body>  
</html>

在上面的示例中，使用document.getElementById()方法获取了一个h1元素节点，并使用getAttributeNode()方法获取了该元素节点的id属性节点。然后，分别输出了这两个节点的名称和值。

运行上面的代码，控制台将输出以下内容：

Heading nodeName: H1  
Heading nodeValue: Hello World!  
lang nodeName: id  
lang nodeValue: myHeading

可以看到，nodeName属性返回了节点的名称，对于元素节点，它与标签名相同；而nodeValue属性返回了节点的值，对于文本节点，它包含文本自身，对于属性节点，它包含属性值。

节点关系- 13.1.5 -

在DOM中，节点之间的关系主要表现在两个方面：层级关系和兄弟关系。

层级关系：DOM将任何HTML文档都表现为一个由多层节点构成的结构，每个节点在层级结构中都有自己的位置。根节点位于层级结构的顶部，它是最顶层的节点，所有的其他节点都是它的子节点。除了根节点外，每个节点都有一个父节点，每个节点也可以包含数量的子节点。作为树的最末端叶子是没有子节点的。
兄弟关系：兄弟关系表示的是节点在同级之间的相互关系。同级之间的节点是拥有相同的父节点的，这些节点互为兄弟节点。

此外，节点的父子关系也可以用传统的家族关系来描述。每个节点的父节点可以有多个子节点，这些子节点可以是元素节点、文本节点或者其他的节点类型。同时，除了根节点外，每个节点的父节点都是唯一的，而根节点的父节点则为null。

总结来说，DOM中的节点在层级结构中具有特定的位置和相互关系，这些关系可以用于描述文档的结构和内容，并且是DOM脚本化操作的基础。

操纵节点- 13.1.6 -

操纵DOM节点是JavaScript中的一项常见任务，以下是一些常用的方法：

1. 获取节点：

document.getElementById(id): 通过元素的id获取元素节点。
document.getElementsByTagName(name): 通过标签名获取元素节点列表。
document.getElementsByClassName(name): 通过类名获取元素节点列表。
document.querySelector(selector): 通过CSS选择器获取第一个匹配的元素节点。
document.querySelectorAll(selector): 通过CSS选择器获取所有匹配的元素节点列表。

2. 创建节点：

document.createElement(tagName): 创建一个指定标签名的元素节点。
document.createTextNode(data): 创建一个文本节点。
document.createDocumentFragment(): 创建一个文档片段。

3. 修改节点：

node.innerHTML = htmlString: 修改元素节点的HTML内容。
node.textContent = text: 修改元素节点的文本内容。
node.appendChild(child): 在元素节点的子节点列表末尾添加一个子节点。
node.insertBefore(newNode, referenceNode): 在参考节点之前插入一个新节点。
node.replaceChild(newNode, oldNode): 替换一个子节点。
node.removeChild(child): 删除一个子节点。

4. 遍历节点：

parentNode.childNodes: 获取父节点的所有子节点列表（包括元素节点、文本节点以及其他类型的节点）。
parentNode.children: 获取父节点的所有元素子节点列表。
node.parentNode: 获取当前节点的父节点。
node.childNodes: 获取当前节点的所有子节点列表。
node.firstChild: 获取当前节点的第一个子节点。
node.lastChild: 获取当前节点的最后一个子节点。
node.nextSibling: 获取当前节点的下一个同级节点。
node.previousSibling: 获取当前节点的上一个同级节点。

5. 判断节点：

node instanceof NodeType: 检查一个对象是否是某个特定类型的节点。例如，node instanceof HTMLElement检查一个节点是否是HTMLElement类型。

6. 其他有用的方法：

document.createElementNS(namespaceURI, elementName): 在指定的命名空间中创建一个元素节点。
document.createTextNodeNS(namespaceURI, data): 在指定的命名空间中创建一个文本节点。
document.getElementById(id): 通过元素的id获取元素节点。
element.hasAttribute(name): 检查元素是否具有指定的属性。
element.setAttribute(name, value): 设置元素的属性值。
element.getAttribute(name): 获取元素的属性值。
element.removeAttribute(name): 删除元素的属性。

以上就是一些常用的DOM操作，它们可以有效地操纵网页中的节点。

Document类型- 13.1.7 -

Document类型在JavaScript中表示一个HTML或XML文档，是一种特殊的对象类型。它不仅代表文档整体，还可以代表具体的文档元素。在DOM（Document Object Model）中，Document类型是所有其他类型的基类。

在HTML文档中，Document类型可以代表整个HTML页面，包括其中的元素、属性和文本内容。通过Document对象，可以访问和操作这些内容。例如，通过Document对象可以获取页面中的元素，获取或修改元素的属性，还可以对页面中的文本内容进行读取和修改。

此外，在JavaScript中，Document类型还包含了一些预定义的属性，比如document.anchors、document.forms、document.images、document.links等，这些属性分别代表文档中的特定类型的元素集合。例如，document.anchors 包含文档中所有带有name特性的<a>元素，document.forms 包含所有文档中所有的<form>元素等。

Document类型在JavaScript中的应用示例如下：

// 获取文档中的元素  
var myElement = document.getElementById("myElementId");  
  
// 获取文档中的属性  
var myAttribute = document.getElementById("myElementId").getAttribute("myAttributeName");  
  
// 修改文档中的元素和属性  
document.getElementById("myElementId").innerHTML = "New Content";  
document.getElementById("myElementId").setAttribute("myAttributeName", "newValue");  
  
// 在文档中创建新的元素和属性  
var newElement = document.createElement("div");  
newElement.setAttribute("class", "myClass");  
document.body.appendChild(newElement);  
  
// 获取文档中的文本内容  
var myText = document.getElementById("myElementId").textContent;  
  
// 修改文档中的文本内容  
document.getElementById("myElementId").textContent = "New Text";

以上代码片段演示了如何使用Document类型获取和修改HTML文档中的元素、属性和文本内容。在实际应用中，这些操作是非常常见的，可以帮助开发者对网页内容进行灵活的操控。

Element类型- 13.1.8 -

Element类型是Web编程中最常用的类型之一，用于表示HTML或XML元素。它是Document对象的一部分，可以通过Document对象访问Element类型。

Element类型具有以下特征：

nodeType的值为1，表示该节点为元素节点。
nodeName的值为元素的标签名，也可以使用tagName属性来获取标签名。
nodeValue的值为null，因为元素节点的值是通过子节点来体现的。
parentNode指向该节点的父节点。
子节点可以是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference等类型的对象。

Element类型可以用于访问元素的标签名、属性和子节点等，也可以用于修改元素的内容和属性。例如，可以使用Element对象的setAttribute()方法设置元素的属性值，使用appendChild()方法向元素添加子节点，使用removeChild()方法删除子节点等。

Element类型应用示例如下：

<!DOCTYPE html>  
<html>  
<head>  
 <title>Element Example</title>  
</head>  
<body>  
 <div id="myDiv">  
 <h1>Hello World!</h1>  
 <p>This is a paragraph.</p>  
 </div>  
 <button onclick="changeText()">Click me to change text</button>  
 <script>  
 function changeText() {  
 var div = document.getElementById("myDiv");  
 div.innerHTML = "New Content";  
 }  
 </script>  
</body>  
</html>

在上面的示例中，首先创建了一个id为"myDiv"的div元素，其中包含一个h1元素和一个p元素。接着创建了一个按钮，当点击该按钮时，调用changeText()函数来修改div元素的内容。changeText()函数通过getElementById()方法获取了div元素，然后将其innerHTML属性设置为"New Content"，从而改变了div元素的内容。

Text类型- 13.1.9 -

Text类型是DOM（Document Object Model）中一种基础的数据类型，用于表示HTML或XML文档中的文本内容。

Text类型的特点如下：

nodeType的值为3，表示该节点为文本节点。
nodeName的值为"#text"，表示该节点为文本节点。
nodeValue的值为该节点的文本内容。
parentNode指向该节点的父节点。
子节点可以是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference等类型的对象。

在HTML或XML文档中，Text类型用于表示文本内容，例如段落、标题、链接等。与Element类型不同，Text类型没有标签名和属性，只有文本内容。可以使用Element类型的appendChild()方法向Element类型的节点添加文本节点。

注意：尽管Text类型与Element类型不同，但它们都是使用Document对象的createElement()方法创建的。此外，Text类型不能像Element类型一样拥有事件处理器。

Text类型应用示例如下：

<!DOCTYPE html>  
<html>  
<head>  
 <title>Text Example</title>  
</head>  
<body>  
 <div id="myDiv">This is a paragraph.</div>  
 <button onclick="changeText()">Click me to change text</button>  
 <script>  
 function changeText() {  
 var div = document.getElementById("myDiv");  
 var text = div.firstChild; //获取第一个子节点，即文本节点  
 text.nodeValue = "New Text"; //修改文本节点的值  
 }  
 </script>  
</body>  
</html>

Comment类型- 13.1.10 -

Comment类型是DOM（Document Object Model）中表示注释节点的类型。它是Text类型的子类型，继承了Text类型除splitText方法之外的所有方法。

Comment类型的特点如下：

nodeType的值为8，表示该节点为注释节点。
nodeName的值为""，表示该节点为注释节点。
nodeValue的值为注释的内容。
parentNode指向该节点的父节点。
不支持子节点。

在HTML或XML文档中，Comment类型用于表示注释节点，即标签之间的内容。注释节点不会在浏览器中显示，但可以在JavaScript中访问和操作。可以使用Document对象的createComment()方法创建注释节点。例如：

// 创建一个新的 Document 对象  
var doc = new Document();  
  
// 使用 createComment 方法创建注释  
var comment = doc.createComment("这是一个注释");  
  
// 如果你想在 HTML 文档中看到这个注释，你需要把它添加到某个元素中  
var div = doc.createElement("div");  
div.appendChild(comment);  
  
// 如果你查看 div 的内容，你会看到注释  
console.log(div.innerHTML);  
// 输出: <!--这是一个注释-->

在这个例子中，首先创建了一个新的Document对象。然后，使用createComment()方法在这个文档中创建了一个注释。最后，将这个注释添加到一个新创建的div元素中，并打印出这个div的innerHTML，可以看到输出的结果是注释的HTML表示。

CDATASection类型- 13.1.11 -

CDATASection类型是XML文档中的一种特殊类型，表示CDATA区域。CDATA区域用于在XML文档中包含一些不需要解析的文本，例如可能包含一些特殊字符或HTML标签的文本。

CDATA区域在XML文档中具有以下特征：

nodeType的值为4。
nodeName的值为"#cdata-section"。
nodeValue的值是CDATA区域中的内容。

在真正的XML文档中，可以使用document.createCDataSection()来创建CDATA区域，只需为其传入节点的内容即可。

DocumentType类型- 13.1.12 -

在DOM（文档对象模型）中，DocumentType是一个非常重要的类型，它用来定义HTML文档的类型。DocumentType对象包含了文档类型的信息，比如文档的版本、规范等。

在HTML5中，DocumentType对象的使用方式比较简单，一般通过<!DOCTYPE html>声明来创建。

在XHTML中，DocumentType对象必须使用DTD声明来定义文档类型，并且需要通过W3C验证，以确保文档的正确性和合法性。

DocumentType对象包含了一些属性，例如：

name: 保存文档类型的名称，例如"HTML"。
entities: 由文档类型描述的实体的NamedNodeMap对象。
notations: 由文档类型描述的符号的NamedNodeMap对象。

一般来说，在编写HTML文档时，需要考虑使用哪种DocumentType声明。在HTML5中，使用简单的声明格式<!DOCTYPE html>即可。如果需要考虑兼容旧的浏览器，可以添加传统的DTD声明，如XHTML1.0 Transitional和HTML4.01 Transitional。需要注意的是，一旦确定DocumentType，就必须遵守相应的规范和约束，否则会影响页面的正确性和兼容性。

DocumentFragment类型- 13.1.13 -

DocumentFragment是一种在DOM（文档对象模型）中的轻量级文档类型，它能够包含和操作节点，但并没有像完整文档那样有额外的消耗。

DocumentFragment类型是唯一一个在标记中没有对应表示的类型。在XML或HTML文档中，无法直接看到其对应的标签。然而，通过JavaScript，可以创建和使用DocumentFragment，以操作和暂时保存一些节点信息。

DocumentFragment节点具有以下特征：

nodeType的值为11。
nodeName的值为"#document-fragment"。
nodeValue的值为null。
parentNode的值为null。

虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。

Attr类型- 13.1.14 -

Attr类型是DOM（文档对象模型）中的一种类型，表示元素特性。在HTML或XML文档中，Attr类型表示元素attribute属性中的节点。

Attr节点具有以下特征：

nodeType的值为2。
nodeName的值为特性名称。
nodeValue的值为特性值。
parentNode的值为null。
在HTML中不支持子节点。
在XML中子节点可以是Text或者EntityReference。

尽管Attr节点是DOM文档树的一部分，但它们通常不被认为是DOM文档树的一部分。在开发过程中，Attr对象很少被直接引用，开发者更常用的是getAttribute()，setAttribute()和removeAttribute()方法来操作属性。

另外，每一种Attr对象还有三个属性：

name: 特性的名称。
value: 特性的值。
specified: 一个布尔值，用以区别特性是在代码中指定还是默认的。

在所有浏览器中，可以直接访问Attr类型的构造函数和原型。总的来说，Attr类型是DOM中一个重要的组成部分，但通常开发者不需要直接操作Attr节点，而是通过上述方法来操作元素的特性。

JavaScript

1.JavaScript概述

1.1 什么是JavaScript

1.2 HTML中的JavaScript

1.3 其他相关知识

2.语言基础

2.1 语法

2.2 变量

2.3 数据类型

2.4 操作符

2.5 语句

3.变量、作用域与内存

3.1 原始值与引用值

3.2 执行上下文与作用域

3.3 垃圾回收

4.基本引用类型

4.1 Date

4.2 RegExp

4.3 原始值包装类型

4.4 内置对象

5.集合引用类型

5.1 Array

5.2 定型数组

5.3 Map

5.4 WeakMap

5.5 Set

5.6 WeakSet

6.迭代器与生成器

6.1 迭代器

6.2 生成器

7.对象和类

7.1 理解对象

7.2 创建对象

7.3 继承

7.4 类

8.代理与反射

8.1 代理基础

8.2 代理捕获器与反射方法

8.3 代理模式

9.函数

9.1 函数简介

9.2 函数的参数

9.3 函数定义

9.4 函数内部

9.5 函数特性

9.6 私有变量

10.期约与异步函数

10.1 异步编程

10.2 期约

10.3 异步函数

11.BOM

11.1 window对象

11.2 location对象

11.3 navigator对象

11.4 其他对象

12.客户端检测

12.1 能力检测

12.2 软件与硬件检测

13.DOM

13.1 节点层级

13.2 DOM编程

13.3 MutationObserver接口

14.DOM扩展

14.1 Selectors API

14.2 HTML5

15.DOM2和DOM3

15.1 DOM的演进

15.2 样式

15.3 遍历

15.4 范围

16.事件

16.1 事件流

16.2 事件处理程序

16.3 事件对象

16.4 事件类型

16.5 内存与性能

16.6 模拟事件

17.动画与Canvas图形

17.1 2D绘图上下文

17.2 WebGL