阅读量:0
在JavaScript中，可以使用DOM（文档对象模型）操作来对HTML文档中的节点进行增、删、改、查等操作。以下是一些常用的DOM操作方法：
获取节点：
getElementById(id)：通过元素的ID获取元素。getElementsByClassName(className)：通过元素的类名获取元素集合。getElementsByTagName(tagName)：通过元素的标签名获取元素集合。querySelector(selector)：通过CSS选择器获取第一个匹配的元素。querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素集合。
创建节点：
document.createElement(tagName)：创建一个新的元素节点。document.createTextNode(text)：创建一个新的文本节点。
插入节点：
parentNode.insertBefore(newNode, referenceNode)：将新节点插入到指定节点之前。parentNode.appendChild(newNode)：将新节点添加到指定节点的子节点列表末尾。
删除节点：
parentNode.removeChild(childNode)：从DOM中删除指定节点。
替换节点：
parentNode.replaceChild(newChild, oldChild)：用新节点替换指定节点。
复制节点：
Node.cloneNode(deep)：复制指定节点，可以选择是否复制子节点。
移动节点：
parentNode.insertBefore(node, referenceNode)：将指定节点移动到指定节点之前。
以下是一个简单的示例，演示了如何使用DOM操作在HTML文档中添加一个新的<p>元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM操作示例</title> </head> <body> <div id="container"></div> <button onclick="addParagraph()">添加段落</button> <script> function addParagraph() { // 创建一个新的<p>元素 const newParagraph = document.createElement('p'); // 创建一个新的文本节点 const textNode = document.createTextNode('这是一个新的段落。'); // 将文本节点添加到<p>元素中 newParagraph.appendChild(textNode); // 获取id为"container"的元素 const container = document.getElementById('container'); // 将新创建的<p>元素添加到id为"container"的元素中 container.appendChild(newParagraph); } </script> </body> </html> 在这个示例中，当用户点击"添加段落"按钮时，会调用addParagraph函数，该函数会创建一个新的<p>元素，并添加到id为"container"的元素中。
