1、XML 的DOM组成
XML的DOM:一切都是由 文档 Document 和 节点node组成;
节点node包含:元素Element,属性 Attr,文本 Text。
在解析过程中辅助使用 NodeList(用在节点-元素 集合上) NamedNodeMap(用
在属性集合上)
2、解析流程
3、客户端解析
** 事例XML文件内容
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book readBook="_000002 _000003">
<name>《如何学习DTD》</name>
<author>张三</author>
<author>李四</author>
<price>23.2</price>
<press>XX出版设</press>
<no ISBN="_000001" typeNo="tp-312"/>
<other>
<name>测试</name>
</other>
</book>
<book readBook="_000003">
<name>《如何学习JAVA》</name>
<author>王二</author>
<price>23.2</price>
<press>XX出版设</press>
<no ISBN="_000002" typeNo="tp-312"/>
</book>
<book>
<name>《如何学习HTML》</name>
<author>麻子</author>
<price>23.2</price>
<press>XX出版设</press>
<no ISBN="_000003" typeNo="tp-312"/>
</book>
</books>
//Chrome浏览器有很强的安全性,不允许本地操作,可以使用下面的方式进行加载
<script type="text/javascript">
var root;
try{
var doc = document.implementation.createDocument("", "", null);
doc.async = false;//设置xml文档的加载方式(同步、异步),默认是异步
doc.load("book.xml");
root = doc.documentElement
}catch (e){
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET","book.xml",false);
xmlhttp.send(null);
root = xmlhttp.responseXML.documentElement;
}
console.log(root.nodeName);
</script>
A、节点 的 解析流程
<script type="text/javascript">
/* 早期的IE浏览创建XML DOM 对象的方式 */
/* var doc =new ActiveXObject("Microsoft.XMLDOM"); */
/* 对除IE浏览器提供的创建XML DOM 对象的方式 */
/* doc 为创建出来的 XML DOM 对象 ,document为HTML的文档对象 */
var doc = document.implementation.createDocument("", "", null);
/* 建议在加载之前写一个属性设置 */
doc.async = false;//设置xml文档的加载方式(同步、异步),默认是异步
/* 加载XML文件 */
doc.load("book.xml");
/* 加载完毕程序继续 */
/* 获取根元素 使用提供的固定获取方法*/
var root = doc.documentElement;
/* 输出节点名称--根节点也是一个节点 */
console.log(root.nodeName);
/* 获取子节点的nodeList 集合 */
var elements = root.childNodes;
//console.log(elements);
/* 循环节点 */
for(var i=0;i<elements.length;i++){
var elem = elements[i];
/* console.log(elem); */
/* 判断循环到的节点是node还是文本 */
var elem = elements[i];
/*
因为在实际的XML 文件解析的使用,同级的节点存在多个,
需要分别对不同的节点进行解析,所以我们一般会在添加节点的匹配条件
*/
if(elem.nodeType==1&&elem.nodeName=="book"){
//console.log(elem);
/* 获取节点中的子节点集合 */
var subElems = elem.childNodes;
/* 循环判断输出 */
for(var i=0;i<subElems.length;i++){
if(subElems[i].nodeType==1&&subElems[i].nodeName=="name"){
/* 在XML和 HTML中认为 文本 也是一个节点 */
//console.log(subElems[i].nodeValue);
/* 节点中的值,可以通过下面三种方式进行获取 */
//console.log(subElems[i].childNodes[0].nodeValue);
//console.log(subElems[i].firstChild.nodeValue);
console.log(subElems[i].firstChild.data);
}else if(subElems[i].nodeType==1&&subElems[i].nodeName=="author"){
console.log(subElems[i]);
}
}
}
}
console.log("---------------------------------");
/* 通过 .getElementsByTagName()解析 */
var elems = root.getElementsByTagName("book");
/*
在XML解析是不适合使用 for in 循环
for in 循环在循环时会将方法和属性一起循环出来
实际解析时我们只需要值
*/
/* for(var index in elems){
console.log(elems[index])
if(elems[index].nodeType==1){
var childElems = elems[index].getElementsByTagName("name");
console.log(childElems[0].firstChild.nodeValue);
}
} */
for(var i=0;i<elems.length;i++){
console.log(elems[i]);
//.getElementsByTagName 会获取到全部的子孙元素中名字为name的所有标签
var childElems = elems[i].getElementsByTagName("name");
//console.log(childElems[0].firstChild.nodeValue);
/* 取出所有的节点名称 */
for(var j=0;j<childElems.length;j++){
/*
通过.parentNode 方法获取父节点
判断是否为当前节点的父节点
*/
if(childElems[j].parentNode==elems[i]){
console.log(childElems[j].firstChild.nodeValue);
}
}
}
</script>
B、属性的解析
<script type="text/javascript">
var doc = document.implementation.createDocument("", "", null);
doc.async = false;//设置xml文档的加载方式(同步、异步),默认是异步
doc.load("book.xml");
var root = doc.documentElement;
/* 获取book 节点 */
var eleBooks = root.getElementsByTagName("book");
/* 获取所有 book 节点 readBook 属性 */
for(var i=0;i<eleBooks.length;i++){
var attr = eleBooks[i].getAttribute("readBook");
/* 没有该属性的时候 返回的是null值 */
console.log(attr);
}
console.log("--------------------")
/* 获取所有 no 节点的所有属性 */
var eleNo = root.getElementsByTagName("no");
for(var i=0;i<eleNo.length;i++){
/* 返回的是 namedNodeName,实际中 在JS中集合都是数组表现形式 */
var attrs = eleNo[i].attributes;
for(var j=0;j<attrs.length;j++){
//console.log(attrs[j].nodeName+":"+attrs[j].nodeValue);
console.log(attrs[j].name+":"+attrs[j].value);
}
}
</script>
*****综合案例
xml文件
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student id="00001">
<name>张三</name>
<age>20</age>
<sex>男</sex>
</student>
<student id="00002">
<name>李四</name>
<age>22</age>
<sex>男</sex>
</student>
<student id="00003">
<name>芳芳</name>
<age>20</age>
<sex>女</sex>
</student>
<student id="00004">
<name>小丽</name>
<age>18</age>
<sex>女</sex>
</student>
</students>
解析显示
<!DOCTYPE html>
<html>
<head>
<title>05.html</title>
<meta charset="utf-8">
<style type="text/css">
table {
width: 800px;
border-collapse: collapse;
}
td{
border: 1px solid black;
padding: 5px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function(){
var doc = document.implementation.createDocument("", "", null);
doc.async=false;
doc.load("students.xml");
var root = doc.documentElement;
var students = root.getElementsByTagName("student");
var tbObj = $("#tb");
console.log(tbObj);
for(var i=0;i<students.length;i++){
var id = students[i].getAttribute("id");
var name = students[i].getElementsByTagName("name")[0]
.firstChild.nodeValue;
var age = students[i].getElementsByTagName("age")[0]
.firstChild.nodeValue;
var sex = students[i].getElementsByTagName("sex")[0]
.firstChild.nodeValue;
var tr = $("<tr>");
$("<td>").html(id).appendTo(tr);
$("<td>").html(name).appendTo(tr);
$("<td>").html(age).appendTo(tr);
$("<td>").html(sex).appendTo(tr);
tbObj.append(tr);
}
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
</html>
4、客户端写操作
<!DOCTYPE html>
<html>
<head>
<title>06.html</title>
<meta charset="utf-8">
<script type="text/javascript">
var doc = document.implementation.createDocument("", "", null);
//1、创建根节点
var root = doc.createElement("Root");
//只有将节点添加到doc中才是根节点。但XML中有且仅有一个根节点
doc.appendChild(root);
//2、创建子节点
var sub = doc.createElement("sub");
root.appendChild(sub);
//3、为字节点添加属性
sub.setAttribute("id","0001");
//4、创建孙节点
var elem = doc.createElement("name");
sub.appendChild(elem);
//5、为孙节点添加文本内容
var txt = doc.createTextNode("tom");
elem.appendChild(txt);
//因为 W3Cshool 提供个展示XML文件的 .xml方法只能IE使用
//所以MAC 系统 目前只能通过读取的方式进行展示验证
console.log(doc);
</script>
</head>
<body>
</body>
</html>