你知道的和你不知道的DOM操作技巧

你知道的和你不知道的DOM操作技巧

亲爱的前端小伙伴们,今天我们来聊聊那些你可能知道或者不知道的DOM操作技巧。作为一名前端开发者,如果你还在为DOM操作头疼,那么这篇文章绝对能让你茅塞顿开。让我们一起来探索一下DOM的奥秘吧!

1. 选择元素的新姿势

还在用document.getElementById()document.getElementsByClassName()吗?那你就太out了!现代浏览器早就支持querySelectorquerySelectorAll这两个强大的方法了。

// 老派写法
const oldSchool = document.getElementById('myElement');

// 新潮写法
const newCool = document.querySelector('#myElement');

// 选择多个元素
const elements = document.querySelectorAll('.myClass');

这两个方法不仅语法简洁,而且支持复杂的CSS选择器。你甚至可以这样玩:

// 选择所有带有data-awesome属性的div元素中的第一个p元素
const awesomeP = document.querySelector('div[data-awesome] p:first-child');

2. 创建元素的小技巧

创建元素时,不要只盯着document.createElement()看。来看看这个黑魔法:

const div = document.createElement('div');
div.innerHTML = '<p>Hello</p><span>World</span>';

// 等效于
const template = document.createElement('template');
template.innerHTML = '<div><p>Hello</p><span>World</span></div>';
const div = template.content.firstElementChild;

使用template元素可以一次性创建复杂的DOM结构,而且性能更好。这简直是懒人福音啊!

3. 事件委托,你真的会用吗?

事件委托是一种常见的优化技巧,但很多人可能只是知道个皮毛。让我们来深入探讨一下:

document.getElementById('parent').addEventListener('click', function(e) {
    if (e.target.matches('.child')) {
        console.log('Child clicked!');
    }
});

这段代码看起来没问题,但如果.child元素内部还有其他元素呢?e.target可能就不是.child了。来看看改进版:

document.getElementById('parent').addEventListener('click', function(e) {
    const child = e.target.closest('.child');
    if (child && this.contains(child)) {
        console.log('Child or its descendant clicked!');
    }
});

使用closest()方法可以找到最近的匹配元素,contains()则确保找到的元素确实在监听器所在的元素内部。这样就万无一失了!

4. DOM操作的性能优化

DOM操作是昂贵的,特别是当你需要频繁更新DOM时。这里有几个小技巧可以帮你提升性能:

4.1 使用文档片段

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const el = document.createElement('div');
    el.textContent = `Item ${i}`;
    fragment.appendChild(el);
}
document.body.appendChild(fragment);

使用DocumentFragment可以在内存中操作DOM,最后一次性添加到文档中,大大减少了页面重绘的次数。

4.2 批量更新样式

// 糟糕的写法
const el = document.getElementById('myElement');
el.style.width = '100px';
el.style.height = '100px';
el.style.backgroundColor = 'red';

// 优秀的写法
const el = document.getElementById('myElement');
el.classList.add('my-class');

// CSS
.my-class {
    width: 100px;
    height: 100px;
    background-color: red;
}

通过添加类名一次性应用多个样式,可以减少浏览器的重排和重绘。

5. 你不知道的DOM API

现代浏览器提供了许多强大但鲜为人知的DOM API,让我们来看几个有趣的:

5.1 IntersectionObserver

想知道元素是否进入视口吗?不需要再监听滚动事件了,IntersectionObserver来帮你:

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('Element is visible!');
        }
    });
});

observer.observe(document.querySelector('#myElement'));

这个API不仅可以用来实现懒加载,还能做出各种炫酷的滚动效果。

5.2 MutationObserver

想监听DOM变化吗?MutationObserver就是为此而生的:

const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        console.log('DOM changed!');
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

这个API可以帮你监控DOM的变化,对于需要响应DOM动态变化的场景非常有用。

5.3 ResizeObserver

元素大小变化也能监听?没错,ResizeObserver就是干这个的:

const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
        console.log('Element size changed!');
    });
});

observer.observe(document.querySelector('#myElement'));

再也不用担心元素大小变化带来的布局问题了!

总结

DOM操作虽然看似简单,但要真正玩转它还是需要不少技巧的。从选择元素到创建元素,从事件处理到性能优化,再到一些新奇的API,每一个方面都值得我们深入研究。

记住,DOM操作就像是魔法,用得好可以让你的网页如丝般顺滑,用得不好可能就会变成一团浆糊。所以,善用这些技巧,让你的DOM操作既优雅又高效吧!

最后,如果你觉得自己已经掌握了这些技巧,那么恭喜你,你已经从DOM操作的"小白"晋升为"小灰"了。但是,技术的世界永无止境,保持学习的热情,也许明天你就能成为DOM操作的"大师"呢!

