在Web开发中，DOM（文档对象模型）是与HTML文档交互的关键。通过DOM，JavaScript可以动态地获取、修改和操作HTML文档中的元素。本篇文章将简要介绍常用的DOM操作方法，帮助你快速掌握与页面元素交互的基本技巧。
常用的DOM操作知识速览
获取元素
-
通过ID获取元素：
const elem = document.getElementById("elementId"); -
通过标签名获取元素：
const elems = document.getElementsByTagName("div"); -
通过类名获取元素：
const elems = document.getElementsByClassName("className"); -
通过CSS选择器获取元素：
const elem = document.querySelector(".className"); const elems = document.querySelectorAll(".className"); -
获取根元素：
const root = document.documentElement; // <html> -
获取子元素或兄弟元素：
parentNode,previousSibling,nextSiblingchildren,firstElementChild,lastElementChild
1. 获取和设置元素属性
常规属性
-
获取属性：
const src = element.getAttribute("src"); -
设置属性：
element.setAttribute("src", "newImage.png");
自定义属性（HTML5推荐使用data-前缀）
-
获取自定义属性：
const value = element.dataset.customAttribute; -
删除自定义属性：
delete element.dataset.customAttribute;
2. 控制元素的样式
直接修改样式
-
行内样式：
element.style.color = "red";
获取元素的计算样式
-
获取最终样式：
const computedStyle = window.getComputedStyle(element); const color = computedStyle.color;
3. 操作元素内容
-
修改HTML内容：
element.innerHTML = "<p>New content</p>"; -
修改纯文本：
element.innerText = "New text"; -
修改或获取文本内容：
element.textContent = "Updated text content";
4. 元素结构的操作
创建新元素
-
创建元素：
const newDiv = document.createElement("div"); -
创建文本节点：
const textNode = document.createTextNode("Some text");
删除和替换元素
-
删除元素：
element.remove(); -
替换元素：
parent.replaceChild(newElement, oldElement); -
添加子元素：
parent.appendChild(newElement);
5. 事件处理
注册事件
-
监听点击事件：
element.addEventListener("click", function() { alert("Element clicked!"); }); -
this指向当前事件元素：element.addEventListener("click", function() { console.log(this); // 指向element });
6. 其他实用方法
-
获取元素的父元素：
const parent = element.parentElement; -
获取元素的兄弟元素：
const previousSibling = element.previousElementSibling; -
克隆元素：
const clonedElement = element.cloneNode(true); // true 为深度克隆
在Web开发中，DOM操作是我们与HTML页面交互的基础。掌握获取元素、修改内容和样式、事件处理等常用方法，将大大提升你操作页面的效率。希望这篇文章能为你提供清晰、简洁的DOM操作概览，让你快速上手和应用！