JS操作DOM的常用技巧与方法

掌握JavaScript DOM操作是前端开发的基石。本文深入讲解JS操作DOM元素的常用方法，助你高效实现动态页面效果。首先，介绍如何利用`getElementById`、`getElementsByClassName`、`getElementsByTagName`、`querySelector`和`querySelectorAll`等方法精准获取页面元素，推荐使用更灵活的`querySelector`和`querySelectorAll`。其次，详细阐述如何通过`innerHTML`、`textContent`修改元素内容，以及使用`setAttribute`和`getAttribute`操作属性，并结合`classList`管理类名。此外，还包括动态设置`style`样式，以及利用`createElement`创建元素，通过`appendChild`或`insertBefore`插入元素，使用`remove`或`removeChild`删除元素。通过本文，你将能熟练运用这些核心方法，轻松应对各种前端交互需求。

掌握DOM操作需先获取元素，常用方法包括getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll，推荐优先使用后两者；获取元素后可修改内容与属性，如通过innerHTML或textContent设置内容，setAttribute和getAttribute操作属性，结合id和className或classList管理类名；还可动态设置style样式，使用classList的add、remove、toggle和contains方法控制类名；创建元素用createElement，插入用appendChild或insertBefore，删除用remove或removeChild；例如创建按钮并添加事件监听器后插入页面。这些核心方法覆盖大多数前端交互需求，熟练运用可高效实现动态页面效果。

JavaScript 操作 DOM 是前端开发的基础技能。通过 JS 可以动态获取、修改、添加或删除页面元素，实现交互效果。以下是常用的 DOM 获取和操作方法，实用且高频使用。

获取 DOM 元素的方法

要操作页面元素，第一步是准确获取目标节点。常用方法包括：

• document.getElementById("id")：通过 ID 获取单个元素，返回 HTMLElement 对象，若无匹配则返回 null。
• document.getElementsByClassName("class")：通过类名获取元素集合（HTMLCollection），注意返回的是动态集合。
• document.getElementsByTagName("div")：根据标签名获取所有匹配元素，同样返回 HTMLCollection。
• document.querySelector("selector")：使用 CSS 选择器获取第一个匹配的元素，支持复杂选择如 ".header .nav a"。
• document.querySelectorAll("selector")：返回所有匹配元素的 NodeList（静态集合），可遍历操作。

推荐优先使用 querySelector 和 querySelectorAll，语法灵活，兼容现代浏览器。

修改元素内容和属性

获取元素后，常需要修改其内容或特性：

• element.innerHTML = "新HTML"：设置或获取元素内的 HTML 字符串，可插入标签。
• element.textContent = "纯文本"：设置或获取纯文本内容，更安全，避免 XSS 风险。
• element.setAttribute("attr", "value")：设置属性，如添加 data-id 或修改 src。
• element.getAttribute("attr")：获取指定属性值。
• element.id / element.className：直接读写 id 和 class 属性，也可用 classList 进行更精细控制。

操作元素样式和类名

JS 可以动态控制元素外观：

• element.style.property = "value"：直接设置行内样式，如 element.style.color = "red"。
• element.classList.add("className")：添加类名。
• element.classList.remove("className")：移除类名。
• element.classList.toggle("className")：切换类名（存在则删，否则加）。
• element.classList.contains("className")：判断是否包含某类名，返回布尔值。

使用 classList 比直接操作 className 更清晰安全，尤其适合处理多个类的情况。

创建、插入和删除元素

动态生成内容是常见需求：

• document.createElement("div")：创建新元素节点。
• parent.appendChild(child)：将子元素添加到父元素末尾。
• parent.insertBefore(newNode, referenceNode)：在指定子元素前插入新节点。
• element.remove()：直接删除元素自身。
• child.parentNode.removeChild(child)：老式删除方法，兼容性好。

例如，创建一个按钮并插入到页面：

const btn = document.createElement("button");
btn.textContent = "点击我";
btn.addEventListener("click", () => alert("Hello"));
document.body.appendChild(btn);

基本上就这些核心方法，掌握它们就能应对大多数 DOM 操作场景。不复杂但容易忽略细节，多练习更熟练。

今天关于《JS操作DOM的常用技巧与方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！