十四、DOM

最新推荐文章于 2025-04-08 10:14:44 发布
最新推荐文章于 2025-04-08 10:14:44 发布
阅读量856 收藏
点赞数
分类专栏： JavaScript高级程序设计笔记 文章标签： DOM Mutation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xaishujin/article/details/123693265
版权
本文探讨了HTML DOM的节点层次结构，包括元素、文本、注释等类型，展示了如何通过DOM操作API创建、修改和遍历节点，以及MutationObserver在DOM变化监听中的应用。同时，涉及了性能优化和内存管理的最佳实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、节点层级

在HTML中，文档元素始终是<html>,XML中任何元素都能成为文档元素

DOM中共有12种节点类型，如元素节点、属性节点、文档类型节点、注释节点等，都继承于Node类型

1.Node类型

nodeType: 表示节点类型，由12个常量取值，如Node.ELEMENT_NODE

浏览器并不支持所有节点类型

nodeName与nodeValue：对元素而言，前者对应标签名，后者始终为null

节点关系：

childNodes:类数组对象，可以使用[index]访问，有length属性,实时快照

someNode.childNodes[1] === someNode.childNodes.item(1)

parentNode

previousSibling      nextSibling

firstChild                lastChild

hasChildNodes() :返回true or false

ownerDocument: 所有结点共享的关系，指向代表整个文档的文档节点

操纵节点：

appendChild():将新节点添加到末尾，或者将已存在节点移动到末尾

insertBefore(新节点，参照节点）：参照节点为null时从末尾添加

replaceChild(新节点，要被替换的节点）

removeChild(要移除的节点）

其他方法：

cloneNode(）：传入true表示复制当前节点及所有子DOM树；false则复制当前节点

不会复制JavaScript属性

Normalize():处理文本节点，如果为空则删除，如果多个并列则合并

2.Document类型

表示文档节点的类型

1）文档子节点

可以是：DocumentType   Element  ProcessingInstruction  Comment

documentElement属性始终指向HTML页面中<html>元素

body属性始终指向body元素

doctype属性（若存在）则指向文档声明、comment文档外的注释

2）文档信息

title属性

URL 当前页面完整url

 domain   包含页面的域名

 referrer 包含链接到当前页面的那个页面的url

3)定位元素

getElementById()

getElementsByTagName()

HTMLCollection取特定元素item(), namedItem()

getElementsByName()

4)特殊集合

 document.anchors  带name属性的<a>

 document.applets 所有<applet>元素

 document.forms 所有<form>元素

 document.images 所有<img>元素

 document.links 所有带href的<a>元素

5）兼容性监测

 document.implementation属性，提供hasFeature(feature, version)方法，返回true则支持  【已废弃】

6）文档写入

 document.write()简单写入一个文本

 document.writeln()  写入后加一个换行符

 open() close()打开和关闭网页输出流

3.Element类型

表示XML或者HTML元素

在HTML中，元素标签名始终全大写；在XML中，标签名始终与源代码中一致

1）HTML元素

 id

 title  提示语

 lang 元素内容语言

 dir  语言书写方向“ltr"  "rtl"

 className

2)属性值操作

getAttribute()

setAttribute()

removeAttribute()

3）attributes属性

getNamedItem()

removeNamedItem()

setNamedItem()

 item()

4)创建元素

 document.createElement(tagName)

5)元素后代

 childrenNodes属性，getElementsByTagName()

 避免存在空文本子节点，建议对nodeType进行判断

4.Text类型

表示纯文本节点

操作文本的方法

appendData(text)

deleteData(offset,count)

insertData(offset,text)

replaceData(offset, count, text)

splitText(offset) 从offset将当前文本节点拆成两个文本节点

substringData(offset, count)提取子文本

length属性  nodeValue.length === data.length

1)创建文本节点

document.createTextNode(text)

2)规范化文本节点

 normalize()

3)拆分文本节点

splitText()

5.Comment类型

注释节点

拥有处理splitText()之外的所有Text节点的操作方法

6.CDATSection类型

表示XML中特有的CDATA区块

和Comment操作方法相同

在XML中可以使用document.createCDataSection()

7.DocumentType类型

表示文档类型信息

 name 文档类型名称

 entities 文档类型描述的NamedNodeMap

 notations  文档类型描述表示法的NamedNodeMap

8.DocumentFragment类型

唯一在标记中没有对应类型

 document.createDocumentFragment()

9.Attr类型

 name 属性名

 value 属性值

 specified 是否是默认值

二、DOM编程

1.动态脚本

