介绍
在 Web 开发中，操作文档对象模型（Document Object Model，简称 DOM）是经常遇到的任务之一，包括选择元素、改变元素属性或内容、添加或移除元素等。在过去的几年中，JavaScript 发展迅速，但许多旧的 DOM 操作习惯仍然存在，而新的最佳实践不断涌现。ES2021（即 ECMAScript 2021）为 DOM 操作提供了许多方便且更具可读性的语法和函数，本文将探讨其中一些最佳实践和示例代码。
选择元素
在操作 DOM 之前，我们通常需要选择需要操作的元素。选择元素的方法主要有 document.querySelector()、document.querySelectorAll()、Element.querySelector() 和 Element.querySelectorAll() 四种。它们都接受一个字符串选择器参数，返回一个 DOM 元素或元素列表。
例如，我们要选择所有 class 为 highlight 的 div 元素，可以使用以下代码：
-- ---- ----- --------- - ------------------------------------------- -- ----- ----- -------- - ----------------------------------------
在 ES2021 中，这些函数都可以使用逻辑操作符进行扩展。例如，我们可以使用 :not()、:first-child、:nth-child() 等伪类选择器，或者通过组合选择器选择多个元素。以下是一些例子：
-- ---- ----- - ----------------- --- -- ----- --------- - ------------------------------------------------------------- -- ------------ ----- --------- - ------------------------------------------- -----------------
这让选择符变得更加灵活，使我们可以更轻松地选择元素。
修改元素内容
在改变元素内容时，我们有多种选择。以下是几种最常用的技术。
innerHTML
使用 innerHTML 修改元素内容是非常常见的，它可以很方便地插入 HTML 代码。例如，我们想要向 div 中添加一张图片和一些文本，可以这样写：
----- --- - ------------------------------ ------------- - ----- ---------------------------
但是，使用 innerHTML 存在安全漏洞，可以将恶意代码注入页面。因此，我们应该避免直接使用 innerHTML，特别是在处理用户的输入时。如果我们必须使用 innerHTML，应该对其输入进行过滤和检查。
textContent/innerText
另一种更安全的方法是使用 textContent 或 innerText，它们可以只显示元素的文本内容。其中，textContent 会保留所有空格和缩进，而 innerText 会删除空格并将换行符转换为空格。（但也正因此，它的性能通常略差于 textContent）
----- --- - ------------------------------ --------------- - ----------
createElement()/createTextNode()
如果我们要动态创建新元素，我们可以使用 createElement() 和 createTextNode()。createElement() 用于创建一个新的元素节点，createTextNode() 用于创建一个新的文本节点。接着，我们可以使用 appendChild() 或 insertBefore() 将这些节点插入到具有父元素的元素中。
----- --- - ------------------------------ ----- --- - ------------------------------ ----- ---- - ----------------------------------- ------- - -------------- --------------------- ----------------------
replaceChild()
另一个修改元素内容的方法是使用 replaceChild()，它可以将一个节点替换为另一个节点。和 appendChild() 一样，我们可以使用 createElement() 和 createTextNode() 创建要插入的新节点。
----- --- - ------------------------------ ----- ------- - --------------------------------- ----- ------- - --------------- ------------------------- ---------
修改元素属性
除了修改元素内容，我们还可以修改其属性，例如设置 src、href、class、style 等。以下是一些最常用的操作。
getAttribute()/setAttribute()
使用 getAttribute() 和 setAttribute() 可以获取或设置特定属性的值。
----- --- - ------------------------------ ----- --- - ------------------------ ----------------------- -----------
removeAttribute()
可以使用 removeAttribute() 方法移除一个属性。
----- --- - ------------------------------ ---------------------------
classList.add()/classList.remove()
可以使用 classList.add() 和 classList.remove() 来添加或删除一个类。
----- --- - ------------------------------ ------------------------------- ----------------------------------
style
可以使用 style 访问和修改元素的 CSS 属性。
----- --- - ------------------------------ --------------- - ------ ------------------ - -------
结论
ES2021 为 DOM 操作提供了许多方便的新语法和函数，包括扩展选择器、替换节点、使用 classList 和 style，这些最佳实践可以帮助我们更快、更安全、更优雅地操作 DOM。在实际开发中，我们可以结合这些技巧，写出更可读、更健壮的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f4768af40ec5a964ede2fa