『JavaScript』DOM的元素获取、创建、修改操作实践总结

📣读完这篇文章里你能收获到

• 理解DOM的基本结构和节点类型
• 掌握获取和修改DOM元素的多种方法
• 了解如何使用DOM方法动态创建、插入、删除和替换元素
• 学习DOM遍历和树形结构操作
• 掌握CSS样式操作

在JavaScript中，Document Object Model (DOM) 是一种编程接口，用于表示和操作HTML或XML文档。本文将详细介绍JavaScript中的DOM操作技术，包括基础概念、常用方法以及一些实用技巧。

一、获取元素

以下是一些常用的获取DOM元素的方法：

方法名	描述
getElementById(id)	返回具有指定ID的第一个元素
getElementsByClassName(name)	返回一个包含所有具有指定类名的元素的NodeList
getElementsByTagName(name)	返回一个包含所有具有指定标签名的元素的NodeList
querySelector(selector)	返回文档中匹配指定CSS选择器的第一个元素
querySelectorAll(selector)	返回文档中匹配指定CSS选择器的所有元素的NodeList

示例代码：

let elementById = document.getElementById("myId");
let elementsByClass = document.getElementsByClassName("myClass");
let elementsByTag = document.getElementsByTagName("p");

let elementByQuery = document.querySelector(".myClass button");
let elementsByQuery = document.querySelectorAll(".myClass button");

二、创建和修改元素

以下是一些常用的创建和修改DOM元素的方法：

方法名	描述
createElement(tagName)	创建一个新的元素节点
createTextNode(data)	创建一个新的文本节点
appendChild(node)	将指定节点添加到当前节点的子节点列表末尾
insertBefore(newNode, referenceNode)	在指定的参考节点之前插入新的节点
removeChild(node)	删除指定的子节点
replaceChild(newNode, oldNode)	替换当前节点的一个子节点
innerHTML	获取或设置元素的HTML内容
innerText	获取或设置元素的文本内容（不包括HTML标签）

示例代码：

let newElement = document.createElement("div");
let newText = document.createTextNode("Hello, World!");

element.appendChild(newElement);
newElement.appendChild(newText);

element.innerHTML = "<h1>Welcome!</h1>";
element.innerText = "Hello, World!";

三、DOM遍历和树形结构操作

以下是一些常用的DOM遍历和树形结构操作的方法：

方法名	描述
childNodes	返回一个包含当前节点所有子节点的NodeList
parentNode	返回当前节点的父节点
nextSibling	返回当前节点的下一个同级节点
previousSibling	返回当前节点的上一个同级节点

示例代码：

let children = element.childNodes;
for (let i = 0; i < children.length; i++) {
  console.log(children[i]);
}

let parent = element.parentNode;
console.log(parent);

let nextSibling = element.nextSibling;
console.log(nextSibling);

let previousSibling = element.previousSibling;
console.log(previousSibling);

四、CSS样式操作

以下是一些常用的CSS样式操作方法：

方法名	描述
style	获取或设置元素的内联样式
getComputedStyle(element[, pseudoElt])	返回元素的最终使用样式，包括浏览器默认样式和任何通过CSS设置的样式

示例代码：

element.style.color = "red";

let styles = window.getComputedStyle(element);
console.log(styles.getPropertyValue("color"));