在HTML页面中通过XML数据岛嵌入结构化数据，本质是把一段XML文档作为DOM对象挂在页面里。开发者常需要沿着父节点、子节点、兄弟节点组成的树形关系，把数据逐层取出来做渲染或校验。理解这种遍历机制，比单纯用表格绑定更重要。
XML数据岛的基本嵌入方式
早期IE浏览器支持使用<xml>标签直接在HTML中写入XML片段，这段内容不会显示给用户，但会成为document的一部分。现代开发中虽已不推荐该方式，但在维护老系统或特定内网环境里仍会遇到。其核心是让XML文档以DOM树形式存在，从而可以用脚本访问。
下面展示一个最简数据岛结构，其中<xml>标签内的内容就是一棵有层次的树：
<xml id="bookData">
<library>
<book category="web">
<title>DOM实战</title>
<author>张三</author>
</book>
<book category="xml">
<title>XML详解</title>
<author>李四</author>
</book>
</library>
</xml>
上述代码中，library是根元素的子节点，book是其下的重复节点，title与author又分别是book的子节点。这种嵌套就是典型的树形结构关系，遍历时必须从根出发一层层向下。
使用DOM属性穿过树形关系
每一个XML节点都有一组标准DOM属性来描述它在树中的位置。documentElement指向最外层元素，childNodes返回所有直接子节点集合，firstChild和lastChild分别指向首尾子节点，parentNode回指父级，nextSibling与previousSibling连接兄弟节点。借助这些属性，就能在树中任意移动。
需要注意，浏览器会把标签间的换行和空格解析为文本节点，它们也会出现在childNodes里。如果不加判断就处理，容易把空白当作数据。因此遍历时应先检查nodeType，元素节点的值为1，文本节点为3。下面代码演示如何从数据岛根节点进入library再循环book：
var xmlDoc = document.getElementById('bookData').XMLDocument;
var root = xmlDoc.documentElement; // 指向library
var books = root.childNodes;
for (var i = 0; i < books.length; i++) {
if (books[i].nodeType === 1 && books[i].nodeName === 'book') {
var book = books[i];
var title = book.getElementsByTagName('title')[0].text;
var author = book.getElementsByTagName('author')[0].text;
console.log(title + ' 作者:' + author);
}
}
这段代码用childNodes配合nodeType过滤，跳过了空白文本节点，准确穿过了一层树形关系。它的优点是兼容原生DOM，不依赖额外库；缺点是需要手动写循环和判断，层级深时会显得冗长。
用递归遍历任意深度树
当XML层次不固定，比如book下还可能嵌套chapter、section时，用固定循环就无法覆盖。此时应改用递归函数，每到一个元素节点就把它的子节点再交给同一函数处理，直到叶子节点为止。
递归遍历能完整穿过整棵树，且代码逻辑统一。下面的示例打印出每个元素节点的路径与名称：
function walk(node, depth) {
if (node.nodeType === 1) {
var indent = '';
for (var d = 0; d < depth; d++) indent += ' ';
console.log(indent + node.nodeName);
var children = node.childNodes;
for (var i = 0; i < children.length; i++) {
walk(children[i], depth + 1);
}
}
}
var xmlDoc = document.getElementById('bookData').XMLDocument;
walk(xmlDoc.documentElement, 0);
运行后会按缩进输出library、book、title等层级，清晰反映树形结构。递归的劣势在于极深的数据可能引发调用栈溢出，但一般业务XML不会达到那种规模。相比逐层写死，递归更利于维护结构变动频繁的数据岛。
借助XPath简化关系查询
如果目标只是取某类节点，而不关心完整遍历过程，可以使用selectNodes或evaluate配合XPath表达式。XPath用斜杠描述路径，能直接表达树形关系，例如library/book表示library下的所有book子元素。
在支持XMLDocument的環境中，下面写法可一次性拿到全部书名：
var xmlDoc = document.getElementById('bookData').XMLDocument;
var titles = xmlDoc.selectNodes('//book/title');
for (var i = 0; i < titles.length; i++) {
console.log(titles[i].text);
}
这种方式把树形路径声明在字符串里，代码更短，也更贴近数据结构本身。不过selectNodes属于较老接口，在部分现代浏览器中需用evaluate替代。总体看，DOM遍历适合理解结构，XPath适合精准提取，两者可结合使用。
遍历时的常见误区
一个典型错误是认为数据岛里的空白不存在。实际上换行产生的文本节点会让childNodes长度变多，若直接用索引取book可能拿到空文本。另一个误区是在循环中对节点树做删除操作，这会导致集合实时变化而漏掉元素，正确做法是先收集再处理。
此外，把HTML标签如<div>和XML数据岛节点混淆也常发生。数据岛内部是独立XML命名空间，用getElementById取的是HTML元素，而XMLDocument才指向XML树。分清这两者，穿过树形关系才不会找错对象。