以下是使用 JavaScript 进行 DOM 解析的基本步骤：
1. 创建 XMLHttpRequest 对象（如果需要从服务器获取 XML 数据）：
var xhr = new XMLHttpRequest();
xhr.open("GET", "example.xml", true);
xhr.send();
2. 处理异步请求的响应：
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var xmlData = xhr.responseXML;
// 在这里进行 DOM 解析
}
};
3. DOM 解析：
使用 DOM 解析器（例如 DOMParser 或浏览器的内置解析器）将 XML 字符串解析为 DOM 树。
使用 DOMParser：
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xhr.responseText, "application/xml");
使用浏览器内置解析器：
var xmlDoc = xhr.responseXML;
4. 访问和操作 DOM 树：
// 示例：获取文档根元素
var rootElement = xmlDoc.documentElement;
// 示例：获取元素节点的子节点
var childNodes = rootElement.childNodes;
// 示例：获取元素节点的属性值
var categoryAttribute = rootElement.getAttribute("category");
// 示例：遍历子节点并输出文本内容
for (var i = 0; i < childNodes.length; i++) {
var node = childNodes[i];
if (node.nodeType == 1) { // 判断是否为元素节点
console.log(node.nodeName + ": " + node.textContent);
}
}
在这个示例中，xmlDoc 变量现在包含了整个 XML 文档的 DOM 表示。可以使用 DOM 提供的方法和属性来访问和操作文档的各个部分。
完整的示例：
var xhr = new XMLHttpRequest();
xhr.open("GET", "example.xml", true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xhr.responseText, "application/xml");
var rootElement = xmlDoc.documentElement;
var childNodes = rootElement.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var node = childNodes[i];
if (node.nodeType == 1) { // 元素节点
console.log(node.nodeName + ": " + node.textContent);
}
}
}
};
这个示例演示了如何使用 XMLHttpRequest 对象异步地获取 XML 数据，然后使用 DOMParser 进行解析，并最终访问和操作 DOM 树的内容。
转载请注明出处：http://www.zyzy.cn/article/detail/14559/XML DOM