怎么使用JavaScript添加、移除、移动、复制、创建和查找DOM节点？

使用JavaScript来添加、移除、移动、复制、创建和查找DOM节点。主要包括一下
createDocumentFragment()//创建一个 DOM 片段
createElement()//创建一个新元素
createTextNode()//创建一个文本节点
appendChild()//添加
removeChild()//移除
replaceChild()//替换
insertBefore()//插入
cloneNode()//克隆
getElementById()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()//查找

1. 创建 DOM 片段：

var fragment = document.createDocumentFragment();
var newDiv1 = document.createElement("div");
newDiv1.textContent = "First new div";
var newDiv2 = document.createElement("div");
newDiv2.textContent = "Second new div";

fragment.appendChild(newDiv1);
fragment.appendChild(newDiv2);

document.body.appendChild(fragment); // 一次性添加DOM片段中的节点到文档

2. 添加节点：

// 创建一个新元素
var newElement = document.createElement("div");

// 创建一个文本节点
var textNode = document.createTextNode("This is a new text node");

// 将新元素添加到文档中
document.body.appendChild(newElement);

// 将文本节点添加到新元素中
newElement.appendChild(textNode);

3. 创建节点：

var newElement = document.createElement("div");
newElement.setAttribute("id", "newElementId");
newElement.innerHTML = "This is a new element";

4. 移除节点：

var elementToRemove = document.getElementById("elementId");
elementToRemove.parentNode.removeChild(elementToRemove);

5. 替换节点：

var newElement = document.createElement("div");
newElement.textContent = "New content";

var oldElement = document.getElementById("elementId");
oldElement.parentNode.replaceChild(newElement, oldElement);

6. 插入节点：

var newElement = document.createElement("div");
newElement.textContent = "New content";

var referenceElement = document.getElementById("referenceId");
var parentElement = referenceElement.parentNode;

parentElement.insertBefore(newElement, referenceElement);

7. 复制节点：

var originalElement = document.getElementById("elementId");
var cloneElement = originalElement.cloneNode(true); // 如果参数为true，会复制节点及其子节点

8. 查找节点：

// 通过ID查找节点
var elementById = document.getElementById("elementId");

// 通过标签名称查找节点
var elementsByTagName = document.getElementsByTagName("div");

// 通过类名查找节点
var elementsByClassName = document.getElementsByClassName("myClass");

// 通过选择器查找节点
var elementBySelector = document.querySelector("div.myClass"); // 选择第一个匹配的节点
var elementsBySelectorAll = document.querySelectorAll("div.myClass"); // 选择所有匹配的节点