新建

XML 文档一般包含3 部分∶ XML 声明、处理指令和 XML 结构数据，其中处理指令是可选部分。每个 XML 文档都必须有声明，声明信息是正确解析 XML 数据的基础，它必须是 XML 文档中的第- 行内容，前面不能够包含任何字符，包括空格。

在 XML 声明中必须指定 version 属性值，指明文档所采用的 XML 版本号，同时定义文档字符集，上面代码中的 encoding="gb2312" 表示该文档使用的是 GB2312 字符集。

✂️

html

<?xml version="1.0" encoding="UTF-8"?>
<!-- xml 文档结构 -->
<blog>
  <item>
    <id>1</id> <title>标题1</title> <time> 发布时间</time>
    <content> 日志内容</content>
    <word>
      <user> 昵称</user> <time> 留言时间</time> <text> 留言内容</text>
    </word>
  </item>
</blog>

访问 XML 数据

整个文档是一个文档节点
每一个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性都是一个属性节点
注释属于注释节点

创建 XML DOM 对象

使用 ActiveXObject() 构造函数可以创建 XML DOM 对象。

✂️

var xmlDOM = new ActiveXObject('Microsoft.XmlDom');

参数表示要实例化 ActiveX 对象的字符串。

✂️

function XmlDom() {
  var a = [
    'MSXML2.DOMDocument.5.0',
    'MSXML2.DOMDocument.4.0',
    'MSXML2.DOMDocument.3.0',
    'MSXML2.DOMDocument',
    'Microsoft.XmlDom',
  ];

  for (var i in a) {
    try {
      var o = new ActiveXObject(a[i]);
      return o;
    } catch (e) {
      throw new Error(' 浏览器不支持 MSXML 组件');
    }
  }
}

在符合标准的现代浏览器中，可以通过 document 的 Implementation 属性，使用该对象的 createDocument 方法创建 XML DOM 对象。该方法包括这么三个参数。

文档所使用命名空间 URL 的字符串
文档根元素名称的字符串
要创建的文档类型

✂️

var xmlDOM = document.implementation.createDocument('', '', null);

如果要创建包含文档元素的 XML DOM ，那么第二个参数中指定根元素名称。

✂️

var xmlDOM = document.implementation.createDocument('', 'root', null);

若是要带有命名空间的 DOM ，可以在第一个参数中指定。

✂️

var xmlDOM = document.implementation.createDocument(
  'https://lmssee.com/',
  'root',
  null,
);

加载 XML 数据

IE 使用 loadXML() 和 load() 加载 XML 数据。

✂️

var o = xmlDom();
var s =
  '<recordset><record><ProductID>1</ProductID><ProductName> 苹果汁</ProductName></record></rexordset>';
o.loadXML(s);

✂️

var o = xmlDom();
o.load('test.xml');

为了安全考虑， load() 不能够跨域访问 XML 文件。 load() 方法在加载数据时有两种模式：同步加载和异步加载。

设置加载模式

load() 方法默认加载模式为异步加载，也可以使用 async 属性来设置加载模式，该属性是布尔值，取值为 false 时为同步加载，取值为 true 为异步加载。

✂️

var o = xmlDom();
o.async = false;
o.load('test.xml');

跟踪异步加载状态

与 XMLHttpRequest 对象通信相同， XML DOM 对象使用 readyStatue 属性跟踪进程。 readyStatue 属性取值有 5 个。

返回值	说明
1	正在加载数据
2	完成加载数据
3	已经可用，不过部分可能不能用
4	已经完全加载，全部可用
0	尚未初始化

同时， XML DOM 对象定义了 onreadystatechange() 属性，每当 readyState 属性值发生变化时，就会触发 readystatechange 事件，激活 onreadystatechange 处理函数。

✂️

function callback(o) {
  return function () {
    if (o.readyState == 4) {
      alert('XML 文件加载完毕');
    }
  };
}
var 哦 = xmlDom(); // 创建实例
o.async = true;
// 定义异步加载，因为默认是异步加载，所以可以省略
o.onreadystatechange = callback(o);
// 定义状态响应事件处理函数
o.load('test.xml'); // 开始执行异步加载事件

在回调函数中，不能使用 this ，因为 javascript 中的 Active 对象比较特殊， this 可能会指代错误，一般直接引用 XML DOM 的实例名称。

显示 XML 数据

XML 有着严格的 DOM 2 标准，可以使用 documentElement 属性获取根元素，使用 childNodes 、 firstChild 、 lastChild 、 nextSibling 、 nodeName 、 nodeType 、 ownerDocument 、 parentNode 、 perviousSibling 来遍历节点。

✂️

function text(o) {
  var s = '';
  for (var i = 0; i < o.childNodes; i++) {
    if (o.childNodes.hasChildNodes()) {
      s += text(o.childNodes[i]);
    } else {
      s += o.childNodes[i].nodeValue;
    }
  }
  return s;
}

案例

xml 文件

✂️

html

<<?xml version="1.0" encoding="gb2312"?>
<goods>
  <goods name=" 数码像机">
    <type>IT 数码</type> <goodSunIt> 台</goodSunIt> > <price>6306( 元)</price>
  </goods>
  <goods name=" 洗衣机">
    <type> 家用电器</type> <goodSunIt> 台</goodSunIt> > <price>3240( 元)</price>
  </goods>
  <goods name=" 笔记本">
    <type>IT 数码</type> <goodSunIt> 台</goodSunIt> > <price>5600( 元)</price>
  </goods>
</goods>

自定义函数 createTable() 用来载入 DOM 中的 XML 取出来并以表格形式显现出来。

✂️

function createTable(xmldoc) {
  var table = document.createElement('table');

  parentTd.appendChild(table);
  var header = table.createTHead();
  var headerRow = header.insertRow(0);
  headerRow.height = '27';
  headerRow.insertCell(0).appendChild(document.createTextNode(' 商品名称'));
  headerRow.insertCell(1).appendChild(document.createTextNode(' 类别'));

  headerRow.insertCell(2).appendChild(document.createTextNode(' 单位'));

  headerRow.insertCell(3).appendChild(document.createTextNode(' 单价'));
  var goods = xmldoc.getElementsByTagName('goods');
  for (var i = 0; i < goods.length; i++) {
    var g = goods[i];
    var name = g.getAttribute('name');
    var type = g.getElementsByTagName('type')[0].firstChild.data;
    var goodSunIt = g.getElementsByTagName('goodSunIt')[0].firstChild.data;

    var price = g.getElementsByTagName('price')[0].firstChild.data;

    var row = table.insertRow(i + 1);
    row.insertCell(0).appendChild(document.createTextNode(name));
    row.insertCell(1).appendChild(document.createTextNode(type));

    row.insertCell(2).appendChild(document.createTextNode(goodSunIt));

    row.insertCell(3).appendChild(document.createTextNode(price));
  }
}

自定义 readXML() 函数，用于读取 XML 文件并显示在页面中。

✂️

function readXML() {
  var url = 'goods.xml';
  if (window.ActiveXObject) {
    var xmldoc = new ActiveXObject('Microsoft.XMLDOM');
    xmldoc.onreadystatechange = function () {
      if (xmldoc.readyState == 4) createTable(xmldoc);
    };
    xmldoc.load(url);
  } else if (
    document.implementation &&
    document.implementation.createDocument
  ) {
    var xmldoc = document.implementation.createDocument('', '', null);
    xmldoc.onload = function () {
      xmldoc.onload = createTable(xmldoc);
    };
    xmldoc.load(url);
  }
}