JavaScript DOM节点操作方式全面讲解

JavaScript DOM节点操作是前端开发中非常重要的一部分，通过节点操作可以改变页面的结构、样式和内容。本文将全面讲解JavaScript DOM节点操作的方式，包括获取节点、修改节点的属性、添加节点、删除节点等。同时，本文还将通过两个实例对节点操作进行说明，帮助读者更好地理解。

获取节点

获取节点是在操作节点之前必须要进行的步骤。在JavaScript中，可以通过以下方式获取节点：

getElementById

根据节点的id属性获取节点。

var node = document.getElementById("nodeId");

getElementsByTagName

根据节点的标签名获取一组节点。

var nodes = document.getElementsByTagName("tagname");

getElementsByClassName

根据节点的class属性获取一组节点。

var nodes = document.getElementsByClassName("classname");

querySelector

根据CSS选择器获取一个节点。

var node = document.querySelector("#id .classname");

querySelectorAll

根据CSS选择器获取一组节点。

var nodes = document.querySelectorAll(".classname");

## 修改节点属性

获取节点之后，可以通过修改节点属性来改变节点的样式、内容和结构。

### 修改节点内容

可以使用innerHTML属性对节点的内容进行赋值。

```javascript
node.innerHTML = "new content";

修改节点样式

可以通过修改节点的style属性来改变节点的样式。

node.style.color = "red";
node.style.fontSize = "16px";

修改节点属性

可以通过setAttribute方法来修改节点的属性。

node.setAttribute("src", "/image.jpg");

添加节点

可以使用appendChild方法在节点末尾添加新的子节点。

var newNode = document.createElement("div");
node.appendChild(newNode);

删除节点

可以使用removeChild方法删除一个节点。

node.removeChild(childNode);

示例说明

下面通过两个实例对节点操作进行说明。

示例1：动态添加节点

在页面中添加五个p标签，每个标签显示一个不同的数字。

for (var i = 1; i <= 5; i++) {
  var newNode = document.createElement("p");
  newNode.innerHTML = "Number " + i;
  document.body.appendChild(newNode);
}

示例2：修改节点样式

将页面中所有class为“highlight”的节点的背景颜色改为黄色。

var nodes = document.getElementsByClassName("highlight");
for (var i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "yellow";
}

通过以上例子，读者可以更好地理解节点操作的各种方式。