两种方式：引入外部脚本和直接插入源代码

1）创建script标签，设置src属性，document.body.appendChild()

2)document.createElement('script'), 设置text属性或者appendChild(dcoument.createTextNode(code)),添加到body

2.动态样式

类似于动态脚本

1)动态创建link,需要设置的属性有，link.rel  link.type link.href  添加到head

2)动态创建style，appendChild()或者style.styleSheet.cssText

3.操作表格

<table>元素属性和方法

 caption

 tBodies

 tFoot

 tHead

 rows

 createTHead()

 createTFoot()

 createCaption()

 deleteTHead()

 deleteTFoot()

 deleteCaption()

 deleteRow(pos)

 insertRow(pos)

<tbody>属性和方法

  rows

  deleteRow(pos)

  insertRow(pos)

<tr>属性和方法

 cells

 deleteCell(pos)

 insertCell(pos)

4.使用NodeList

NodeList NamedNodeMap   HTMLCollection都是实时的

三、MutationObserver接口

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

1.基本用法

MutationObserve实例通过调用构造函数创建并传入一个回调函数来创建

 let observer = new MutationObserver(() => console.log('DOM was mutated'))

1)observe（）

observe(dom节点，mutationObserverInit对象) 将observer与Dom关联起来

2)回调与MutationRecord

每个回调都会收到一个MutationRecord实例的数组，MutationRecord记录变化信息

回调函数的第二个参数为observer实例

3）disconnect()

提前终止回调

使用setTimeout可以让已经入列的信息被观察后再断联

4）复用MutationObserver

可以多次调用observe()，用一个MutationObserver对象观察多个不同的目标节点

MutationRecord的target属性标记不同的目标节点

 5）重用MutationObserver

 disconnect()方法并没有结束实例的生命，可以继续observe（）

2.MutationObserverInit对象与观察范围

粗略可分属性变化、文本变化、子节点变化

Subtree   是否观察子树，默认false,

Attributes  属性变化，默认false

attributeFilter  字符串数组，要观察那些属性

attributeOldValue  默认false

characterData 修改字符数据是否出发事件，默认false

characterDataOldValue

childList  修改目标节点的子节点是否触发变化事件

1）观察属性

观察属性节点的添加、修改、删除

2）观察字符串数据

文本节点（Text Comment  ProcessingInstruction节点）的添加、修改、删除

3）观察子节点childList

子节点的添加和移除

子节点重新排序会触发两次

4）观察子树

将观察事件扩展到整个元素的子树

3.异步回调与记录队列

记录队列对于每个MutationObserver实例都是唯一的，是所有DOM变化事件的有序队列

1）记录队列

每次MutationRecord实例被添加到记录队列中，当且仅当之前没有排期的微任务时，才会将MutationObserver的回调作为微任务调度到任务队列中。保证记录队列的内容不会被回调处理两次。

2）takeRecords()

调用takeRecords()方法可以取出记录队列中所有MutationRecord实例，并清空记录队列

四、性能、内存和垃圾回收

MutationObserver对目标节点具有弱引用；

目标节点对MutationObserver具有强引用

记录队列中每个MutationRecord实 例至少包含对已有DOM节点的一个引用

 

