第十四章：DOM

最新推荐文章于 2025-04-27 10:13:10 发布

原创最新推荐文章于 2025-04-27 10:13:10 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

读书笔记专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了DOM（文档对象模型）的各种节点类型及其属性和方法，包括如何创建、操作和查询DOM节点，以及MutationObserver接口的使用。

部署运行你感兴趣的模型镜像

第十四章：DOM

14.1 节点层级

文档元素：html

14.1.1 Node 类型

nodeType
- Node.ELEMENT_NODE：1
- Node.ATTRIBUTE_NODE：2
- Node.TEXT_NODE：3
- Node.CDATE_SECTION_NODE：4
- Node.ENTITY_REFERENCE_NODE：5
- Node.ENTITY_NODE：6
- Node.PROCESSING_INSTRUCTION_NODE：7
- Node.COMMENT_NODE：8
- Node.DOCUMENT_NODE：9
- Node.DOCUMENT_TYPE_NODE：10
- Node.DOCUMENT_FRAGMENT_NODE：11
- Node.NOTATION_NODE：12

1. `nodeName`与 `nodeValue`

值取决于节点类型

2. 节点关系

childNodes
- hasChildNodes()
parentNode
previousSibling和 nextSibling：前后的兄弟节点
firstChild和 lastChild
ownerDocument：指向代表整个文档的文档节点

3. 操纵节点

appendChild()：传入已存在的节点时，会将它移动到新位置
insertBefore()
replaceChild()：返回被替换的节点
removeChild()

4. 其他方法

cloneNode()：传入布尔值，决定是否深复制
- 只会复制 html 属性
normalize()：删除空文本节点，合并相邻的文本节点

14.1.2 Document 类型

nodeType: Node.DOCUMENT_NODE
nodeName: "#document"
nodeValue: null
parentNode: null
ownerDocument: null
子节点可以是 DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment

1. 文档子节点

documentElement：指向 <html>
baody：指向 <body>
doctype：指向 <!doctype>

2. 文档信息

title：修改此属性不会改变 <title>
URL：包含当前页面的完整 URL，不可设置
domain：包含页面的域名，不能设置为 URL 中不包含的值
- 放松后不能再收紧
referrer：包含链接到当前页面的那个页面的 URL，不可设置

3. 定位元素

getElementById()
getElementByTagName()
- namedItem()

<img src="" name="myImage"></img>

const imgs = document.getElementsByTagName("img");
let myImg1 = imgs.namedItem("myImage");
let myImg2 = imgs['myImage'];

getElementsByName()

4. 特殊集合

document.anchors：所有带 name 属性的 <a>元素
document.forms：所有 <form>元素
document.images
document.links：所有带 href 属性的 <a>元素

5. DOM 兼容性检测

6. 文档写入

write() / writeln()
open() / close()

14.1.3 ELement 类型

nodeType: Node.ELEMENT_NODE
nodeName: 元素标签名
- 通过 nodeName / tagName获取（建议转换为小写）
nodeValue: null
parentNode: Document / Element 对象
子节点：p414（第四版）

1. HTML 元素

id
title
lang
dir：语言书写方向
- ltr：从左向右
- rtl：从右向左
className

2. 取得属性

getAttribute()

3. 设置属性

setAttribute()
removeAttribute()

4. attribute 属性

p418（第四版）

5. 创建元素

document.createElement()

6. 元素后代

14.1.4 Text 类型

nodeName: '#text'
nodeValue: 节点包含的文本
不支持子节点
方法：
- appendData()
- deleteData(offset, count)
- insertData(offset, text)
- replaceData(offset, count, text)
- splitText(offset)：在指定位置将当前文本节点拆分为两个
- substringData(offset, count)

1. 创建文本节点

document.createTextNode()

2. 规范化文本节点

normalize()

3. 拆分文本节点

14.1.5 Comment 类型

nodeName: '#comment'
nodeValue: 注释的内容
不支持子节点

14.1.6 CDATASection 类型

表示 XML 中特有的 CDATA 区块
p423（第四版）

14.1.7 DocumentType 类型

nodeValue: null

14.1.8 DocumentFragment 类型

