js操作xml与html详解
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给大家介绍js操作xml与html的相关操作技巧，有需要了解的同学可进入参考参考。...
|
一 什么是xml dom
•XML DOM 定义了访问和处理 XML 文档的标准方法。
•XML DOM 是用于获取、更改、添加或删除 XML 元素的标准
二 关于节点的概念
•整个文档是一个文档节点
•每个 XML 标签是一个元素节点
•包含在 XML 元素中的文本是文本节点
•每一个 XML 属性是一个属性节点
•注释属于注释节点
三 对xml进行解析
| 代码如下 |
复制代码 |
对xml进行解析（一）ie浏览器
•xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
•xmlDoc.async="false";
•xmlDoc.load("books.xml");
对xml进行解析（二）
•l xmlDoc=document.implementation.createDocument();
•xmlDoc.async="false";
•xmlDoc.load("books.xml");
//以下这种方式适用于IE浏览器
//实例化xmldom对象
var xmlDoc=new ActiveXObject('Microsoft.XMLDOM');
//关闭异步加载模式
xmlDoc.async=false;
//加载xml文件，读取里面的数据
xmlDoc.load('demo14.xml');*/
//以下这种方式适用于非IE浏览器
/*var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load('demo14.xml');*/
alert(xmlDoc);
//最终我们得出结论：
//在不同的浏览器下实例化xmldom的方式不同
|
四 封装
由于客户端使用的浏览器是未知的，所以我们写出具有兼容性的代码，也就是说：客户端浏览器使用哪种，代码就可以创建出相应的类对象
我们把这些代码封装到Public.js
| 代码如下 |
复制代码 |
function createXMLDocument(file){
var str=window.navigator.userAgent;
var xmlDoc;
if(str.indexOf('MSIE')>0){
xmlDoc=new ActiveXObject('Microsoft.XMLDOM');
}
else{
xmlDoc=document.implementation.createDocument("","",null);
}
xmlDoc.async=false;
xmlDoc.load(file);
return xmlDoc;
}
|
调用代码：
五 获取节点
•nodeList getElementsByTagName(name)
通过节点（标签）名获取节点
返回值为一个节点组数
nodeList：节点数组
length:元素个数
六 常用属性
•nodeName ：节点名称
•nodeValue ：节点值 <p>商品</p>
•parentNode ：父节点
•childNodes ：子节点列表
•attributes ：属性节点列表
•firstChild ：第一个子节点
•lastChild ：最后一个子节点
•nextSibling ：下一个平辈节点
•previousSibling ：上一个平辈节点
•documentElement ：根节点
| 代码如下 |
复制代码 |
|
var xmlDoc=createXMLDocument('demo14.xml');
//查找xml文档中的person节点
var persons=xmlDoc.getElementsByTagName("person");
document.write('共有'+persons.length+'个人<br>');
document.write(persons[0].nodeName+'<br>');
//第1个人.第1个子节点.第1人子节点(文本节点).nodeValue
document.write(persons[0].childNodes[0].childNodes[0].nodeValue+'<br>');
document.write(persons[0].parentNode.nodeName+'<br>');
document.write(persons[0].attributes[0].nodeValue+'<br>');
document.write(persons[0].firstChild.nodeName+'<br>');
document.write(persons[0].lastChild.nodeName+'<br>');
document.write(persons[0].firstChild.nextSibling.nodeName+'<br>');
document.write(persons[0].lastChild.previousSibling.nodeName+'<br>');
document.write(xmlDoc.documentElement.nodeName+'<br>');
|
例题：通过以上的知识点完成对一个xml文档的遍历
| 代码如下 |
复制代码 |
var xmlDoc=createXMLDocument('demo14.xml');
var persons=xmlDoc.getElementsByTagName('person');
var count=persons.length; //取人数
document.write('共有'+count+'个人<br>');
for(var i=0;i<count;i++){
document.write('第'+(i+1)+'个人的信息为：');
document.write('id:'+persons[i].attributes[0].nodeValue);
document.write(persons[i].childNodes[0].childNodes[0].nodeValue);
document.write(persons[i].childNodes[1].childNodes[0].nodeValue);
document.write('<br>');
} |
七 常用方法
1. 添加节点
| 代码如下 |
复制代码 |
|
createElement(tagName); 创建一个元素节点
createAttribute(name); 创建一个属性节点
createTextNode(text) 创建一个文本节点
appendChild(newChild); 添加子节点（元素节点和文本节点）
setAttributeNode (newAttr)添加属性节点
var xmlDoc=createXMLDocument('demo14.xml');
var person=xmlDoc.createElement('person');
var name=xmlDoc.createElement('name');
var age=xmlDoc.createElement('age');
var nameValue=xmlDoc.createTextNode('黄六');
var ageValue=xmlDoc.createTextNode('30');
var id=xmlDoc.createAttribute('id');
var value=xmlDoc.createTextNode('s105');
id.appendChild(value);
name.appendChild(nameValue);
age.appendChild(ageValue);
person.appendChild(name);
person.appendChild(age);
person.setAttributeNode(id);
xmlDoc.documentElement.replaceChild(person,xmlDoc.documentElement.lastChild);
persons=xmlDoc.getElementsByTagName('person');
var count=persons.length; //取人数
document.write('共有'+count+'个人<br>');
for(var i=0;i<count;i++){
document.write('第'+(i+1)+'个人的信息为：');
document.write('id:'+persons[i].attributes[0].nodeValue);
document.write(persons[i].childNodes[0].childNodes[0].nodeValue);
document.write(persons[i].childNodes[1].childNodes[0].nodeValue);
document.write('<br>');
}
|
2. 删除节点
| 代码如下 |
复制代码 |
|
removeChild(oldChild)
|
3. 替换节点
| 代码如下 |
复制代码 |
replaceChild(newChild,oldChild)；
|
newChild：新节点
oldChild：原节点
| 代码如下 |
复制代码 |
var xmlDoc=createXMLDocument('demo14.xml');
var person=xmlDoc.createElement('person');
var name=xmlDoc.createElement('name');
var age=xmlDoc.createElement('age');
var nameValue=xmlDoc.createTextNode('黄六');
var ageValue=xmlDoc.createTextNode('30');
var id=xmlDoc.createAttribute('id');
var value=xmlDoc.createTextNode('s105');
id.appendChild(value);
name.appendChild(nameValue);
age.appendChild(ageValue);
person.appendChild(name);
person.appendChild(age);
person.setAttributeNode(id);
xmlDoc.documentElement.replaceChild(person,xmlDoc.documentElement.lastChild); |
4.克隆节点
cloneNode(true)
true：表示复制节点的子节点以及节点的值
5. removeAttribute(name) |
