掌握 Vanilla JavaScript 中的 DOM 操作：为什么它仍然很重要

在一个充满 React、Vue 和 Angular 等框架和库的世界中，很容易忽视掌握普通 JavaScript 中 DOM 操作的重要性。但了解文档对象模型 (DOM) 的基础知识以及如何直接使用它仍然非常有价值。在本指南中，我们将探讨 DOM 操作的基础知识、关键方法，以及为什么它值得了解，即使有如此多的框架。

简介：DOM 操作就像重新布置家具

想象你的网页是一个房间，每个元素都是一件家具。 DOM 操作 就像重新排列家具 - 您直接更改布局、移动事物、添加新元素，甚至删除它们。掌握这些更改对于理解网页的构建方式和向用户显示的方式至关重要。

框架可以为您处理这些更改，但了解如何自己操作 DOM 可以让您更好地控制并更深入地了解事物在幕后的工作方式。

DOM 操作的常用方法

getElementById、querySelector 等

JavaScript 提供了多种与 DOM 交互的内置方法。让我们来看看一些最常用的，看看它们是如何工作的。

1.通过Id获取元素

在 DOM 中选择元素的最简单方法是通过其 ID。此方法返回具有指定 ID 的第一个元素。

const element = document.getElementById('myElement');
element.style.color = 'blue'; // Changes the text color to blue
element.textContent = 'Hello, world!'; // Updates the text content

2.querySelector和querySelectorAll

这些方法允许您使用 CSS 选择器选择元素。 querySelector 返回与选择器匹配的第一个元素，而 querySelectorAll 返回所有匹配元素的 NodeList。

const singleElement = document.querySelector('.myClass'); // Selects first element with myClass
singleElement.style.fontSize = '20px'; // Changes font size

const multipleElements = document.querySelectorAll('.myClass'); // Selects all elements with myClass
multipleElements.forEach(element => {
  element.style.backgroundColor = 'lightgray'; // Sets background color for each element
});

3.createElement、appendChild 和 insertBefore

要向页面添加新元素，请使用 createElement 来创建新的 DOM 元素，并使用appendChild 将其添加到现有元素中。您还可以使用 insertBefore 在特定位置添加元素。

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph!';
document.body.appendChild(newElement); // Adds the new paragraph at the end of body

// Inserting an element before another
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Inserted before existing content';
container.insertBefore(newDiv, container.firstChild); // Inserts newDiv before the first child

4.removeChild并删除

要删除元素，如果有父元素的引用，可以使用removeChild，或者直接在元素上使用remove方法。

// Using removeChild
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child); // Removes childElement from parentElement

// Using remove directly
const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove(); // Removes the element directly

5. 修改属性

您还可以使用 setAttribute、getAttribute 和 removeAttribute 等方法操作属性。

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com'); // Sets the href attribute
link.setAttribute('target', '_blank'); // Opens link in a new tab
console.log(link.getAttribute('href')); // Retrieves the href attribute
link.removeAttribute('target'); // Removes the target attribute

6. 直接改变样式

要更改元素的 CSS 样式，您可以使用 style 属性。

const element = document.getElementById('myElement');
element.style.color = 'blue'; // Changes the text color to blue
element.textContent = 'Hello, world!'; // Updates the text content

7. 添加事件监听器

事件监听器通过允许元素响应用户操作来使您的页面具有交互性。

const singleElement = document.querySelector('.myClass'); // Selects first element with myClass
singleElement.style.fontSize = '20px'; // Changes font size

const multipleElements = document.querySelectorAll('.myClass'); // Selects all elements with myClass
multipleElements.forEach(element => {
  element.style.backgroundColor = 'lightgray'; // Sets background color for each element
});

何时使用 DOM 操作

Vanilla DOM 操作大放异彩的实际场景

虽然框架处理大部分繁重的工作，但有时普通 DOM 操作更简单、更高效：

• 小型项目：对于简单的页面或小型项目，使用普通 JavaScript 通常比加载整个框架更快、更轻量。
• 学习和实验：掌握 DOM 操作可以帮助您了解 Web 的工作原理，为您以后学习框架奠定基础。
• 性能优化：直接 DOM 操作有时比框架驱动的更新更快，特别是对于特定的一次性更改。

示例：假设您有一个显示或隐藏某些文本的按钮。对于这样一个简单的任务，原生 JavaScript 效率更高：

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph!';
document.body.appendChild(newElement); // Adds the new paragraph at the end of body

// Inserting an element before another
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Inserted before existing content';
container.insertBefore(newDiv, container.firstChild); // Inserts newDiv before the first child

使用框架，这将需要设置状态和重新渲染逻辑，这对于像这样的小任务来说有点过分了。

替代方案：React、Vue，以及为什么 Vanilla 仍然占有一席之地

框架与普通 JavaScript

React、Vue 和 Angular 等框架通过为您处理更新和状态更改，使 DOM 操作变得更容易。他们使用虚拟 DOM 更有效地管理流程，仅更新需要更改的内容。

但事情是这样的：框架是有开销的。如果您正在构建一个小型项目，那么额外的重量可能不值得。此外，即使您主要使用框架，了解普通 DOM 操作也能让您成为更好的开发人员。了解幕后发生的情况有助于您排除故障、优化并做出明智的决策。

示例：假设您想要向元素添加工具提示。以下是使用普通 JavaScript 的方法：

// Using removeChild
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child); // Removes childElement from parentElement

// Using remove directly
const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove(); // Removes the element directly

使用原生 JavaScript，您可以精确控制工具提示的位置和行为，而无需任何框架依赖。

结论：回到基础以更好地理解

掌握原生 JavaScript 中的 DOM 操作就像在使用精美小工具之前学习烹饪基础知识一样。它为您提供了坚实的基础，使您更加多才多艺，并帮助您了解框架为您所做的事情。虽然框架使 DOM 操作变得更容易，但了解如何直接使用 DOM 对于调试、优化和构建较小的项目非常有价值。

所以，下次当您想要使用框架时，请尝试普通 JavaScript。您可能会惊讶于它的强大和简单。

---

准备好动手操作 DOM 了吗？在您的下一个项目中尝试这些技术，看看仅使用普通 JavaScript 就能取得多少成果！

---

如果您喜欢这篇文章，请考虑支持我的工作：

• 请我喝杯咖啡
• 预约电话寻求指导或职业建议
• 在 Twitter 上关注我
• 在 LinkedIn 上联系

以上是掌握 Vanilla JavaScript 中的 DOM 操作：为什么它仍然很重要的详细内容。更多信息请关注PHP中文网其他相关文章！