使用 DOMParser 解析 XML 文件

大家可能偶尔会有碰到在 Web 端处理 XML 的文件 Case. 之前大家可能第一时间想的是正则表达式。我们经常用它来进行标签或者属性的匹配。

但是今天会给大家带来一种全新的思路。我们知道 XHTML 是 XML 的子集。而且很早 HTML 就开始自己自定义的标签了。因此我们可以尝试借助 DOM Node 的思想把我们的 XML 文件字符串来进行 Dom 节点的转换。

var parser, xmlDoc;
var text = `<?xml version="1.0" encoding="UTF-8"?>
<!--Generated with https://github.com/google/shaka-packager version v1.5.1-c540e5a-release-->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xlink="http://www.w3.org/1999/xlink" xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd" xmlns:cenc="urn:mpeg:cenc:2013" minBufferTime="PT2S" type="static" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011" mediaPresentationDuration="PT888.0640258789062S">
  <Period id="0">
    <AdaptationSet id="0" contentType="video" width="2048" height="872" frameRate="24/1" subsegmentAlignment="true" par="40:17">
      <Representation id="0" bandwidth="2355086" codecs="avc1.640028" mimeType="video/mp4" sar="1:1">
        <BaseURL>sintel_video.mp4</BaseURL>
        <SegmentBase indexRange="820-1751" timescale="24">
          <Initialization range="0-819"/>
        </SegmentBase>
      </Representation>
    </AdaptationSet>
    <AdaptationSet id="1" contentType="audio" lang="en" subsegmentAlignment="true">
      <Representation id="1" bandwidth="442355" codecs="mp4a.40.2" mimeType="audio/mp4" audioSamplingRate="48000">
        <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="6"/>
        <BaseURL>sintel_audio.mp4</BaseURL>
        <SegmentBase indexRange="749-1848" timescale="48000">
          <Initialization range="0-748"/>
        </SegmentBase>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>
`;

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
console.log(xmlDoc);
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("BaseURL")[0].childNodes[0].nodeValue;

DomParser:可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。在很早之前你还可以尝试 XMLHttpRequest。

当然如果我们拿到了这个 Dom 对象，就像代码中的，我们可以直接进行 Dom 节点查询。

xmlDoc.getElementsByTagName("BaseURL")[0].childNodes[0].nodeValue;