好了,今天的DOM操作技巧分享就到这里。如果你有什么独特的DOM操作技巧,不妨在评论区分享一下。我们下期再见,拜拜!

海码面试 小程序

包含最新面试经验分享,面试真题解析,全栈2000+题目库,前后端面试技术手册详解;无论您是校招还是社招面试还是想提升编程能力,都能从容面对~

分享就到这里。如果你有什么独特的DOM操作技巧,不妨在评论区分享一下。我们下期再见,拜拜!

海码面试 小程序

包含最新面试经验分享,面试真题解析,全栈2000+题目库,前后端面试技术手册详解;无论您是校招还是社招面试还是想提升编程能力,都能从容面对~

[外链图片转存中…(img-3lF3vlXy-1720602643960)]

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源合规】开源许可证风险场景详细解读

文章目录 前言关于BlackDuck许可证风险对比图弱互惠型许可证举个例子具体示例LGPL系列LGPL-2.0-onlyLGPL-2.0-or-laterLGPL-2.1-onlyLGPL-2.1-or-laterLGPL-3.0-onlyLGPL-3.0-or-laterMPL系列MPL-1.0MPL-1.1MPL-2.0EPL系列EPL-1.0EPL-2.0互惠型许可证GPL系列GPL-1.0GPL-2.0GPL-…

Mac系统清理工具:您的数字生活杂务处理师

有没有觉得您的Mac有时候像是需要一个好的春季大扫除一样&#xff1f;随着我们不断使用电脑&#xff0c;各种不需要的文件、老旧的数据和忘记的安装包就像家里的灰尘一样慢慢积累。幸运的是&#xff0c;有了一些出色的Mac系统清理工具&#xff0c;我们可以轻松将这些数字灰尘拂…

Java中实现二维数组(矩阵)的转置

在矩阵运算中&#xff0c;矩阵的转置是一个基本操作&#xff0c;即将矩阵的行变成列&#xff0c;列变成行。在Java中&#xff0c;我们可以通过编写一个方法来实现二维数组的转置。下面&#xff0c;我将详细介绍如何在Java中完成这一任务&#xff0c;并提供完整的代码示例。 编…

【Linux】命令执行的判断依据:;,,||

在某些情况下&#xff0c;很多命令我想要一次输入去执行&#xff0c;而不想要分次执行时&#xff0c;该如何是好&#xff1f; 基本上有两个选择&#xff0c; 一个是通过shell脚本脚本去执行&#xff0c;一种则是通过下面的介绍来一次入多个命令。 1.cmd&#xff1a;cmd&#…

AR增强现实汽车装配仿真培训系统开发降低投入费用

随着互联网的无处不在&#xff0c;AR增强现实技术正逐步融入我们生活的每一个角落。深圳华锐视点作为一家引领行业潮流的AR内容开发的技术型公司&#xff0c;正以其卓越的技术实力和专业的服务团队&#xff0c;推动着国内AR技术向更加成熟和多元化的方向迈进。 深圳华锐视点提供…

成都晨持绪:抖音电商带货需要交钱吗

在抖音这个充满创意与可能的平台上&#xff0c;电商带货成为了一种新兴而又时尚的职业。然而&#xff0c;伴随着无数的点击与转发&#xff0c;有一个问题始终萦绕在人们心头——抖音电商带货需要交钱吗? 如画卷展开&#xff0c;抖音平台以其独特的算法和庞大的用户基础构建了一…

GDidees CMS v3.9.1 本地文件泄露漏洞(CVE-2023-27179)

前言 CVE-2023-27179 是一个影响 GDidees CMS v3.9.1 及更低版本的任意文件下载漏洞。这个漏洞存在于 /_admin/imgdownload.php 文件中&#xff0c;攻击者可以通过向 filename 参数传递恶意输入来下载服务器上的任意文件。 漏洞的根源在于对用户输入的 filename 参数处理不当…

前后端如何实现非对称加解密-使用RSA为例讲解!

写在最前面&#xff0c;RSA是一种非对称加密算法&#xff0c;使用不同的公钥和私钥进行加密和解密。 下面是使用RSA进行加密和解密的代码示例&#xff1a; 前端&#xff1a;使用CryptoJS进行RSA加密 在前端JavaScript中&#xff0c;使用jsencrypt库来进行RSA加密&#xff1a…

网络安全----防御----防火墙安全策略组网

防火墙组网 要求&#xff1a; 1&#xff0c;DMz区内的服务器&#xff0c;办公区仅能在办公时间内(9:00-18:00)可以访问&#xff0c;生产区的设备全天可以访问。 2&#xff0c;生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 3&#xff0c;办公区设备10.0.…

