Chrome如何使用JavaScript解析XML？

在现代Web开发中，解析XML文件是一个常见需求，JavaScript提供了多种方法来解析XML文件，不同的浏览器可能有不同的实现方式，本文将详细介绍如何在Chrome浏览器中使用JavaScript解析XML文件，包括本地解析和上传文件的解析。

本地解析XML文件

获取本地文件路径

我们需要获取本地上传的文件路径，通过HTML中的<input>元素，用户可以选择一个文件，然后使用JavaScript获取该文件对象：

<input class="input" ref="file" type="file" @change="handleFileChange" />

在JavaScript中，我们可以通过以下代码获取文件路径：

const getUploadUrl = function(file) {
    let url = "";
    if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    }
    return url; // 返回这样的一串地址 blob:http://www.xxxx.com/2c230fa5-ecc4-4314-ae7c-c39eaa66a945
};

解析文件并获取XML对象

获取到文件路径后，我们可以使用XMLHttpRequest对象来解析XML文件：

const loadXML = function(xmlFile) {
    var xmlDoc;
    if (window.ActiveXObject) {
        // IE浏览器
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.load(xmlFile);
    } else if (document.implementation && document.implementation.createDocument) {
        var xmlhttp = new window.XMLHttpRequest();
        xmlhttp.open("GET", xmlFile, false);
        xmlhttp.send(null);
        xmlDoc = xmlhttp.responseXML;
    } else {
        xmlDoc = null;
    }
    return xmlDoc; // 返回的是一个document的对象
};

将document对象转换为字符串

为了方便查看或处理XML内容，我们可以将document对象转换为字符串：

let url = getUploadUrl(file); // 文件对象
let xml = loadXML(url);
let text = new XMLSerializer().serializeToString(xml); // 将text赋值给textarea阔以了

解决乱码问题

有时候解析XML文件时会遇到乱码问题，这通常是由于文件编码格式不匹配导致的，解决方法是使用Notepad++等工具将文件转换为UTF-8编码格式，然后另存为一份新的文件。

上传文件解析

对于上传的文件，我们同样可以使用上述方法进行解析，需要注意的是，Chrome默认禁止访问本地文件，需要增加启动参数--allow-file-access-from-files。

兼容各浏览器的解析方法

不同浏览器对XML的解析方式有所不同，以下是兼容各个主流浏览器的解析方法：

function parseXMLDOM() {
    var _browserType = "";
    var _xmlFile = "";
    var _XmlDom = null;
    return {
        "getBrowserType": function() {
            return _browserType;
        },
        "setBrowserType": function(browserType) {
            _browserType = browserType;
        },
        "getXmlFile": function() {
            return _xmlFile;
        },
        "setXmlFile": function(xmlFile) {
            _xmlFile = xmlFile;
        },
        "getXmlDom": function() {
            return _XmlDom;
        },
        "setXmlDom": function(XmlDom) {
            _XmlDom = XmlDom;
        },
        "getBrowserType": function() {
            var browserType = "";
            if (navigator.userAgent.indexOf("MSIE") != -1) {
                browserType = "IE";
            } else if (navigator.userAgent.indexOf("Chrome") != -1) {
                browserType = "Chrome";
            } else if (navigator.userAgent.indexOf("Firefox") != -1) {
                browserType = "Firefox";
            }
            return browserType;
        },
        "createXmlDom": function(xmlDom) {
            if (this.getBrowserType() == "IE") { // IE浏览器
                xmlDom = new ActiveXObject('Microsoft.XMLDOM');
                xmlDom.async = false;
                xmlDom.load(this.getXmlFile());
            } else {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", this.getXmlFile(), false);
                xmlhttp.send(null);
                xmlDom = xmlhttp.responseXML;
            }
            return xmlDom;
        },
        "parseXMLDOMInfo": function() {
            var xmlDom = this.getXmlDom();
            if (this.getBrowserType() == "IE") {
                var bookObj = xmlDom.selectNodes("books/book");
                if (typeof(bookObj) != "undefined") {
                    var strHtml = "";
                    for (var i = 0; i < bookObj.length; i++) {
                        strHtml += bookObj[i].selectSingleNode("isbn").text;
                        strHtml += " ";
                        strHtml += bookObj[i].selectSingleNode("price").text;
                        strHtml += " ";
                        strHtml += bookObj[i].selectSingleNode("title").text;
                        if (i != bookObj.length 1) {
                            strHtml += "<br/>";
                        }
                    }
                }
            } else {
                var book = xmlDom.getElementsByTagName("book");
                var strHtml = "";
                for (var i = 0; i < book.length; i++) {
                    strHtml += book[i].getElementsByTagName("isbn")[0].textContent;
                    strHtml += " ";
                    strHtml += " ";
                    strHtml += book[i].getElementsByTagName("price")[0].textContent;
                    strHtml += " ";
                    strHtml += book[i].getElementsByTagName("title")[0].textContent;
                    if (i != book.length 1) {
                        strHtml += "<br/>";
                    }
                }
            }
            document.getElementById("msg").innerHTML = strHtml;
        }
    }
}

使用jQuery插件jParse解析XML

jParse是一个轻量级的jQuery插件，可以方便地解析通过jQuery.ajax方法加载的XML文件，首先需要在HTML中导入jQuery库和jParse插件：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JS解析XML文档中的数据(兼容所有浏览器)</title>
    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jParse.js"></script>
</head>
<body>
    <span id="jparse-meta"><a href="#" onclick="parse_xml()">点击这里查看</a></span> Denis 一共有 <span id="item-count">几</span> 个站点。</p>  <div id="ajax-cont"></div>
    <script language="javascript" type="text/javascript">
        function start(){ jQuery('#jparse-meta').html('<span style="color:red;">载入 XML ....</span>'); } 
        function finish(){ jQuery('#jparse-meta').remove(); } 
        function parse_xml(){ $('#ajax-cont').jParse({ ajaxOpts: {url: 'http://blog.wpjam.com/wp-content/uploads/sites.xml'}, elementTag: ['name', 'link', 'description'], count: '#item-count', output: '<p><strong><a href="jpet1">jpet0</a></strong><br />jpet2</p>', precallback: start, callback: finish }); }; jQuery(document).ready(function(){ parse_xml(); }); </script>
</body>
</html>

常见问题解答（FAQs）

Q1: Chrome如何解析本地XML文件？

A1: Chrome默认禁止访问本地文件，需要通过启动参数--allow-file-access-from-files来允许访问，可以使用XMLHttpRequest对象来解析本地XML文件，具体步骤如下：

1、获取本地文件路径。