JS常见DOM节点操作示例【创建，插入，删除，复制，查找】

下面是“JS常见DOM节点操作示例【创建，插入，删除，复制，查找】”的完整攻略。

创建DOM节点

要创建DOM节点，我们可以使用 document.createElement() 方法。这个方法接受一个参数，表示要创建的节点的标签名。例如，要创建一个 <div> 节点，我们可以这样写：

const div = document.createElement('div');

上面的代码创建了一个空的 <div> 节点，并将其赋值给变量 div。

DOM节点可以插入到文档中的任何位置。要将一个节点插入到父节点的某个位置上，我们可以使用以下方法：

parentNode.appendChild(childNode)：将 childNode 插入到 parentNode 的最后一个子节点的位置；
parentNode.insertBefore(newNode, referenceNode)：将 newNode 插入到 parentNode 中 referenceNode 的前面。

例如，要将上面创建的 <div> 节点插入到 <body> 元素中，我们可以这样写：

const body = document.querySelector('body');
body.appendChild(div);

上面的代码将 <div> 节点插入到了 <body> 元素的最后面。

要删除一个DOM节点，我们可以使用以下方法：

例如，要删除上面创建的 <div> 节点，我们可以这样写：

div.parentNode.removeChild(div);

上面的代码将 <div> 节点从其父节点中删除。

要复制一个DOM节点，我们可以使用以下方法：

node.cloneNode(deepCopy)：复制 node 节点。如果 deepCopy 参数为 true，则会深度复制整个节点及其子节点。如果 deepCopy 参数为 false 或省略，则只会复制节点本身。

例如，要复制上面创建的 <div> 节点，并将其插入到 <body> 元素中，我们可以这样写：

const div2 = div.cloneNode(true);
body.appendChild(div2);

上面的代码复制了 <div> 节点，并将其深度插入到了 <body> 元素中。现在，<body> 元素中包含了两个 <div> 节点。

要查找文档中的DOM节点，我们可以使用以下方法：

document.getElementById(id)：通过 id 属性查找节点；
parentNode.querySelector(selector)：在 parentNode 中查找符合 selector 选择器的第一个节点；
parentNode.querySelectorAll(selector)：在 parentNode 中查找符合 selector 选择器的所有节点。

例如，要查找文档中 id 属性为 "myDiv" 的节点，我们可以这样写：

const myDiv = document.getElementById('myDiv');

上面的代码将查找到文档中的 <div id="myDiv"> 节点，并将其赋值给变量 myDiv。

另外一个示例是：要查找文档中所有 class 属性包含 "red" 的 <div> 节点，并将它们的背景色改为红色，我们可以这样写：

const divs = document.querySelectorAll('div.red');
divs.forEach(div => {
  div.style.backgroundColor = 'red';
});

上面的代码将查找所有 class 属性包含 "red" 的 <div> 节点，并将它们的背景色改为红色。