Web前端之JavaScript的DOM操作冷门API

news2025/4/1 9:12:54

MENU

  • 前言
  • 1、Element.checkVisibility()
  • 2、TreeWalker
  • 3、Node.compareDocumentPosition()
  • 4、scrollIntoViewIfNeeded()
  • 5、insertAdjacentElement()
  • 6、Range.surroundContents()
  • 7、Node.isEqualNode()
  • 8、document.createExpression()
  • 小结


前言

作为前端开发者,我们每天都在操作DOM,但DOM的API中隐藏着许多鲜为人知却极其实用的方法。本文将介绍一些冷门但能显著提升开发效率的DOM操作技巧。


1、Element.checkVisibility()

检测元素是否真正可见,包括CSS遮挡、滚动隐藏、透明度为0等场景。
适用场景:表单验证可见性、广告曝光统计、动态内容懒加载检查。

1


2、TreeWalker

高性能遍历DOM树的迭代器模式。
优势:比querySelectorAll更节省内存,尤其适合超大型DOM树遍历。

2


3、Node.compareDocumentPosition()

精确判断两个节点的位置关系。


位掩码常量
DOCUMENT_POSITION_PRECEDING:节点A在B之前。
DOCUMENT_POSITION_FOLLOWING:节点A在B之后。
DOCUMENT_POSITION_CONTAINS :A是B的祖先。

3


4、scrollIntoViewIfNeeded()

智能滚动,元素不在视口时自动滚动到可视区域。
对比传统方案:比scrollIntoView()更智能,避免过度滚动。

4


5、insertAdjacentElement()

精准控制插入位置的增强版appendChild。


位置参数
beforebegin:元素前插入。
afterbegin:元素内部开头。
beforeend:元素内部末尾
afterend:元素后插入。

5


6、Range.surroundContents()

选区操作神器:包裹文本选区。
应用场景:富文本编辑器、文本高亮批注功能。

6


7、Node.isEqualNode()

深度比较两个节点是否结构相同。
注意:只比较结构和属性,不比较内容变化,如动态绑定的点击事件。

7


8、document.createExpression()

XPath表达式预编译,性能优化利器。
适用场景:大数据量表格的快速筛选查询。

8


小结

注意事项
部分API,如checkVisibility需Chrome106+支持。
生产环境使用前请检查浏览器兼容性。
冷门API的合理使用能让代码更优雅,但切忌过度炫技。


这些API虽然冷门,但在特定场景下能大幅简化代码逻辑。建议收藏本文作为DOM操作的「瑞士军刀手册」。如果你发现其他有趣的冷门API,欢迎在评论区分享!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324883.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

集成开发环境革新:IntelliJ IDEA与Cursor AI的智能演进

集成开发环境革新:IntelliJ IDEA 与 Cursor AI 的智能演进 集成开发环境(IDE) 是软件开发者必不可少的工具。一个优秀的 IDE 不仅能够帮助编写和调试代码,还能集成版本控制和代码优化等多种功能。如今,随着人工智能&a…

EXCEL报错:无法共享此工作薄,因表包含excel表或xml映射的解决方法

在分享工作薄是,如果出现了“无法共享此工作薄,因表包含excel表或xml映射”的报错,那么有两个原因: 1.包含Excel表格,这个也是相对比较常见的原因。 首先选中表格。如果你不知道表的位置在哪,那么在Excel左…

《Linux运维实战:Ubuntu 22.04配置pam实现密码复杂度策略》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:Linux运维实战总结 一、背景信息 由于安全方面的考虑,先要求Ubuntu 22.04系统需配置密码复杂度策略,先要求如下&#xff1…

从代码学习深度学习 - 使用块的网络(VGG)PyTorch版

文章目录 前言一、VGG网络简介1.1 VGG的核心特点1.2 VGG的典型结构1.3 优点与局限性1.4 本文的实现目标二、搭建VGG网络2.1 数据准备2.2 定义VGG块2.3 构建VGG网络2.4 辅助工具2.4.1 计时器和累加器2.4.2 准确率计算2.4.3 可视化工具2.5 训练模型2.6 运行实验总结前言 深度学习…

Windows 安装多用户和其它一些问题 VMware Onedrive打不开

以下以win10家庭版为例,win11、专业版类似。 Onedrive相关问题参看我的其他文章: Windows如何同时登录两个OneDrive个人版账号_onedrive登录两个账号-CSDN博客 win10 win11 设置文件权限以解决Onedrive不能同步问题_onedrive没有同步权限-CSDN博客 O…

java基础自用笔记:异常、泛型、集合框架(List、Set、Map)、Stream流

异常 异常体系 编译时异常代表程序觉得你可能会出错。 运行时异常代表已经出错 异常基本处理 异常的作用 可以在可能出现的异常的地方用返回异常来代替return,这样提醒程序出现异常简洁清晰 自定义异常 最好用运行时异常,不会像编译时异常那样烦人&a…

