XML DOM - 访问节点
XML DOM(Document Object Model) 是一个表示 XML 文档的标准化程序接口，它描述了一个文档的结构以及如何访问和操作该结构。文档对象模型(XML DOM)在网页中有很多应用场景。本文将详细介绍XML DOM访问节点的方法。
获取标签元素
XML DOM可以用getElementsByTagName()方法获取所有指定标签元素，如下示例代码所示：
<!DOCTYPE html>
<html>
<head>
<title>XML DOM - 获取标签元素</title>
</head>
<body>
<h1>XML DOM - 获取标签元素</h1>
<ul id="fruit">
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
<script>
var fruits = document.getElementById("fruit");
var lis = fruits.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
console.log(lis[i].innerHTML);
}
</script>
</body>
</html>
通过使用getElementsByTagName()方法，我们可以获取到 id=“fruit” 的元素，进而获取到li标签列表，并使用循环遍历输出每一个li元素的内容。
修改元素内容
我们可以使用XML DOM修改元素的内容。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>XML DOM - 修改元素内容</title>
</head>
<body>
<h1>XML DOM - 修改元素内容</h1>
<ul id="fruit">
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
<script>
var fruits = document.getElementById("fruit");
fruits.getElementsByTagName("li")[0].innerHTML = "melon";
fruits.getElementsByTagName("li")[1].innerHTML = "grape";
fruits.getElementsByTagName("li")[2].innerHTML = "kiwi";
</script>
</body>
</html>
使用getElementById()和getElementsByTagName()方法先获取到对应的元素，然后使用innerHTML属性修改对应元素的内容。在这个示例中，我们把标题修改为了’XML DOM - 修改元素内容’，把前三个标签内容修改为了’melon’，‘grape’，‘kiwi’。
获取元素属性
XML DOM也支持获取元素的属性，并可以修改元素的属性。示例如下：
<!DOCTYPE html>
<html>
<head>
<title>XML DOM - 获取元素属性</title>
</head>
<body>
<h1>XML DOM - 获取元素属性</h1>
<img id="myImg" src="img.png" alt="img">
<script>
var img = document.getElementById("myImg");
console.log(img.alt); // 获取 alt 属性值
console.log(img.src); // 获取 src 属性值
img.src = "new_img.png"; // 修改 src 属性值
</script>
</body>
</html>
在这个示例中，我们获取到了id=“myImg” 的img元素，并可以通过使用该元素的alt、src属性获取对应属性的值。还修改了img的src属性为一个新的图片。
通过以上三个示例我们可以看到XML DOM提供了多种操作HTML标签的方法，可以获取、修改包括元素、属性等在内的各种标签内容，进而帮助处理和操作网页的相关DOM元素。