不能添加到文档，作用是充当其他要被添加的节点的仓库
nodeName: '#document-fragment'
nodeValue: null
document.createDocumentFragment()

<ul id='list'></ul>

let fragment = document.createDocumentFragment();
let ul = document.getElementsById("list");

for (let i = 0; i < 3; i++) {
    let li = document.createElement("li");
    li.appendChild(document.createTextNode(`item - ${i}`));
    // 直接插入 ul 会导致浏览器多次重新渲染页面
    fragment.appendChild(li);
}

ul.appendChild(fragment);   // fragment 中的节点被添加到 ul 中，而其本身不会被添加进去

14.1.9 Attr 类型

nodeName: 属性名
nodeValue: 属性值
HTML 中不支持子节点
属性：
- name
- value
- specified：布尔值，表示属性是否使用默认值
document.createAttribute()
setAttributeNode()

14.2 DOM 编程

14.2.1 动态脚本

通过 innerHTML 属性创建的脚本元素永远不会执行

14.2.2 动态样式

<link rel="stylesheet" type="text/css" href="styles.css">

14.2.3 操作表格

p429（第四版）

14.2.4 使用 NodeList

14.3 MutationObserver 接口

可以在 DOM 被修改时异步执行回调

14.3.1 基本用法

let observer = new MutationObserver(() => console.log("DOM changed"));

1. `observe()`方法

新创建的 MutationObserver 实例不会关联 DOM 的任何部分，需要调用该方法

let observer = new MutationObserver(() => console.log("body attributes changed"));
observer.observe(document.body, { attributes: true });

2. 回调与 MutationRecord

每个回调都会收到一个 MutationRecord 实例的数组，实例包含的信息包括发生了什么变化、DOM 的那一部分受到了影响

3. `disconnect()`方法

4. 复用 MutationObserver

多次调用 observe()可以复用一个 MutationObserver 对象观察多个不同的目标节点
disconnect()会停止观察所有目标

5. 重用 MutationObserver

14.3.2 MutationObserverInit 与观察范围

observe()接收的第二个参数
MutationObserverInit 对象用于控制对目标节点的观察范围
p438（第四版）

14.3.3 异步回调与记录队列

1. 记录队列

2. `takeRecords()`方法

清空记录队列，取出并返回其中的 MutationRecord 实例

14.3.4 性能、内存与垃圾回收

您可能感兴趣的与本文相关的镜像

ComfyUI

AI应用

ComfyUI

ComfyUI是一款易于上手的工作流设计工具，具有以下特点：基于工作流节点设计，可视化工作流搭建，快速切换工作流，对显存占用小，速度快，支持多种插件，如ADetailer、Controlnet和AnimateDIFF等

第十四章：DOM

第十四章：DOM

14.1 节点层级

14.1.1 Node 类型

1. nodeName与 nodeValue

2. 节点关系

3. 操纵节点

4. 其他方法

14.1.2 Document 类型

1. 文档子节点

2. 文档信息

3. 定位元素

4. 特殊集合

5. DOM 兼容性检测

6. 文档写入

14.1.3 ELement 类型

1. HTML 元素

2. 取得属性

3. 设置属性

4. attribute 属性

5. 创建元素

6. 元素后代

14.1.4 Text 类型

1. 创建文本节点

2. 规范化文本节点

3. 拆分文本节点

14.1.5 Comment 类型

14.1.6 CDATASection 类型

14.1.7 DocumentType 类型

14.1.8 DocumentFragment 类型

14.1.9 Attr 类型

14.2 DOM 编程

14.2.1 动态脚本

14.2.2 动态样式

14.2.3 操作表格

14.2.4 使用 NodeList

14.3 MutationObserver 接口

14.3.1 基本用法

1. observe()方法

2. 回调与 MutationRecord

3. disconnect()方法

4. 复用 MutationObserver

5. 重用 MutationObserver

14.3.2 MutationObserverInit 与观察范围

14.3.3 异步回调与记录队列

1. 记录队列

2. takeRecords()方法

14.3.4 性能、内存与垃圾回收

1. `nodeName`与 `nodeValue`

1. `observe()`方法

3. `disconnect()`方法

2. `takeRecords()`方法