分享10个前端开发者需要掌握的DOM技巧

news2024/11/6 3:08:17

5229b577b4adc50dab9c038a54201906.jpeg

Web开发不断发展,掌握最新的趋势和最佳实践对每位开发者来说都至关重要。Web开发的最重要方面之一就是使用文档对象模型(DOM)。在本文中,我们将探讨10个必须掌握的DOM技巧和技巧,配有代码示例,这将帮助您成为更高效、更有效的开发者。

1、掌握DOM操作的基础知识

在深入学习高级DOM技巧之前,了解基础知识是至关重要的。熟悉核心DOM概念,如选择元素、修改属性和遍历DOM树。这将使您更容易理解和实现更高级的技术。

// 通过ID选择元素
const element = document.getElementById('myElement');

// 修改属性
element.setAttribute('data-custom', 'value');

// 修改样式属性以将颜色设置为红色
element.style.color = 'red';

// 遍历DOM树
const parent = element.parentNode;
const children = element.childNodes;

2、使用querySelector和querySelectorAll方法

querySelector和querySelectorAll方法是选择DOM元素的强大工具。它们允许您使用CSS选择器来定位元素,从而更轻松地查找和操作HTML文档中的特定元素。

// 选择单个元素
const element = document.querySelector('.myClass');

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

3、利用事件委托

事件委托是一种技术,它允许您通过将单个事件监听器附加到父元素来更有效地处理事件。这减少了所需的事件监听器数量,并提高了性能,特别是在有许多元素的大型应用程序中。

document.addEventListener(‘click’, function(event) {
 if (event.target.matches(‘.myClass’)) {
 console.log(‘Element clicked:’, event.target);
 }
});

4、利用classList API

classList API提供了一种方便的方法来在DOM元素上添加、删除和切换CSS类。这使得更容易地操作元素的外观和行为,而无需依赖内联样式或繁琐的字符串操作。

// 选择一个元素
const element = document.querySelector('.myClass');

// 添加一个类
element.classList.add('newClass');

// 删除一个类
element.classList.remove('myClass');

// 切换一个类
element.classList.toggle('active');

5、使用createElement和appendChild方法创建动态内容

在创建动态内容时,使用createElement和appendChild方法生成新的DOM元素并将它们添加到DOM树中。这种方法比使用innerHTML或其他基于字符串的方法更高效且更易于维护。

const newElement = document.createElement(‘div’);
newElement.textContent = ‘Hello, world!’;
document.body.appendChild(newElement);

6、优化DOM访问和操作

访问和操作DOM可能会很慢,特别是在大型应用程序中。为了提高性能,请通过将元素缓存到变量中最小化DOM访问,并使用文档片段或requestAnimationFrame API批量更新。

const elements = document.querySelectorAll('.myClass');
const fragment = document.createDocumentFragment();
elements.forEach(element => {
 const newElement = document.createElement('span');
 newElement.textContent = 'Updated';
 fragment.appendChild(newElement);
});
document.body.appendChild(fragment);

7、理解节点和元素之间的区别

在DOM中,节点是表示文档树的一部分的通用对象,而元素是表示HTML标签的特定类型的节点。理解这两个概念之间的区别对于有效地使用DOM至关重要。

const element = document.querySelector('.myClass');
const node = element.firstChild;
console.log('Element:', element);
console.log('Node:', node);

8、使用自定义数据属性

自定义数据属性允许您在DOM元素上存储额外的信息,而不会影响它们的表现或行为。这对于存储状态、配置或其他需要在JavaScript代码中访问的元数据非常有用。

<div data-custom="value">My element</div>
const element = document.querySelector('[data-custom]');
const customValue = element.getAttribute('data-custom');
console.log('Custom value:', customValue);

9、了解Shadow DOM

Shadow DOM是一种强大的功能,允许您在元素内部创建封装的DOM树。这对于创建具有隔离样式和行为的可重用组件非常有用,使您的代码更加模块化和易于维护。

class MyComponent extends HTMLElement {
 constructor() {
 super();
 const shadowRoot = this.attachShadow({ mode: ‘open’ });
 shadowRoot.innerHTML = `
 <style>
 span { color: red; }
 </style>
 <span>Hello, world!</span>
 `;
 }
}
customElements.define('my-component', MyComponent);

这段代码是一个使用Shadow DOM创建自定义Web组件的示例。这个组件的名称是my-component,它继承自HTMLElement类。

在MyComponent的构造函数中,调用了父类HTMLElement的构造函数,并在其中通过attachShadow()方法创建了一个Shadow DOM。attachShadow()方法接受一个配置对象,{ mode: 'open' }指定了Shadow DOM的模式为“open”,表示可以从外部访问Shadow DOM。

接下来,使用模板字符串在Shadow DOM中定义了样式和内容。在样式中,指定了span元素的文本颜色为红色。在内容中,创建了一个span元素并显示文本“Hello, world!”。

最后,通过customElements.define()方法定义了这个自定义组件的名称和类。在这个例子中,名称为my-component,类为MyComponent。

