Javascript操作XML,HTML

来源：互联网发布：怎样在淘宝网开店编辑：程序博客网时间：2024/05/16 11:56

第一部分，XML

Ok,先定义一个xml DOM对象e

1. 属性

e.childNodes 返回下级元素数组

e.firstChild 返回第一个下级元素

e.lastChild 最后一个下级元素

e.nextSibling 同级下一个元素

e.previousSibling 同级上一个元素

e.parentNode 返回父节点

e.nodeValue 当前元素的值,

e.text 当前元素(包括所有下级(递归)的文本，不包括tag,只有各节点的文本

e.xml 当前元素xml文本,包括tag

2.方法

e.selectSingleNode("XPATH"); //查找单个元素, 参数为XPATH

e.selectNodes(“XPATH”); //查找元素,返回数组

e.getElementById("id"); //根据id获得元素

e.getElementsByTagName("tagName"); //根据tag找到的元素数组

e.getAttribute("name"); //得到属性值

e.hasChildNodes(); //是否有下级元素

e.removeChild(element); //删除下级元素

e.appendChild(element); //添加下级元素

e.cloneNode(true); //克隆节点

e.replaceChild(newNode,oldNode);

3.创建xml DOM对象

3.1 XMLHTTP

//XMLHTTP对象

var xmlHttp = ….

//用responseXML返回xml DOM对象，responseText返回文本

var e=xmlHttp.responseXML;

3.2 IE下将字符串转为DOM对象

//创建DOM对象

var xmlDoc = new ActiveXObject("MSXML.DOMDocument");

var xmlString=”<book><title>ajax</title><author>xiaoluo</author></book>”;

//载入字符串

xmlDoc.loadXML(xmlString);

//根元素

var root = xmlDoc.documentElement;

/*也可以加载外部文件

var xmlFile=”c:/book.xml”);

xmlDoc.load(xmlFile);

3.3 Firefox下将字符串转为DOM对象

//创建DOM对象

var xmlDoc = document.implementation.createDocument("", "doc", null);

var xmlString=”<book><title>ajax</title><author>xiaoluo</author></book>”;

//将字符串创建为对象

xmlDoc.loadXML(xmlString);

//根元素

var root = xmlDoc.documentElement;

/*也可以加载外部文件

var xmlFile=”c:/book.xml”);

xmlDoc.load(xmlFile);

4.举例

Test.htm:

<html>

<head>

function test(){

//创建DOM对象

var xmlDoc = new ActiveXObject("MSXML.DOMDocument");

var xmlString="<book id='007'><title>ajax</title><author>xiaoluo</author></book>";

//将字符串创建为对象

xmlDoc.loadXML(xmlString);

//根元素

var root=xmlDoc.documentElement;

//到root的值

alert(root.xml); //结果:<book id='007'><title>ajax</title><author>xiaoluo</author></book>

alert(root.text); //结果:ajaxxiaoluo,可以看到，区别是tag没有了，只有所有的文本

alert(root.nodeValue);//结果;null

//得到book的id属性

var att=root.getAttribute("id");

alert(att); //结果:007

//下级元素的个数

var length=root.childNodes.length;

alert(length); //结果:2

//第一个下级元素

var title=root.childNodes[0];

alert(title.nodeValue); //结果:ajax

alert(title.text); //结果:ajax

//第二种方式得到第一个下级元素

var title2 = root.firstChild;

alert(title2.nodeValue); //结果:ajax

alert(title2.text); //结果:ajax

//查找title节点,返回数组，这里取第一个

var title3=root.selectNodes("title")[0]; //从root所在book节点往下看,全路径为title,也可以用任意路径selectNodes("//title");

alert(title3.text); //结果:ajax

//查找单个的title节点

var title4=root.selectSingleNode("title");//也可用任意路径//title;

alert(title4.text); //结果:ajax

//查找title节点的第三种方式,返回数组，这里取第一个

var title5=root.getElementsByTagName("title")[0];

alert(title5.text); //结果:ajax

//得到父节点

var root2=title.parentNode;

alert(root2.xml); //结果:<book id='007'><title>ajax</title><author>xiaoluo</author></book>

//替换节点author,这里用title节点来替换

var oldNode=root.childNodes[1];//得到author节点

var newNode=title.cloneNode(true); //克隆节点title

root.replaceChild(newNode,oldNode);

alert(root.xml);//结果:<book id='007'><title>ajax</title><title>ajax</title></book>

//增加一个节点

var addNode=title.cloneNode(true);

root.appendChild(addNode);

alert(root.xml);//结果:<book id='007'><title>ajax</title><title>ajax</title><title>ajax</title></book>

//删除一个节点

var removeNode=root.childNodes[2];

root.removeChild(removeNode);

alert(root.xml);

}

</script>

</head>

<body>

</body>

</html>