JavaScript常用操作DOM节点的方法包括获取节点、创建节点、添加节点、删除节点、替换节点等。
1.获取节点
(1)通过ID获取
使用 document.getElementById(“元素ID”) 方法，通过元素的ID获取单个元素。这是最常用的方法之一，因为ID在页面中是唯一的，可以直接定位到具体元素。
<div id="box"></div>
<script>
//通过元素的ID获取元素
let box = document.getElementById("box")
</script>
(2)通过标签名获取
<p></p>
<p></p>
<script>
//通过元素的标签名获取元素
let label = document.getElementsByTagName("p")
</script>
(3)通过类名获取
<div class="box"></div>
<script>
//通过元素的类名获取元素
let box = document.getElementsByClassName("box")
</script>
(4)通过name属性获取
<input type="text" name="example"/>
<script>
//通过name属性获取元素
let example = document.getElementsByName("example")
</script>
(5)获取特殊元素
获取body元素
document.body直接获取body元素
// 使用document.body获取body元素
var bodyElement = document.body;
// 输出获取到的元素
console.log(bodyElement); // 输出：<body>...</body>
获取html元素
document.documentElement获取html元素
// 使用document.documentElement获取documentElement元素
var htmlElement = document.documentElement;
// 输出获取到的元素
console.log(htmlElement ); // 输出：html
(6)通过CSS选择器获取
获取的元素只有一个的时候:
使用 document.querySelector(“CSS选择器”)方法
<div class="box"></div>
<script>
//通过CSS选择器获取元素
let box = document.querySelector("box")
</script>
获取的元素有很多个的时候:
使用 document.querySelectorAll(“CSS选择器”)方法
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
//通过CSS选择器获取元素
let boxs = document.querySelectorAll("box")
</script>
2.创建节点
(1)创建元素节点：
document.createElement(tagName)，用于动态生成新的HTML元素节点。
var newElement = document.createElement("div"); // 创建一个<div>元素节点
(2)创建文本节点：
document.createTextNode(text)，用于生成新的文本节点，常用于为新生成的元素节点添加文本内容。
var newText = document.createTextNode("Hello World!"); // 创建一个包含文本内容的文本节点
(3)创建属性节点：
document.createAttribute(attrName)，用于生成新的属性节点，可添加到元素节点上。
var newAttribute = document.createAttribute("class"); // 创建一个名为"class"的属性节点
newAttribute.value = "example"; // 设置属性值为"example"
(4)创建注释节点：
document.createComment(commentText)，用于生成新的注释节点，可用于添加注释信息。
var newComment = document.createComment("This is a comment"); // 创建一个包含注释内容的注释节点
3.添加节点
(1)向父节点末尾添加子节点：
element.appendChild(newNode)，将新节点添加为父节点的最后一个子节点。
// 获取父节点
var parentElement = document.getElementById("parent");
// 创建新的子节点
var newChild = document.createElement("div");
newChild.textContent = "This is a new child element";
// 将新子节点添加到父节点的末尾
parentElement.appendChild(newChild);
(2)向指定位置插入子节点：
element.insertBefore(newNode, referenceNode)，在父节点的子节点referenceNode前插入新节点。
// 获取父节点
var parentElement = document.getElementById("parent");
// 创建新的子节点
var newChild = document.createElement("div");
newChild.textContent = "This is a new child element";
// 获取参考节点，即要在其前面插入新子节点的节点
var referenceNode = document.getElementById("reference");
// 在参考节点之前插入新子节点
parentElement.insertBefore(newChild, referenceNode);
4.删除节点
(1)从父节点中删除子节点：
element.removeChild(node)，删除父节点下的指定子节点。
// 获取要删除的子节点
var childElement = document.getElementById("child");
// 获取该子节点的父节点
var parentElement = childElement.parentNode;
// 从父节点中删除子节点
parentElement.removeChild(childElement);
在这个示例中，我们首先通过document.getElementById()方法获取了ID为"child"的子节点。然后，我们使用parentNode属性获取了该子节点的父节点。最后，我们使用removeChild()方法将子节点从父节点中删除。
(2)直接从DOM树中移除节点：
node.remove()，直接移除节点及其子节点。
// 获取要删除的节点
var elementToRemove = document.getElementById("element");
// 直接从DOM树中移除节点
elementToRemove.remove();
注释：在这个示例中，我们首先通过document.getElementById()方法获取了ID为"element"的节点。然后，我们使用remove()方法直接从DOM树中移除该节点。
注意：这种方法会将节点及其所有子节点一起移除，而不仅仅是从父节点中移除。
5.替换节点
(1)替换子节点：
element.replaceChild(newNode, oldNode)，用新节点替换掉父节点下的旧节点。
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">
<p id="oldNode">这是旧节点</p>
</div>
</body>
<script>
// 获取要替换的旧节点和新节点
var oldNode = document.getElementById("oldNode");
var newNode = document.createElement("p");
newNode.innerHTML = "这是新节点";
// 使用replaceChild()方法替换子节点
document.getElementById("myDiv").replaceChild(newNode, oldNode);
</script>
</html>
6.复制节点
(1)克隆节点：
node.cloneNode([deep])，创建一个节点的副本，可选参数deep决定是否深度克隆（包括子节点）。
<ul id="myList1"></ul>
<ul id="myList2">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Milk</li>
</ul>
var node = document.getElementById("myList2").lastChild;
var clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);
注释：
在这个例子中，我们首先获取ID为"myList2"的ul元素的最后一个子节点（即 li Milk /li ），然后使用cloneNode(true)对其进行深度克隆，最后将克隆出来的节点添加到ID为"myList1"的 /ul元素中。
7.获取节点信息
(1)获取当前元素的父节点：
element.parentNode，返回当前元素的父节点对象。
<!DOCTYPE html>
<html>
<body>
<div id="parent">
<div id="child">这是子节点</div>
</div>
<script>
// 获取子节点
var childElement = document.getElementById("child");
// 获取子节点的父节点
var parentElement = childElement.parentNode;
// 输出父节点的id
console.log(parentElement.id); // 输出 "parent"
</script>
</body>
</html>
(2)获取当前元素的子节点：
element.childNodes，返回当前元素所有子节点的集合。
<!DOCTYPE html>
<html>
<body>
<div id="parent">
<p>这是第一个子节点</p>
<p>这是第二个子节点</p>
<p>这是第三个子节点</p>
</div>
<script>
// 获取父节点
var parentElement = document.getElementById("parent");
// 获取父节点的所有子节点
var childNodes = parentElement.childNodes;
// 遍历并输出每个子节点的内容
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType === Node.ELEMENT_NODE) { // 确保只处理元素节点
console.log(childNodes[i].textContent);
}
}
</script>
</body>
</html>
(3)获取当前元素的第一个和最后一个子节点：
element.firstChild 和 element.lastChild。
<!DOCTYPE html>
<html>
<body>
<div id="parent">
<p>这是第一个子节点</p>
<p>这是第二个子节点</p>
<p>这是第三个子节点</p>
</div>
<script>
// 获取父节点
var parentElement = document.getElementById("parent");
// 获取父节点的第一个子节点
var firstChild = parentElement.firstChild;
console.log(firstChild.textContent); // 输出 "这是第一个子节点"
// 获取父节点的最后一个子节点
var lastChild = parentElement.lastChild;
console.log(lastChild.textContent); // 输出 "这是第三个子节点"
</script>
</body>
</html>
(4)获取当前元素的同级前后兄弟节点：
element.nextSibling 和 element.previousSibling。
<!DOCTYPE html>
<html>
<body>
<div id="sibling1">这是第一个兄弟节点</div>
<div id="target">这是目标节点</div>
<div id="sibling2">这是第二个兄弟节点</div>
<script>
// 获取目标节点
var targetElement = document.getElementById("target");
// 获取目标节点的前一个兄弟节点
var previousSibling = targetElement.previousSibling;
console.log(previousSibling.textContent); // 输出 "这是第一个兄弟节点"
// 获取目标节点的后一个兄弟节点
var nextSibling = targetElement.nextSibling;
console.log(nextSibling.textContent); // 输出 "这是第二个兄弟节点"
</script>
</body>
</html>
8.修改节点内容与样式
(1)设置或获取元素的内容：
element.innerHTML 和 element.innerText，前者可以包含HTML标签，后者只显示文本内容。
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">这是初始内容</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 获取元素的内容
console.log(myElement.innerHTML); // 输出 "这是初始内容"
// 设置元素的内容
myElement.innerHTML = "这是新的内容";
// 再次获取元素的内容以确认更改已生效
console.log(myElement.innerHTML); // 输出 "这是新的内容"
</script>
</body>
</html>
(2)设置或获取元素的样式：
element.style.property=value，用来改变元素的特定样式属性。
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">这是一个带有样式的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 获取元素的样式
console.log(myElement.style.color); // 输出 "rgb(0, 0, 0)"，默认颜色为黑色
// 设置元素的样式
myElement.style.color = "red";
myElement.style.fontSize = "24px";
// 再次获取元素的样式以确认更改已生效
console.log(myElement.style.color); // 输出 "red"
console.log(myElement.style.fontSize); // 输出 "24px"
</script>
</body>
</html>
9.获取和设置元素的属性
(1)获取元素的属性值：
element.getAttribute(attributeName)，返回指定属性的属性值。
<!DOCTYPE html>
<html>
<body>
<div id="myDiv" class="example">这是一个带有属性的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 获取元素的id属性值
console.log(myElement.getAttribute("id")); // 输出 "myDiv"
// 获取元素的class属性值
console.log(myElement.getAttribute("class")); // 输出 "example"
</script>
</body>
</html>
(2)设置元素的属性值：
element.setAttribute(attributeName, value)，为元素设置指定属性的值。
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">这是一个带有属性的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 设置元素的id属性值
myElement.setAttribute("id", "newId");
console.log(myElement.getAttribute("id")); // 输出 "newId"
// 设置元素的class属性值
myElement.setAttribute("class", "newClass");
console.log(myElement.getAttribute("class")); // 输出 "newClass"
</script>
</body>
</html>
(3)删除元素的属性：
element.removeAttribute(attributeName)，删除元素的指定属性。
<!DOCTYPE html>
<html>
<body>
<div id="myDiv" class="example">这是一个带有属性的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 删除元素的id属性
myElement.removeAttribute("id");
console.log(myElement.getAttribute("id")); // 输出 null
// 删除元素的class属性
myElement.removeAttribute("class");
console.log(myElement.getAttribute("class")); // 输出 null
</script>
</body>
</html>