第六届 蓝桥杯 嵌入式 省赛

参考 第六届蓝桥杯嵌入式省赛程序设计题解析(基于HAL库)_蓝桥杯嵌入式第六届真题-CSDN博客 一、分析功能 RTC 定时 1)时间初始化 2)定时上报电压时间 ADC测量 采集电位器的输出电压信号。 串行功能 1)传送要设置…

爱普生FC-135晶振5G手机的极端温度性能守护者

在5G时代,智能手机不仅需要高速率与低延迟,更需在严寒、酷暑、振动等复杂环境中保持稳定运行。作为 5G 手机的核心时钟源,爱普生32.768kHz晶振FC-135凭借其宽温适应性、高精度稳定性与微型化设计,成为5G手机核心时钟源的理想选择&…

如何备份你的 Postman 所有 Collection?

团队合作需要、备份,还是迁移到其他平台,我们都需要在 Postman 中将这些珍贵的集合数据导出。 如何从 Postman 中导出所有集合(Collection)教程

MinGW下编译ffmpeg源码时生成compile_commands.json

在前面的博文MinGW下编译nginx源码中,有介绍到使用compiledb工具在MinGW环境中生成compile_commands.json,以为compiledb是捕获的make时的输出,而nginx生成时控制台是有输出编译时的命令行信息的,笔者之前编译过ffmpeg的源码&…

【数据结构】树与森林

目录 树的存储方法 双亲表示法 孩子表示法 孩子兄弟表示法 树、森林与二叉树的转换 树转换成二叉树 森林转换成二叉树 二叉树转换成森林 树与森林的遍历 树的遍历 森林的遍历 树的存储方法 双亲表示法 这种存储结构采用一组连续空间来存储每个结点,同时…

跟着StatQuest学知识08-RNN与LSTM

一、RNN (一)简介 整个过程权重和偏置共享。 (二)梯度爆炸问题 在这个例子中w2大于1,会出现梯度爆炸问题。 当我们循环的次数越来越多的时候,这个巨大的数字会进入某些梯度,步长就会大幅增加&…

【SpringCloud】Eureka的使用

3. Eureka 3.1 Eureka 介绍 Eureka主要分为两个部分: EurekaServer: 作为注册中心Server端,向微服务应用程序提供服务注册,发现,健康检查等能力。 EurekaClient: 服务提供者,服务启动时,会向 EurekaS…

初识MySQL · 数据类型

目录 前言: 数值类型 文本、二进制数据类型 时间类型 String类型 前言: 对于MySQL来说,是一门编程语言,可能定义不是那么的严格,但是对于MySQL来说也是拥有自己的数据类型的,比如tinyint,…

QT图片轮播器(QT实操学习2)

1.项目架构 1.UI界面 2.widget.h​ #ifndef WIDGET_H #define WIDGET_H#include <QWidget>#define TIMEOUT 1 * 1000 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent n…

深度解析衡石科技HENGSHI SENSE嵌入式分析能力:如何实现3天快速集成

嵌入式分析成为现代SaaS的核心竞争力 在当今SaaS市场竞争中&#xff0c;数据分析能力已成为产品差异化的关键因素。根据Bessemer Venture Partners的最新调研&#xff0c;拥有深度嵌入式分析功能的SaaS产品&#xff0c;其客户留存率比行业平均水平高出23%&#xff0c;ARR增长速…

杂草YOLO系列数据集4000张

一份开源数据集——杂草YOLO数据集&#xff0c;该数据集适用于农业智能化、植物识别等计算机视觉应用场景。 数据集详情 ​训练集&#xff1a;3,664张高清标注图像​测试集&#xff1a;180张多样性场景样本​验证集&#xff1a;359张严格筛选数据 下载链接 杂草YOLO数据集分…

Vue 2 探秘:visible 和 append-to-body 是谁的小秘密?

&#x1f680; Vue 2 探秘&#xff1a;visible 和 append-to-body 是谁的小秘密&#xff1f;&#x1f914; 父组件&#xff1a;identify-list.vue子组件&#xff1a;fake-clue-list.vue 嘿&#xff0c;各位前端探险家&#xff01;&#x1f44b; 今天我们要在 Vue 2 的代码丛林…

机器学习的一百个概念(1)单位归一化

前言 本文隶属于专栏《机器学习的一百个概念》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见[《机器学习的一百个概念》 ima 知识库 知识库广场搜索&…

SpringCould微服务架构之Docker(5)

Docker的基本操作&#xff1a; 镜像相关命令&#xff1a; 1.镜像名称一般分两部分组成&#xff1a;[repository]:[tag]。 2. 在没有指定tag时&#xff0c;默认是latest&#xff0c;代表着最新版本的镜像。 镜像命令的案例&#xff1a; 镜像操作常用的命令&#xff1a; dock…