JS读取XML文件

---

写在前面

网上有旧教程使用ActiveXObject来读取XML的，但是目前有的浏览器不支持ActiveX控件（比如不是IE内核的浏览器 如chrome等），所以导致无法读取XML，会提示没有load方法。这篇博客使用了XMLHttpRequest来进行读取XML，如果想了解使用ActiveXObject读取XML的可以搜索相关教程，由于读取后的操作方法差不多，这里不再赘述该方法用省略号代替。

---

读取本地XML文件

function loadLocalXML() {
	if (XMLHttpRequest) {
		console.log('使用XMLHttpRequest')
	    var xmlReq = new XMLHttpRequest
	    xmlReq.open("GET", "xml_test.xml", false)
	    xmlReq.send(null)
	    var xmlDoc = xmlReq.responseXML//转为Document对象
	    /*
	    此处执行对该xml的操作，如：
	    获取根：xmlDoc.documentElement
	    根下所有节点：xmlDoc.documentElement.children
	    某节点的值：node.textContent
	    */
	} else if (window.ActiveXObject) {//对于旧浏览器兼容
	    console.log('支持activex')
	    //xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	    //操作...
	} else {
	    console.log('不支持activex')
	    //xmlDoc = document.implementation.createDocument("", "", null);
	    //操作...
	}
}

方法解析：
open(method, url, async)
method：get、post等
url：文件路径
async：异步、同步，false为同步，可简单理解为函数执行完才执行下条语句


send()
方法接受一个可选的参数，其作为请求主体。
如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。

---

XML字符串转XMLDocument对象

function loadXMLString(str) {
	var xmlDoc = null
    if (window.DOMParser){
        var parser = new DOMParser()
        xmlDoc = parser.parseFromString(str,"text/xml")
    } else if(window.ActiveXObject){
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
        xmlDoc.async = false
        xmlDoc.loadXML(str)
    } else {
    	console.log("转换失败")
    }
    //操作Document...
}

---

测试文件xml_test.xml

供大家测试使用

<?xml version="1.0" encoding="utf-8" ?>
<nodes>
	<node>
		<name>节点1</name>
		<enable>false</enable>
	</node>
	<node>
		<name>节点2</name>
		<enable>false</enable>
	</node>
</nodes>

---

操作XMLDocument对象

仅列出一些常用的操作，如遍历、修改、添加属性、删除等。更多操作请查看文档、教程。
为了方便，我们约定root变量为xml根，node变量为xml中某个节点，xmlDoc为读取操作中的Document对象。

DOM根

var root = xmlDoc.documentElement

遍历所有子节点

var children = node.documentElement.children//获取所有子节点
for(let i=0;i<children.length;i++){
	let child = children[i]//某个子节点
	console.log(child.tagName)//标签
	console.log(child.textContent)//若是叶子节点则代表该节点的值
	console.log(child.innerHTML)//节点里的xml原生内容
	//以上属性可被修改
}

为节点添加子节点

let tnode = xmlDoc.createElement("节点标签")
tnode.textContent = "节点值"
node.appendChild(tnode)

为节点添加子属性

node.setAttribute("属性名","属性值")

删除节点

node.remove()//删除自身
node.removeChild(node.children[0])//删除第一个子节点

XMLDocument对象转XML字符串

var str = new XMLSerializer().serializeToString(xmlDoc)
console.log(str)