JavaScript学习手册十四：HTML DOM——文档元素的操作（二）
qq_45823118的博客
04-24 1万+
HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件 1.创建节点 任务描述 1.本关任务：创建一个表单<form>节点。 2.具体要求如下： 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示： <form id
《JavaScript高级程序设计》- 第十四章：DOM
qq_55978913的博客
02-27 869
第十四章：DOM 文档对象模型（Document Object Model）是HTML 和 XML文档的编程接口；就是开发者可以通过JavaScript编程，添加、删除、修改页面的各个部分； 14.1 节点层级 任何HTML\XML文档都可以表示为由节点构成的层级结构。 <html> <head> <title>Sample Page</title> </head> <body>
【原创】瑞数6补环境详解
2301_80198695的博客
04-01 2871
瑞数六检测点详解及源码1.的检测检测方式：某些反爬系统会检查，因为早期的 Internet Explorer (IE) 有，但现代浏览器已经废弃。绕过方式：代码重新定义了，并且赋值了length，模拟 IE 的行为，从而绕过检测。2.webdriver属性检测检测方式：Selenium 会在设为true，很多网站会检查是否存在且为true来判断是否是自动化浏览器。绕过方式代码重写了的getter方法，让其始终返回false，避免被检测到。还定义了，防止函数调用toString()时露馅。3.
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver：原理与实战案例
RenGJ010617的博客
09-16 8281
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时，我们经常需要监测 DOM 的变化，这时候，MutationObserver 就显得格外有用。在这篇博客中，我们将详细介绍 MutationObserver 的工作原理，并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
深度解析MutationObserver：Vue生态下的DOM监听终极方案
最新发布
Cang_Ye的博客
04-08 513
Vue生态下的DOM监听终极方案。MutationObserver.
MutationObserver
梦殇的博客
08-12 1735
MutationObserver MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 简单来讲就是使用Mutationboserver可以监听dom节点的属性变化，节点的删除增加等一系列变化 那MutationObserver有啥用呐？ 页面水印的制作 防止水印被用户...
JavaScript 中的 MutationObserver
qq_43730272的博客
02-19 495
JavaScript 中的 MutationObserver 是用于异步观察 DOM 变化的接口，能够监控节点的添加、移除、属性修改等操作。获取原始文本：使用 nodeValue 获取节点的文本内容，并去除前后空格。检查节点类型：如果节点是文本节点。
Web中原生内置的Observer方法们：MutationObserver、IntersectionObserver与ResizeObserver
piaochen0的博客
04-01 715
在现代Web开发中，Observer（观察者）模式是实现事件驱动架构的一种重要方式。H5及相关的JavaScript API引入了多种Observer，使得开发者能够更加高效地监听DOM变化、Intersection状态等。下面，本文将介绍几种重要的Observer及其使用示例。
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1249
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
JavaScript 学习之旅：第三十四课 - 精通 DOM - 快速添加元素
caifox的博客
01-06 951
了解了如何使用一次性替换所有的子节点，简化了代码逻辑。挑战：通过一个挑战练习了如何快速添加多个任务，并使用提高性能，同时通过保存用户的任务选择。注意事项：编写代码时要注意innerHTML的安全性，合理使用和。
使用Mutation Observer监听DOM变化（也许是最完全指南？）
百岁如流富贵冷灰的博客
12-07 4487
前言 打开自己的博客，猛然发现自己已经有快两个月没有更新了，一方面是因为确实没有遇到什么特别值得记录的问题及知识点，另一方面则是所在部门的组织架构调整，唉（????）日子难过啊，没啥心情更新。 正题 众所周知，我们监听input值得变化，我们可以通过绑定事件来实现。但是对于DOM元素的属性、数据的变化我们应该如何监听呢。 这个时候就需要用到我们今天的主角了：MutationObserver，它提供了监视对DOM树所做更改的能力。目前可以监听DOM节点的属性、CharacterData以及子元素的变化。 介绍
MutationObserver 变动观察器
shuxiaoxii的博客
08-19 385
MutationObserver MutationObserver.observe() config的配置项 定义 DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。 var observer
jsdom自动补全环境
小龙在线
12-27 3299
jsdom自动补全环境。
Rs 5代 补环境
2401_85228402的博客
09-02 775
js补环境 过cookie加密 反爬
JS逆向之补环境学习笔记(较杂)
Xzike的博客
10-09 6740
JS逆向之补环境下载使用vm2检测环境的一些点参考 下载使用vm2 vm2可以理解为一个纯净的脱离Node的V8环境，相当于重新启动了一个进程，然后在进程中不允许加载Node中的一些东西，禁止了一些Node中的特性，是一个相当于V8的沙箱环境。 npm install vm2 检测环境的一些点 node环境中有process，而V8环境或者浏览器环境中没有process。 任何canvas指纹都存在一定得误杀率，所以厂商不会去对canvas指纹做强校验，因为不同浏览器canvas底层实现代码不同；其次即
MutationObserver详解
qq_42753983的博客
03-08 790
1.基于之前Chrome游览器插件开发的过程中，会遇到在插件控制台打印被安游览器页面的元素，一直未解决。后来找到了解决了办法可以使用MutationObserver；使用MutationObserver这个可以在被安游览器页面直接打印页面元素等等，可能你会说本来不就可以获取吗。会在最后附上插件具体代码。对一个节点添加观察器，就像使用addEventListener方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。但是，如果指定不同的options对象，就会被当作两个不同的观察器。
document.body为空或不是对象
java学习开发
09-29 4044
在IE6中，由于引入的JS库在该版本中存在BUG，所以当我们在标记之间引用document.body时会出现document.body为空或不是对象，这时可将代码移至标签之间，该问题即可解决。 百度的ueditor在IE6或IE8中提示： 行: 13384 错误: 'document.body' 为空或不是对象 原因为： document还没有加载完全，就执行了e
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乘风xs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值