返回

原生 JS 操作 DOM：回归基本，掌控网页元素

前端

在前端开发的世界中，DOM操作一直占据着重要的地位。从前，我们依赖jQuery、Zepto等库来简化DOM操作，而随着Vue、Angular、React等框架的兴起，我们逐渐通过操作数据来控制DOM。然而，原生JavaScript仍是操作DOM的基石，在某些场景下，直接使用原生JS进行DOM操作依然不可或缺。

本文将带领您深入原生JS的DOM操作技巧，从基本概念到实战应用，全方位解析DOM操作的奥秘。无论是前端开发新手还是经验丰富的工程师，都能从中学到有价值的知识和技巧。

原生JS DOM操作基础

DOM概述

DOM（Document Object Model）是文档对象模型的简称，它将HTML文档解析为树形结构，以便JavaScript可以访问和操作其中的元素。DOM中，每个元素都被视为一个对象，具有属性和方法，可以用来获取和修改元素的属性、内容和样式。

操作元素

原生JS提供了多种方法来操作DOM元素，常用的方法包括：

  • document.getElementById(id)： 通过元素的ID获取元素。
  • document.getElementsByClassName(className)： 通过元素的类名获取所有具有该类名的元素。
  • document.querySelector(selector)： 通过选择器获取元素。
  • document.querySelectorAll(selector)： 通过选择器获取所有匹配的元素。
  • element.innerHTML： 获取或设置元素的HTML内容。
  • element.outerHTML： 获取或设置元素的外层HTML内容。
  • element.style： 获取或设置元素的样式。
  • element.addEventListener(event, listener)： 为元素添加事件监听器。
  • element.removeEventListener(event, listener)： 移除元素的事件监听器。

创建元素

原生JS也可以用来创建新的DOM元素，常用的方法包括：

  • document.createElement(tagName)： 创建一个具有指定标签名的元素。
  • document.createTextNode(text)： 创建一个包含指定文本内容的文本节点。
  • element.appendChild(child)： 将子元素添加到元素中。
  • element.insertBefore(newElement, existingElement)： 将新元素插入到现有元素之前。
  • element.removeChild(child)： 从元素中移除子元素。

原生JS DOM操作实战

更改元素内容

原生JS可以通过更改元素的innerHTML或innerText属性来更改元素的内容，例如：

const element = document.getElementById('element-id');
element.innerHTML = 'New HTML content';

添加和移除元素

原生JS可以通过appendChild和removeChild方法来添加和移除元素，例如：

const element = document.getElementById('parent-element');
const newElement = document.createElement('div');
newElement.innerHTML = 'New element';
element.appendChild(newElement);

const element = document.getElementById('element-id');
element.parentNode.removeChild(element);

更改元素样式

原生JS可以通过style属性来更改元素的样式，例如：

const element = document.getElementById('element-id');
element.style.color = 'red';
element.style.backgroundColor = 'blue';

绑定事件处理程序

原生JS可以通过addEventListener方法为元素绑定事件处理程序，例如：

const element = document.getElementById('element-id');
element.addEventListener('click', function() {
  alert('Element clicked!');
});

总结

原生JS的DOM操作是前端开发的基础，通过掌握这些技巧，您可以更灵活地控制网页元素，构建更具交互性和动态性的网页应用程序。在本文中，我们介绍了原生JS DOM操作的基础知识和常用方法，并通过实战例子展示了如何使用原生JS来更改元素内容、添加和移除元素、更改元素样式以及绑定事件处理程序。