【AI前沿】深度学习:技术、发展与前沿应用

文章目录 一、深度学习的背景与发展1.1 背景1.2 早期发展1.3 突破性进展1.4 近年发展 二、深度学习的基本概念2.1 神经网络2.2 多层感知器&#xff08;MLP&#xff09;2.3 卷积神经网络&#xff08;CNN&#xff09;2.4 循环神经网络&#xff08;RNN&#xff09;2.5 生成对抗网络…

【C++修行之道】string类练习题

目录 387. 字符串中的第一个唯一字符 125. 验证回文串 917. 仅仅反转字母 415. 字符串相加&#xff08;重点&#xff09; 541. 反转字符串 II 387. 字符串中的第一个唯一字符 字符串中的第一个唯一字符 - 力扣&#xff08;LeetCode&#xff09; 给定一个字符串 s &#…

【Windows】实现窗口子类化(基于远程线程注入)

目录 前言 原理解释 完整项目 相关文献 文章出处链接&#xff1a;[https://blog.csdn.net/qq_59075481/article/details/140334106] 前言 众所周知&#xff0c;DLL 注入有多种用途&#xff0c;如热修补、日志记录、子类化等。本文重点介绍使用 DLL 注入对窗口进行子类化。…

路径规划之基于二次规划的路径平滑Matlab代码

参考&#xff1a; 自动驾驶决策规划算法第二章第二节(上) 参考线模块_哔哩哔哩_bilibili 自动驾驶决策规划算法第二章第二节(下) 参考线代码实践_哔哩哔哩_bilibili QP函数&#xff0c;二次规划的逻辑 function [smooth_path_x,smooth_path_y] QP(path_x, path_y, w_cost_s…

Java方法入门(006)

♦️方法的概念 什么是方法&#xff1f; 方法是将一组完成特定功能的代码整合在一起&#xff0c;以达到简化开发&#xff0c;减少代码耦合&#xff0c;提高代码复用性的结构&#xff0c;类似与C语言中的函数。方法是程序中最小的执行单元&#xff0c;可降低代码的重复性。 如用…

Python 100道基础入门练习题!附解析

看书&#xff0c;看视频都可以帮助你学习代码&#xff0c;但都只是辅助作用&#xff0c;学好 Python&#xff0c;最重要的还是 多敲代码&#xff0c;多刷题。 不知道怎么找题刷题的小伙伴&#xff0c;可以看看这里今天带来了100道练习题。覆盖了基本语法&#xff0c;数据结构&…

【Docker-compose】搭建php 环境

文章目录 Docker-compose容器编排1. 是什么2. 能干嘛3. 去哪下4. Compose 核心概念5. 实战 &#xff1a;linux 配置dns 服务器&#xff0c;搭建lemp环境&#xff08;Nginx MySQL (MariaDB) PHP &#xff09;要求6. 配置dns解析配置 lemp Docker-compose容器编排 1. 是什么 …

从零开学C++:类和对象(上)

引言&#xff1a;在学习了C的入门级知识之后&#xff0c;现在就让我们一起进入类和对象的学习吧&#xff0c;该知识点我将分为上&#xff0c;中&#xff0c;下三个部分对其进行讲解。 更多有关C语言和数据结构的知识详解可前往个人主页&#xff1a;计信猫 目录 一&#xff0c;类…

MySql性能调优01-[数据结构和索引]

数据结构和索引 什么是索引索引的种类常见索引数据结构和区别二叉树 红黑树 什么是索引 索引的种类 在Mysql中索引是在存储引擎层实现的&#xff0c;而不是在服务层实现的 按数据结构分&#xff1a;Btree索引、Hash索引、Full-text索引按存储结构分&#xff1a;聚簇索引、非聚…

51单片机:电脑通过串口控制LED亮灭(附溢出率和波特率详解)

一、功能实现 1.电脑通过串口发送数据&#xff1a;0F 2.点亮4个LED 二、注意事项 1.发送和接受数据的文本模式 2.串口要对应 3.注意串口的波特率要和程序中的波特率保持一致 4.有无校验位和停止位 三、如何使用串口波特率计算器 1.以本程序为例 2.生成代码如下 void Uar…

d3dcompiler_43.dll文件是什么?如何快速有效的解决d3dcompiler_43.dll文件丢失问题

dcompiler_43.dll 是一个Windows系统中的系统文件&#xff0c;属于DirectX软件的一部分。这个dcompiler_43.dll&#xff08;动态链接库&#xff09;文件主要用于处理与3D图形编程有关的任务&#xff0c;是运行许多游戏和高级图形程序必需的组件之一。那么如果电脑丢失d3dcompil…