在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"的元素中。