1. 动机 ?
jQuery 源码分析时,不小心撞上了!
图1-1:jQuery.parseXML 源码
2. DOMParser
The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document. https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
2.1. API:
let domparser = new DOMParser();
let doc = domparser.parseFromString(string, mimeType);
// Return:
// Either Document or XMLDocument
// depending on the mimeType argument.
2.2. 浏览器兼容性:
2.3. 示例:
XML:
<?xml version="1.0"?>
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
<description>An in-depth look at creating applications
with XML.</description>
</book>
<book id="bk102">
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
<description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
</book>
<book id="bk103">
<author>Corets, Eva</author>
<title>Maeve Ascendant</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-11-17</publish_date>
<description>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</description>
</book>
<book id="bk104">
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-03-10</publish_date>
<description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
</book>
<book id="bk105">
<author>Corets, Eva</author>
<title>The Sundered Grail</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-09-10</publish_date>
<description>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</description>
</book>
<book id="bk106">
<author>Randall, Cynthia</author>
<title>Lover Birds</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-09-02</publish_date>
<description>When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</description>
</book>
<book id="bk107">
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-11-02</publish_date>
<description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
</book>
<book id="bk108">
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<genre>Horror</genre>
<price>4.95</price>
<publish_date>2000-12-06</publish_date>
<description>An anthology of horror stories about roaches,
centipedes, scorpions and other insects.</description>
</book>
<book id="bk109">
<author>Kress, Peter</author>
<title>Paradox Lost</title>
<genre>Science Fiction</genre>
<price>6.95</price>
<publish_date>2000-11-02</publish_date>
<description>After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.</description>
</book>
<book id="bk110">
<author>O'Brien, Tim</author>
<title>Microsoft .NET: The Programming Bible</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-09</publish_date>
<description>Microsoft's .NET initiative is explored in
detail in this deep programmer's reference.</description>
</book>
<book id="bk111">
<author>O'Brien, Tim</author>
<title>MSXML3: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-01</publish_date>
<description>The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.</description>
</book>
<book id="bk112">
<author>Galos, Mike</author>
<title>Visual Studio 7: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
<description>Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.</description>
</book>
</catalog>
代码示例:
function travserse(nodes, callback, level=0){
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
callback(node, level);
travserse(node.childNodes, callback, level+1);
}
}
const xml = `...`;
// 清理掉多余的空格、换行符
const xmlNoWhiteChars = xml.replace(/\s*(?=<)|(?<=<)\s*|(?:\n|\r\n)/g, "");
// 解析为 XMLDocument
const parser = new DOMParser();
const xmldoc = parser.parseFromString(xmlNoWhiteChars, "text/xml");
// 遍历 XMLDocument
travserse(xmldoc.childNodes, function(node, level){
console.log(`${(new Array(level*4)).join(" ")}${node.nodeName}(${node.nodeType}) - ${node.nodeValue}`);
})
运行结果:
2. Microsoft.XMLDOM
代码示例:
function travserse(nodes, callback, level){
level = level || 0;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
callback(node, level);
travserse(node.childNodes, callback, level+1);
}
}
// 解析为 XMLDocument
var xmldoc = new window.ActiveXObject( "Microsoft.XMLDOM" );
xmldoc.async = "false";
xmldoc.loadXML( xml );
// 遍历 XMLDocument
travserse(xmldoc.childNodes, function(node, level){
console.log(
(new Array(level*4)).join(" ") +
node.nodeName +
"(" + node.nodeType + ") - " +
node.nodeValue
);
})
运行结果:
参考:
jquery-3.4.1.js 源码 caniuse: https://www.caniuse.com/#search=DOMParser msdn: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser w3c: https://w3c.github.io/DOM-Parsing/