以下是一些在浏览器中使用 XML DOM 的常见操作：
1. 获取文档对象：
在浏览器中，可以使用 document 对象来获取当前文档的 DOM。
var xmlDoc = document;
2. 通过标签名获取元素节点：
var elements = document.getElementsByTagName("p");
3. 通过 ID 获取元素节点：
var element = document.getElementById("exampleId");
4. 创建新元素节点：
var newElement = document.createElement("div");
5. 添加和移除节点：
var parentElement = document.getElementById("parent");
// 添加子节点
parentElement.appendChild(newElement);
// 移除子节点
parentElement.removeChild(childElement);
6. 事件处理：
var button = document.getElementById("myButton");
// 添加点击事件监听器
button.addEventListener("click", function() {
// 处理点击事件的代码
});
7. 动态修改文档内容：
var element = document.getElementById("exampleElement");
// 修改元素的文本内容
element.textContent = "新的文本";
// 修改元素的 HTML 内容
element.innerHTML = "<b>加粗文本</b>";
示例：
考虑以下 HTML 片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XML DOM 浏览器示例</title>
</head>
<body>
<div id="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<button id="myButton">Click Me</button>
<script>
// 获取文档对象
var xmlDoc = document;
// 通过标签名获取元素节点
var paragraphs = xmlDoc.getElementsByTagName("p");
// 通过 ID 获取元素节点
var elementById = xmlDoc.getElementById("parent");
// 创建新元素节点
var newElement = xmlDoc.createElement("div");
// 添加和移除节点
var parentElement = xmlDoc.getElementById("parent");
var childElement = parentElement.firstChild;
// 添加子节点
parentElement.appendChild(newElement);
// 移除子节点
parentElement.removeChild(childElement);
// 事件处理
var button = xmlDoc.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button Clicked!");
});
// 动态修改文档内容
var exampleElement = xmlDoc.getElementById("exampleElement");
// 修改元素的文本内容
exampleElement.textContent = "新的文本";
// 修改元素的 HTML 内容
exampleElement.innerHTML = "<b>加粗文本</b>";
</script>
</body>
</html>
这个示例演示了在浏览器中使用 XML DOM 的一些常见操作，包括获取文档对象、获取元素节点、创建和修改节点、添加事件处理等。这些操作使得开发者可以通过 JavaScript 动态地操纵和交互 HTML 文档。
转载请注明出处：http://www.zyzy.cn/article/detail/14566/XML DOM