JS获取和操作DOM元素的常用方法_javascript dom

掌握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，语法灵活，兼容现代浏览器。

修改元素内容和属性

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

立即学习“Java免费学习笔记（深入）”；

• 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 可以动态控制元素外观：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

• 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元素的常用方法_javascript dom的详细内容，更多请关注php中文网其它相关文章！