您可以在HTML文档中使用<my-component>标签来调用这个自定义组件。例如:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Component Demo</title>
</head>
<body>
  <my-component></my-component>
  <script src="my-component.js"></script>
</body>
</html>

在上面的示例中,通过<my-component>标签调用了自定义组件,它将显示“Hello, world!”文本。需要注意的是,在使用自定义组件之前,需要先将定义组件的JavaScript文件(如上例中的my-component.js)引入到HTML文档中。

10、熟悉<template>标签

<template>标签是HTML5的一个强大功能,它允许您定义可重用的HTML标记块。在处理动态内容或创建自定义组件时,这尤其有用。通过使用<template>标签,您可以为内容定义模板,然后根据需要克隆并插入到DOM中。这种方法比使用基于字符串的方法生成HTML更高效和可维护。

<template id=”myTemplate”>
 <div class="myClass">Hello, world!</div>
</template>
const template = document.getElementById('myTemplate');
const content = template.content.cloneNode(true);
document.body.appendChild(content);

结束

掌握DOM是每个Web开发人员都必须具备的关键技能。通过遵循这10个技巧和技巧,配有代码示例,您将成为更高效、更有效和更有知识的开发者。保持好奇心,持续学习,并不要忘记与Web开发社区中的其他人分享您的知识。祝您编码愉快!

在文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注「前端达人」,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。

原文:
https://medium.com/dev-genius/title-10-must-know-dom-tips-and-tricks-for-every-developer-in-2023-ae2d0c09acbb

作者:Erik Newland

非直接翻译,有自行改编和添加部分,翻译水平有限,难免有疏漏,欢迎指正

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

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

相关文章

camunda工作流user task节点用途

Camunda中的User Task用于在流程中定义人工任务&#xff0c;需要一个人来执行该任务并提供相关信息。通常&#xff0c;User Task在业务流程中用于需要人类干预的步骤&#xff0c;例如审核、审批、调查等。 User Task具有以下特性&#xff1a; 1、指派任务给具体的用户或用户组…

leetcode547. 省份数量

有 n 个城市&#xff0c;其中一些彼此相连&#xff0c;另一些没有相连。如果城市 a 与城市 b 直接相连&#xff0c;且城市 b 与城市 c 直接相连&#xff0c;那么城市 a 与城市 c 间接相连。 省份 是一组直接或间接相连的城市&#xff0c;组内不含其他没有相连的城市。 给你一…

讨论度超20亿,肯德基疯狂星期四是如何出圈的?

每到周四&#xff0c;网上就会出现一股“神秘力量”——今天是星期四&#xff0c;V我50&#xff0c;请我吃肯德基。 肯德基疯狂星期四能有多火&#xff1f; 目前&#xff0c;#肯德基疯狂星期四#话题阅读量超23亿次&#xff0c;参与讨论次数超600万&#xff0c;而带话题原创人数…

不得不说的结构型模式-桥接模式

桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它可以将抽象部分与实现部分分离&#xff0c;使得它们可以独立地变化。桥接模式的核心思想是将一个系统分成两个独立的部分&#xff0c;抽象部分和实现部分&#xff0c;并且让它们可以互相独立…

sublime text的snippet介绍,提高编程效率

自定义Snippet Sublime Text 的 Snippet 是一种快捷方式&#xff0c;它允许您使用自定义模板或代码片段更快地编写代码。以下是创建 Snippet 的步骤&#xff1a; 打开 Sublime Text 编辑器并创建一个新文件。菜单栏选择 “Tools” -> “Developer” -> “New Snippet”…

python里面单双下划线的区别

区别&#xff1a; xx:公有变量&#xff0c;所有对象都可以访问&#xff1b; xxx:双下划线代表着是系统定义的名字。 __xxx&#xff1a;双前置下划线&#xff0c;避免与子类中的属性命名冲突&#xff0c;无法在外部直接访问。代表着类中的私有变量名。 _xxx&#xff1a;单前置…

【Maven 入门】第一章、Maven概述

一、什么是Maven&#xff1f; Maven是一款基于Java平台的强大构建工具&#xff0c;可用于管理和构建项目。它提供了一种易于使用的建立项目的方法&#xff0c;使开发者可以更快速、更高效地构建软件。 Maven的功能包括依赖管理、构建、发布、文档生成、测试在内的整个项目生命…

nodejs项目的轻量级数据持久化方案,node-json-db,直接使用json文件保存,查询数据。

前言 作为一名前端开发&#xff0c;我们做网站时&#xff0c;难免会遇到需要保存数据的场景&#xff0c;比如做一个小官网&#xff0c;没有注册&#xff0c;没有登陆&#xff0c;只有一个给我们提建议&#xff0c;如下面的&#xff0c; 网站上只有一处需要填写数据。 场景 …

RK3399平台开发系列讲解(PCI/PCI-E)PCIE相关配置说明

