ES2021：使用最佳实践进行 DOM 操作-JavaScript中文网-JavaScript教程资源分享门户

介绍

在 Web 开发中，操作文档对象模型（Document Object Model，简称 DOM）是经常遇到的任务之一，包括选择元素、改变元素属性或内容、添加或移除元素等。在过去的几年中，JavaScript 发展迅速，但许多旧的 DOM 操作习惯仍然存在，而新的最佳实践不断涌现。ES2021（即 ECMAScript 2021）为 DOM 操作提供了许多方便且更具可读性的语法和函数，本文将探讨其中一些最佳实践和示例代码。

选择元素

在操作 DOM 之前，我们通常需要选择需要操作的元素。选择元素的方法主要有 document.querySelector()、document.querySelectorAll()、Element.querySelector() 和 Element.querySelectorAll() 四种。它们都接受一个字符串选择器参数，返回一个 DOM 元素或元素列表。

例如，我们要选择所有 class 为 highlight 的 div 元素，可以使用以下代码：

// 所有元素
const elements1 = document.querySelectorAll('div.highlight');
// 第一个元素
const element2 = document.querySelector('div.highlight');

在 ES2021 中，这些函数都可以使用逻辑操作符进行扩展。例如，我们可以使用 :not()、:first-child、:nth-child() 等伪类选择器，或者通过组合选择器选择多个元素。以下是一些例子：

// 选择所有 class 为 highlight，但不是第一个的 div 元素
const elements1 = document.querySelectorAll('div.highlight:not(:first-child)');
// 选择第一个和最后一个元素
const elements2 = document.querySelectorAll('div:first-child, div:last-child');

这让选择符变得更加灵活，使我们可以更轻松地选择元素。

修改元素内容

在改变元素内容时，我们有多种选择。以下是几种最常用的技术。

innerHTML

使用 innerHTML 修改元素内容是非常常见的，它可以很方便地插入 HTML 代码。例如，我们想要向 div 中添加一张图片和一些文本，可以这样写：

const div = document.querySelector('div');
div.innerHTML = '<img src="example.png">这是一段文本。';

但是，使用 innerHTML 存在安全漏洞，可以将恶意代码注入页面。因此，我们应该避免直接使用 innerHTML，特别是在处理用户的输入时。如果我们必须使用 innerHTML，应该对其输入进行过滤和检查。

textContent/innerText

另一种更安全的方法是使用 textContent 或 innerText，它们可以只显示元素的文本内容。其中，textContent 会保留所有空格和缩进，而 innerText 会删除空格并将换行符转换为空格。（但也正因此，它的性能通常略差于 textContent）

const div = document.querySelector('div');
div.textContent = '这是一段文本。';

createElement()/createTextNode()

如果我们要动态创建新元素，我们可以使用 createElement() 和 createTextNode()。createElement() 用于创建一个新的元素节点，createTextNode() 用于创建一个新的文本节点。接着，我们可以使用 appendChild() 或 insertBefore() 将这些节点插入到具有父元素的元素中。

const div = document.querySelector('div');
const img = document.createElement('img');
const text = document.createTextNode('这是一段文本。');
img.src = 'example.png';

div.appendChild(img);
div.appendChild(text);

replaceChild()

另一个修改元素内容的方法是使用 replaceChild()，它可以将一个节点替换为另一个节点。和 appendChild() 一样，我们可以使用 createElement() 和 createTextNode() 创建要插入的新节点。

const div = document.querySelector('div');
const newText = document.createTextNode('新的文本。');
const oldText = div.firstChild;

div.replaceChild(newText, oldText);

修改元素属性

除了修改元素内容，我们还可以修改其属性，例如设置 src、href、class、style 等。以下是一些最常用的操作。

getAttribute()/setAttribute()

使用 getAttribute() 和 setAttribute() 可以获取或设置特定属性的值。

const img = document.querySelector('img');
const src = img.getAttribute('src');
img.setAttribute('src', 'new.png');

removeAttribute()

可以使用 removeAttribute() 方法移除一个属性。

const img = document.querySelector('img');
img.removeAttribute('src');

classList.add()/classList.remove()

可以使用 classList.add() 和 classList.remove() 来添加或删除一个类。

const div = document.querySelector('div');
div.classList.add('highlight');
div.classList.remove('highlight');

style

可以使用 style 访问和修改元素的 CSS 属性。

const div = document.querySelector('div');
div.style.color = 'red';
div.style.fontSize = '20px';

结论

ES2021 为 DOM 操作提供了许多方便的新语法和函数，包括扩展选择器、替换节点、使用 classList 和 style，这些最佳实践可以帮助我们更快、更安全、更优雅地操作 DOM。在实际开发中，我们可以结合这些技巧，写出更可读、更健壮的代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66f4768af40ec5a964ede2fa