在JavaScript中,可以使用DOM(文檔對(duì)象模型)操作來(lái)對(duì)HTML文檔中的節(jié)點(diǎn)進(jìn)行增、刪、改、查等操作。以下是一些常用的DOM操作方法:
獲取節(jié)點(diǎn):
getElementById(id)
:通過(guò)元素的ID獲取元素。getElementsByClassName(className)
:通過(guò)元素的類名獲取元素集合。getElementsByTagName(tagName)
:通過(guò)元素的標(biāo)簽名獲取元素集合。querySelector(selector)
:通過(guò)CSS選擇器獲取第一個(gè)匹配的元素。querySelectorAll(selector)
:通過(guò)CSS選擇器獲取所有匹配的元素集合。創(chuàng)建節(jié)點(diǎn):
document.createElement(tagName)
:創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)。document.createTextNode(text)
:創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。插入節(jié)點(diǎn):
parentNode.insertBefore(newNode, referenceNode)
:將新節(jié)點(diǎn)插入到指定節(jié)點(diǎn)之前。parentNode.appendChild(newNode)
:將新節(jié)點(diǎn)添加到指定節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。刪除節(jié)點(diǎn):
parentNode.removeChild(childNode)
:從DOM中刪除指定節(jié)點(diǎn)。替換節(jié)點(diǎn):
parentNode.replaceChild(newChild, oldChild)
:用新節(jié)點(diǎn)替換指定節(jié)點(diǎn)。復(fù)制節(jié)點(diǎn):
Node.cloneNode(deep)
:復(fù)制指定節(jié)點(diǎn),可以選擇是否復(fù)制子節(jié)點(diǎn)。移動(dòng)節(jié)點(diǎn):
parentNode.insertBefore(node, referenceNode)
:將指定節(jié)點(diǎn)移動(dòng)到指定節(jié)點(diǎn)之前。以下是一個(gè)簡(jiǎn)單的示例,演示了如何使用DOM操作在HTML文檔中添加一個(gè)新的<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() {
// 創(chuàng)建一個(gè)新的<p>元素
const newParagraph = document.createElement('p');
// 創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)
const textNode = document.createTextNode('這是一個(gè)新的段落。');
// 將文本節(jié)點(diǎn)添加到<p>元素中
newParagraph.appendChild(textNode);
// 獲取id為"container"的元素
const container = document.getElementById('container');
// 將新創(chuàng)建的<p>元素添加到id為"container"的元素中
container.appendChild(newParagraph);
}
</script>
</body>
</html>
在這個(gè)示例中,當(dāng)用戶點(diǎn)擊"添加段落"按鈕時(shí),會(huì)調(diào)用addParagraph
函數(shù),該函數(shù)會(huì)創(chuàng)建一個(gè)新的<p>
元素,并添加到id為"container"的元素中。