XML数据岛（XML Data Island）是微软在Internet Explorer 4.0之后引入的一种技术，允许开发者将一段完整的XML文档直接嵌入到HTML页面内部，作为页面DOM的一部分存在。它通过非标准但被IE识别的<xml>标签实现，浏览器解析HTML时会把该标签内容构建为XML DOM树，从而可以用脚本或HTML属性直接读写其中的数据，而不必单独发起网络请求去获取外部XML文件。
从底层来看，XML数据岛并不是W3C标准，而是IE特有的行为扩展。当浏览器遇到<xml>标签且未设置隐藏样式时，旧版IE会将其作为数据容器处理，不会像普通HTML那样渲染里面的标签。与之配套的是HTML元素上的datasrc和datafld属性，前者指向数据岛的id，后者指向XML节点名称，形成类似数据库字段绑定的声明式数据呈现方式。
XML数据岛的基本结构
一个最基础的XML数据岛写法是在HTML中直接放置<xml>标签，并赋予唯一id。其内部是标准XML文本，可以包含多条记录。下面的示例展示了一组简单的员工信息，后续HTML表格将通过属性绑定读取这些内容。
<xml id="employeeData">
<employees>
<employee>
<name>张三</name>
<age>28</age>
<dept>研发部</dept>
</employee>
<employee>
<name>李四</name>
<age>34</age>
<dept>产品部</dept>
</employee>
</employees>
</xml>
上述代码中，<xml>标签的id为employeeData，内部根节点是employees，其下包含两个employee子节点。在IE中，这段XML不会显示为用户可见内容，但可以通过脚本document.getElementById('employeeData')拿到对应的XML DOM对象。这种结构让数据和页面展示层耦合在一个文件里，方便小型静态应用快速搭建。
需要注意的是，如果在非IE浏览器中打开这段HTML，<xml>标签会被当作未知元素，其中的内容可能直接以纯文本形式暴露在页面上。因此这种写法在现代跨浏览器开发中已经完全不可取，仅用于理解历史系统与老内网项目的维护场景。
在HTML页面中嵌入并绑定XML数据
IE提供了datasrc与datafld两个扩展属性，用于将HTML元素与XML数据岛中的节点进行绑定。最常见的是结合<table>标签实现自动循环渲染。下面的代码演示了如何把前面定义的数据岛内容展示为表格。
<table datasrc="#employeeData" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
</tr>
</thead>
<tbody>
<tr>
<td><span datafld="name"></span></td>
<td><span datafld="age"></span></td>
<td><span datafld="dept"></span></td>
</tr>
</tbody>
</table>
这里table的datasrc属性值为#employeeData，表示绑定到id为employeeData的数据岛。tbody内的tr会被浏览器针对数据岛中的每条employee记录重复生成，span上的datafld则分别对应XML中的子节点名。整个过程不需要手写循环脚本，是早期IE推崇的“零代码”数据绑定思路。
除了表格，表单元素也可以绑定，例如<input type="text" datasrc="#employeeData" datafld="name">。但这种绑定是单向且脆弱的：一旦XML结构变化或浏览器不支持，页面就会空白。相比之下，用JavaScript主动解析XML可控性更强，也是后来标准方案的核心。
使用JavaScript操作XML数据岛
即便在支持数据岛的IE中，通过脚本操作XML DOM也比纯属性绑定更灵活。可以使用XMLHttpRequest加载外部XML再注入，或直接读取页面内<xml>节点的XMLDocument对象。以下示例展示如何用脚本遍历前面嵌入的数据并动态生成列表。
function showEmployees() {
var xmlNode = document.getElementById('employeeData');
var xmlDoc = xmlNode.XMLDocument || new DOMParser().parseFromString(xmlNode.innerHTML, 'text/xml');
var employees = xmlDoc.getElementsByTagName('employee');
var html = '<ul>';
for (var i = 0; i < employees.length; i++) {
var name = employees[i].getElementsByTagName('name')[0].textContent;
var dept = employees[i].getElementsByTagName('dept')[0].textContent;
html += '<li>' + name + ' - ' + dept + '</li>
}
html += '</ul>';
document.getElementById('output').innerHTML = html;
}
这段代码先获取<xml>标签，再尝试读取其XMLDocument属性（IE专有），若不支持则使用标准DOMParser解析innerHTML。随后用getElementsByTagName提取每个employee的字段，拼接为HTML字符串写入容器。这种方式摆脱了datasrc的浏览器限制，逻辑也更清晰。
从工程角度看，JavaScript解析方案虽然多写几行代码，但具备跨浏览器能力，也更容易调试和扩展。例如可以增加异常处理、字段映射、排序过滤等逻辑，而数据岛原生绑定做不到这些。对于现代开发者，理解这套兼容写法有助于在老项目里渐进式重构。
XML数据岛的局限与现代替代
XML数据岛最大问题是仅IE支持，不符合开放Web标准。随着IE淘汰，这种写法已无实用价值。现代前端通常用JSON配合Fetch API或前端框架（如Vue、React）来管理页面数据，结构更轻量，工具链更完善。
| 对比维度 | XML数据岛 | 现代JSON加脚本渲染 |
|---|---|---|
| 浏览器支持 | 仅旧版IE | 所有现代浏览器 |
| 数据格式 | XML标签冗长 | JSON简洁 |
| 绑定方式 | 声明式属性绑定 | 编程式或框架响应式 |
| 维护成本 | 高，易失效 | 低，生态成熟 |
如果今天仍要在页面内嵌结构化数据，推荐直接使用<script type="application/json">块存放JSON，再用脚本读取。它不会被渲染，也兼容所有浏览器，是数据岛的标准化精神继承者。
<script type="application/json" id="empJson">
{
"employees": [
{"name": "张三", "age": 28, "dept": "研发部"},
{"name": "李四", "age": 34, "dept": "产品部"}
]
}
</script>
通过JSON脚本块，我们既保留了“数据随页面一起下载”的特性，又获得了现代语法的好处。老系统维护者明白XML数据岛原理后，便能顺利将这些内联数据迁移为上述形式，降低技术债务。
XML数据岛HTML嵌入XMLXMLDataSource修改时间：2026-08-08 21:06:36