十四、DOM

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

一、节点层级

在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节点的一个引用

 

乘风xs
关注
专栏目录
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1188
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
JavaScript第十四章 DOM编程之获取下拉列表选项中的value
Lv Zejiang
08-28 210
JavaScript自我学习路线DOM编程之获取下拉列表选项中的value DOM编程之获取下拉列表选项中的value onchange 事件可用于单选框与复选框改变后触发的事件 onchange 事件会在域的内容改变时发生 支持该事件的 HTML 标签 <input type="text">, <select>, <textarea> 支持该事件的 JavaScript 对象： fileUpload, select, text, textarea <!
js实现监听dom元素的属性变化
D_bel的博客
07-24 2万+
通过MutationObserver来实现： MutationObserver可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连...
作为前端开发，你了解MutationObserver吗？
06-12 3580
MutationObserver在开发中或许不常使用，但是特殊情况下确实可以解决某些问题。和addEventListener有些类似，当用户触发了某些事件操作时会调用对应的回调 我也是前些天在需求迭代中第一次使用MutationObserver，由于Antd早期版本的弹窗没有做响应功能，以及代码中的弹窗许多没有进行二次封装，导致无法得知弹窗何时出现及消失，于是我使用前端Hack的方式取个巧，监听元素变化解决了此类问题，这里也是做个知识点分享
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver：原理与实战案例
最新发布
RenGJ010617的博客
09-16 4735
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时，我们经常需要监测 DOM 的变化，这时候，MutationObserver 就显得格外有用。在这篇博客中，我们将详细介绍 MutationObserver 的工作原理，并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
MutationObserver是什么
m0_57236802的博客
09-03 934
是一个JavaScript API，用于监控DOM（文档对象模型）的变化。当观察的DOM元素或其子元素发生变化时，它会触发一个回调函数。这使得你可以在元素添加、删除或修改时执行特定的操作。这个API非常有用，尤其是在需要实时响应DOM变化的场景中，例如单页应用（SPA）或动态加载内容的网站。
了解HTML5中的MutationObserver
細水、長流√的专栏
03-25 1367
MutationObserver翻译过来就是变动观察器，字面上就可以理解这是用来观察Node（节点）变化的。MutationObserver是在DOM4规范中定义的，它的前身是MutationEvent事件，该事件最初在DOM2事件规范中介绍，到来了DOM3事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用。 MutationEvent 虽然MutationEvent已经被弃用...
MutationObserver 用法总结( 监听节点、DOM变化 )
weixin_45412353的博客
07-07 2万+
一、认识MutationObserver 今天在查看Event Loop相关的文章的时候，看见了MutationObserver类，然后自己看了一下，在这做下总结 MutationObserver：原生api中用来监听node节点变化的一个类，用来代替Mutation Events 我们先来看看MutationObserver中有哪些方法 我们使用dir函数输出一下 我们可以看到MutationObserver中有三个方法，我们一一来看 observe observe(target, config)
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
《JavaScript高级程序设计》- 第十四章：DOM
qq_55978913的博客
02-27 819
第十四章：DOM 文档对象模型（Document Object Model）是HTML 和 XML文档的编程接口；就是开发者可以通过JavaScript编程，添加、删除、修改页面的各个部分； 14.1 节点层级 任何HTML\XML文档都可以表示为由节点构成的层级结构。 <html> <head> <title>Sample Page</title> </head> <body>
js基础知识（二十四）--DOM简介、事件、加载、查询
weixin_47928499的博客
08-05 157
DOM简介、事件、加载、查询
浅谈MutationObserver
m0_45093055的博客
05-27 1466
MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。
MutationObserver
梦殇的博客
08-12 1678
MutationObserver MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。 简单来讲就是使用Mutationboserver可以监听dom节点的属性变化，节点的删除增加等一系列变化 那MutationObserver有啥用呐？ 页面水印的制作 防止水印被用户...
作为前端你还不懂MutationObserver？那Out了
热门推荐
编码世界
12-02 6万+
MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。
【JS】MutationObserver 监视 DOM 树改变的api
呆呆狗
11-26 2001
是一个构造函数，可以用来监听某个节点的变化，当节点发生变化时，可以执行一些回调函数。它不会立即执行，需要调用MutationObserver的observe方法，传入你想要监听的节点，以及一些配置，然后当节点发生变化时，就会执行你传入的回调函数。
JavaScript零基础入门 13：DOM规范中的MutationObserver接口
学Java，找哪吒
03-24 5917
目录一、MutationObserver接口二、MutationObserver基本用法1、observe()方法2、回调与MutationRecord3、disconnect()方法4、复用MutationObserver三、MutationObserverInit与观察范围四、异步回调与记录队列五、性能、内存与垃圾回收1、 MutationObserver的引用2、MutationRecord的引用 一、MutationObserver接口 不久前添加到DOM规范中的MutationObserver接口
MutationObserve的使用和应用
赵天铭的博客
11-23 3476
MutationObserve的使用和应用 前言 最近接到一个项目需求，就是把另一个项目嵌入到当前项目中。要求很简单，让人看不出这是嵌入过来的。 本来觉得这也没什么，因为以前也做过一次。 方案无非就是通过iframe嵌入，通过postMessage进行通信（ps:两个项目都是我们自己的，可以修改代码）。 其他的一切都ok，就有个一个问题困扰了。 我们当前的项目是一个典型的圣杯布局，头部和底部都要显...
使用Mutation Observer监听DOM变化（也许是最完全指南？）
百岁如流富贵冷灰的博客
12-07 4262
前言 打开自己的博客，猛然发现自己已经有快两个月没有更新了，一方面是因为确实没有遇到什么特别值得记录的问题及知识点，另一方面则是所在部门的组织架构调整，唉（????）日子难过啊，没啥心情更新。 正题 众所周知，我们监听input值得变化，我们可以通过绑定事件来实现。但是对于DOM元素的属性、数据的变化我们应该如何监听呢。 这个时候就需要用到我们今天的主角了：MutationObserver，它提供了监视对DOM树所做更改的能力。目前可以监听DOM节点的属性、CharacterData以及子元素的变化。 介绍
javascript学习手册十四：html dom——文档元素的操作（二）
06-28
### 回答1： HTML DOM，即HTML文档对象模型，是一种用于访问和操作HTML文档中元素的标准方法。在JavaScript中，可以使用DOM来查找、修改、添加和删除HTML元素。在本教程中，我们将学习如何使用DOM来操作HTML文档的元素。 ### 回答2： JavaScript学习手册十四：HTML DOM——文档元素的操作（二）介绍了文档元素的一些高级操作，包括插入和删除节点、替换节点、复制节点等。下面我将详细介绍这些操作的用法和注意事项。 首先是插入节点，包括appendChild()和insertBefore()方法。appendChild()方法可以将一个节点追加到某个元素的子节点列表的末尾，而insertBefore()方法可将一个节点插入到元素的指定位置。这两个方法都可以接收字符串、元素、文本节点等参数，可以将它们转换为节点后插入。需要注意的是，插入节点后必须重新获取元素才能正确地操作修改后的DOM树。 接下来是删除节点，包括removeChild()和replaceChild()方法。removeChild()方法可以移除指定节点，replaceChild()方法则可将指定节点替换为另一个节点。调用这两个方法也需要重新获取元素。 另外，还有cloneNode()和hasChildNodes()方法。cloneNode()方法可以复制一个节点，包括节点的属性、事件、插入的子节点等，但不包括子节点的引用和事件处理程序。hasChildNodes()方法可判断节点是否包含子节点。 需要注意的是，在使用这些高级DOM操作时，应尽可能减少DOM的操作次数。因为频繁操作DOM可能会导致性能问题，因此应该尽可能缓存和重用DOM元素，同时避免频繁更新DOM。此外，在修改DOM树时，应当小心操作，避免影响网页布局和用户体验。 总之，JavaScript学习手册十四：HTML DOM——文档元素的操作（二）提供了一些高级操作DOM树的方法，可以方便地插入、删除、替换和复制节点。合理地使用这些方法，可以为网页的构建、交互和流畅度提供帮助。 ### 回答3： HTML DOM是JavaScript操作HTML和XML的接口，它将HTML和XML文档表示为具有层次结构的节点树，通过对节点树进行操作，可以实现对文档元素的增删改查。之前我们已经学习了文档元素的遍历和属性的操作，本篇文章将进一步介绍如何对文档元素进行插入、替换和移除操作。 文档元素的插入操作，可以通过createElement()方法创建一个元素节点，然后通过appendChild()将该节点插入到指定的父节点下。还可以使用insertBefore()方法在指定位置插入节点，该方法需要指定要插入的节点和插入位置的参考节点。同时还可以使用insertAdjacentHTML()方法直接插入HTML代码并将其转换为节点。 文档元素的替换操作，可以通过replaceChild()方法实现，该方法需要指定要替换的节点和替换后的新节点。替换操作可以用于更新页面中的元素，比如将旧的图片替换成新的图片等。 文档元素的移除操作，可以通过removeChild()方法实现，该方法需要指定要移除的节点，并将其从父元素节点中删除。还可以使用remove()方法直接将元素节点从页面中删除。 在进行文档元素操作时，需要注意避免对页面结构造成破坏，比如插入重复的元素或删除父元素节点等操作。另外，DOM操作可能会影响页面的性能，因此在实际应用中需要谨慎处理。 总的来说，HTML DOM提供了丰富的接口，可以实现对文档元素的灵活操作，帮助我们更好地控制和管理页面内容。对于Web前端开发者而言，熟练掌握HTML DOM操作技巧是非常重要的一项技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

乘风xs

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

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

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

打赏作者

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

抵扣说明：

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

余额充值