快捷目录
写在前面
网上有旧教程使用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)