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