返回

回忆中那些 DOM 操作

前端

JavaScript 的 DOM 操作：怀旧之旅

在 Web 开发的早期，JavaScript（JS）的 DOM（文档对象模型）操作是前端开发的基石。通过 DOM 操作，开发人员可以动态地与 HTML 文档进行交互，操纵元素、修改样式和监听事件。然而，随着 Vue 和 React 等技术栈的崛起和完善，很多时候前端已经不再编写纯原生 JS 和大量的 DOM 操作，那些原滋原味的 DOM 操作也淡入我们的视野之中。

DOM 操作的基本技术

DOM 操作涉及到一系列技术，其中最基本的包括：

  • 元素获取： 使用 document.getElementById() 和 document.querySelector() 等方法获取 HTML 元素。
  • 属性操作： 使用 .setAttribute() 和 .getAttribute() 等方法获取和设置元素的属性。
  • 样式修改： 使用 .style 属性修改元素的 CSS 样式。
  • 事件监听： 使用 addEventListener() 方法监听元素上的事件，例如点击、悬停或滚动。

这些基本技术可以组合起来创建交互式和动态的 Web 应用程序。

现代前端开发中的 DOM 操作

随着 Vue 和 React 等框架的普及，DOM 操作在现代前端开发中不再那么常见。这些框架提供了更抽象和高层次的 API，简化了与 DOM 的交互。然而，DOM 操作仍然是一种有用的技能，特别是在需要在低级别操纵 DOM 的情况下。

在现代前端开发中，DOM 操作的一些常见用例包括：

  • 集成第三方库： 许多第三方库需要直接与 DOM 进行交互。
  • 自定义组件： 在 Vue 和 React 等框架中，自定义组件通常需要 DOM 操作来创建和操作 UI 元素。
  • 性能优化： 在某些情况下，使用原生 DOM 操作可以优化应用程序的性能。

结论

虽然 JavaScript 的 DOM 操作技术不再像过去那样普遍，但它们仍然是前端开发人员的基本技能。通过理解 DOM 操作的基本技术，开发人员可以创建交互式和动态的 Web 应用程序，即使在使用现代框架的情况下。然而，重要的是要认识到，随着技术的发展，DOM 操作的使用方式也在不断演变。

示例代码

下面是一个使用 JavaScript DOM 操作的简单示例：

// 获取元素
const button = document.getElementById("my-button");

// 添加点击事件监听器
button.addEventListener("click", () => {
  // 修改元素的样式
  button.style.color = "red";
});

这段代码获取一个带有 ID 为 "my-button" 的按钮，然后添加一个点击事件监听器。当按钮被点击时，其文本颜色将变为红色。