原生 JavaScript DOM 操作：添加、删除、移动、复制、创建和查找节点

1. 添加节点：可以使用 createElement() 和 appendChild() 方法来添加节点。createElement() 方法用于创建新的节点，appendChild() 方法用于将新的节点添加到已有节点的末尾。

示例代码：

// 创建新的节点
var newElement = document.createElement('div');

// 添加新的节点
document.body.appendChild(newElement);

2. 删除节点：可以使用 removeChild() 方法来删除节点。该方法用于删除指定的节点。

示例代码：

// 获取要删除的节点
var nodeToRemove = document.getElementById('myNode');

// 删除节点
nodeToRemove.parentNode.removeChild(nodeToRemove);

3. 移动节点：可以使用 insertBefore() 方法来移动节点。该方法用于将一个节点插入到另一个节点的前面。

示例代码：

// 获取要移动的节点
var nodeToMove = document.getElementById('myNode');

// 获取目标节点
var targetNode = document.getElementById('targetNode');

// 移动节点
targetNode.parentNode.insertBefore(nodeToMove, targetNode);

4. 复制节点：可以使用 cloneNode() 方法来复制节点。该方法用于创建节点的副本。

示例代码：

// 获取要复制的节点
var nodeToCopy = document.getElementById('myNode');

// 复制节点
var clonedNode = nodeToCopy.cloneNode(true);

// 添加副本节点
document.body.appendChild(clonedNode);

5. 创建节点：可以使用 createElement() 方法来创建新的节点。该方法用于创建指定类型的新节点。

示例代码：

// 创建新的节点
var newElement = document.createElement('div');

// 设置节点属性
newElement.className = 'myClass';
newElement.innerHTML = 'Hello World!';

// 添加节点
document.body.appendChild(newElement);

6. 查找节点：可以使用 getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() 和 querySelectorAll() 等方法来查找节点。

示例代码：

// 查找节点
var node = document.getElementById('myNode');

// 修改节点属性
node.innerHTML = 'Hello World!';