🚀返回专栏总目录 文章目录 一、DTS 配置二、menuconfig 配置三、cmdline 配置沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 本篇将介绍在使用 RK3399 平台 PCIE 时候的配置。 一、DTS 配置 ep-gpios = <&gpio3 13 GPIO_ACTIVE_HIGH>; 此项是设置 PCIe…

3自由度并联绘图机器人实现写字功能

1. 功能说明 本文示例将实现R305样机3自由度并联绘图机器人写字的功能。 2. 电子硬件 在这个示例中&#xff0c;采用了以下硬件&#xff0c;请大家参考&#xff1a; 主控板 Basra主控板&#xff08;兼容Arduino Uno&#xff09; 扩展板Bigfish2.1扩展板电池7.4V锂电池 3. 功能…

Jenkins集成SonarQube实现代码质量检查

文章目录 一、前提配置1.1 安装及配置SonarQube Scanner插件1.2 配置SonarQube servers 二、非流水线集成SonarQube1.1 配置非流水线任务 三、流水线集成SonarQube 一、前提配置 1.1 安装及配置SonarQube Scanner插件 (1) 点击【系统管理】>【插件管理】>【可选插件】搜…

Netty核心模块、核心组件理解

文章目录 一、入门案例二、Bootstrap、ServerBootstrap三、Future 、ChannelFuture四、Channel五、Selector六、ChannelHandler 及其实现类七、Pipeline 和 ChannelPipeline八、ChannelHandlerContext九、ChannelOption十、EventLoopGroup 和其实现类十一、Unpooled类与ByteBuf…

Vue3技术5之watchEffect函数、Vue3生命周期、自定义hook函数

Vue3技术5 watchEffect函数Demo.vue总结 Vue3生命周期Vue3生命周期测试App.vueDemo.vue 组合式API使用生命周期钩子Demo.vue 总结&#xff1a; 自定义hook函数获取鼠标的x,yDemo.vue 使用hook方式文件目录hooks/usePoint.jsApp.vueDemo.vueTest.vue watchEffect函数 Demo.vue …

MicroPython ESP8266 GPIO引脚使用详解

MicroPython ESP8266 GPIO引脚使用 &#x1f4cc;相关篇《【MicroPython esp8266】固件烧写教程》 ✨本案例基于Thonny平台开发。✨ &#x1f4dc;固件版本信息&#xff1a;MicroPython v1.19.1 on 2022-06-18; ESP module with ESP8266 &#x1f516;ESP8266可用管脚有&…

计算机组成原理——第六章总线(上)

误逐世间乐&#xff0c;颇穷理乱情 文章目录 前言6.1.1 总线概述6.1.2 总线的性能指标6.2 总线仲裁(408不考) 前言 本章在概述部分我们会首先介绍一下总线的基本概念&#xff0c;介绍一下总线的分类以及经典结构&#xff0c;介绍一些性能指标来评价总线的性能如何&#xff0c;…

电子招标采购系统源码—企业战略布局下的采购

​ 智慧寻源 多策略、多场景寻源&#xff0c;多种看板让寻源过程全程可监控&#xff0c;根据不同采购场景&#xff0c;采取不同寻源策略&#xff0c; 实现采购寻源线上化管控&#xff1b;同时支持公域和私域寻源。 询价比价 全程线上询比价&#xff0c;信息公开透明&#xff0…

通过单线程/线程池/分治算法三种方式实现1亿个数字的累加

一、任务类型 我们在做项目的时候&#xff0c;都需要考虑当前的项目或者某一个功能主要的核心是什么&#xff1f;是CPU密集计算型&#xff0c;还是IO密集型任务。我们调整线程池中的线程数量的最主要的目的是为了充分并合理地使用 CPU 和内存等资源&#xff0c;从而最大限度地…

AIGC潮水中,重新理解低代码

如果将一句话生成应用形容成L4级的“无人驾驶”&#xff0c;伙伴云的「AI搭建」则更像L2级的“辅助驾驶”。 作者|斗斗 出品|产业家 2023年&#xff0c;AIGC下的低代码赛道“暗流涌动”。 “对于「AI搭建」的搭建效果&#xff0c;尤其是在场景覆盖的广度上&#xff0c;连…

正式开赛|2023年“桂林银行杯”数据建模大赛暨全国大学生数学建模竞赛广西赛区热身赛

为学习贯彻党的二十大工作报告中关于加快发展数字经济、促进数字经济和实体经济深度融合的重要指示&#xff0c;不断推进数字化转型与金融科技创新&#xff0c;桂林银行联合全国大学生数学建模竞赛广西赛区组委会、广西应用数学中心&#xff08;广西大学&#xff09;共同主办20…

如何选择CDN厂商

如果您的在线业务面临着流量和访客数量的增加&#xff0c;如果您想提高网站速度和用户体验&#xff0c;选择合适的CDN提供商是朝着正确方向迈出的一步&#xff0c;那么如何来选择最合适的CDN厂商呢&#xff0c;火伞云小编今天为您解答&#xff1a; 一、测试潜在的CDN提供商 对…