ajax——dom对xml和html的操作
浏览数：21 /
时间：2015年06月09日
上篇文章说到了dom的基础，dom可以操作xml和html，这次主要写利用dom的api去怎样去操作xml和html文档。
dom操作xml
dom操作xml文档之前必须把xml文档装载到xml dom对象，因此需要两个步骤1.利用javascript装载xml文档。2.dom来操作装载后的xml文档。
利用javascript装载xml文档也可以分为：1.装载同域的xml文件。2.装载一段表示xml字符串。
/*
* 封装IE和firefox类浏览器中装载同域xml文件和xml字符串的方法,返回的是xml对象dom对象中的根元素节点
* @param flag true装载xml的文件，false表达式装载xml字符串
* @param xmldoc flag为false装载xml文件的路径，flag为false表示xml字符串
*/
function loadXML(flag,xmldoc){
if (window.ActiveXObject) {
//IE浏览器
var activexName = ["MSXML2.DOMDocument", "Miscrosoft.XmlDom"];
var xmlObj;
for (var i = 0; i < activexName.length; i++) {
try {
xmlObj = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
if (xmlObj) {
//同步方式装载xml数据
xmlObj.async = false;
if (flag) {
//装在xml文件
xmlObj.load(xmldoc);
} else {
//装载xml的字符串
xmlObj.loadXML(xmldoc);//解析一个 XML 标签字符串来组成该文档
}
//返回根元素节点
return xmlObj.documentElement;
} else {
alert("装载xml文档的对象创建失败。");
return null;
}
} else if (document.implementation.createDocument) { //创建一个新 Document 对象和指定的根元素。
//针对firfox浏览器
var xmlObj;
if (flag) {
//装载xml文件
xmlObj = document.implementation.createDocument("", "", null);//创建一个新 Document 对象和指定的根元素。
if (xmlObj) {
//同步方式装载
xmlObj.async = false;
xmlObj.load(xmldoc);
return xmlObj.documentElement;
}
} else {
//装载xml的字符串
xmlObj = new DOMParser(); //DOMParser 对象解析 XML 文本并返回一个 XML Document 对象
var docRoot = xmlObj.parseFromString(xmldoc, "text/xml");//解析 XML 标记
return docRoot.documentElement;
}
}
alert("装载xml文档的对象创建失败。");
return null;
}
xml文档
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<author>Peter</author>
<name>Hello Ajax</name>
</book>
<book>
<author>Jack</author>
<name>Ajax Puzzle</name>
</book>
</books> dom操作xml文档
function test(){
var rootElement=loadXML(true,"TestBook.xml"); //装载xml文档，并返回xml dom对象的根元素节点
var rootDocument=rootElement.parentNode; //找到父节点
var bookElement=rootDocument.createElement("book");//创建book节点
var textNode=rootDocument.createTextNode("AJAX Hello");
bookElement.appendChild(textNode); //在bookElement后添加文本节点
rootElement.appendChild(bookElement);//在文本节点后添加
var bookElements=rootElement.getElementsByTagName("book"); //返回所有的book节点
alert("");
}
dom操作html
html文档
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="button" value="TestDomApi" onclick="testDomApi()"/>
<div id="div1">123123</div>
<input type="text" id="inputtext"/>
<div id="div2">
456
<div>
789
</div>
</div>
<input type="button" value="textclick" id="clic"/>
</body>
</html>
利用根节点的属性和方法操作html文档，可以创建元素节点，文本节点，元素节点。
//获取根元素节点
var htmlrootElement=document.documentElement;
//获取指定的元素节点
var divNode=document.getElementById("div1");
//获取整个页面的div元素节点
var divNodes=document.getElementsByTagName("div");
//创建元素节点
var newDivNode=document.createElement("div");
//创建文本节点
var newTextNode=document.createTextNode("aaaaaaaa");
利用元素节点的属性和方法操作html文档，可以去操作元素节点的属性。
//返回大写的标签名
var tagName=divNode.tagName;
//根据标签名获取元素节点
var divNode2=document.getElementById("div2");
var divNodes2=document.getElementsByTagName("div");
//操作属性
var inputtext=document.getElementById("inputtext");
var flag=inputtext.hasAttribute("value");//判断是否有这个属性
inputtext.setAttribute("value","textTest");//设置属性
var textValue=inputtext.getAttribute("value");//获取属性值
inputtext.removeAttribute("value");//移除属性值
//另一种属性的操作
inputtext.value="121212";
var textValue2=inputtext.value;
var clic=document.getElementById("clic");
clic.onclick=function(){alert("12")};
利用所有节点都拥有的的属性和方法操作html文档，可以管理html文档的所有节点的。
var divNode2=document.getElementById("div2");
var inputtext=document.getElementById("inputtext");
//返回元素节点上的包含的属性节点
var attributs=inputtext.attributes;
//nodeName nodeValue nodeType
var inputname=inputtext.nodeName;
var nodetype=inputtext.nodeType;
var nodevalue=inputtext.nodeValue;
//返回所有子节点
var childs=divNode2.childNodes;
//获取父节点
var parent=divNode2.parentNode;
//获取第一个节点和最后一个节点
var first=divNode2.firstChild;
var last=divNode2.lastChild;
//获取兄弟节点
var next=divNode2.nextSibling; //上一个兄弟节点
var prev=divNode2.previousSibling;//下一个兄弟节点
//判断是否有子节点
var flag2=divNode2.hasChildNodes();
//追加节点
var new2=document.createElement("div");
var text2=document.createTextNode("insert");
new2.appendChild(text2);
divNode2.insertBefore(new2,divNode2.firstChild); //插入子节点并将子节点移动到第一位
var new3=document.createElement("div");
var text3=document.createTextNode("insert3");
new3.appendChild(text3);
divNode2.insertBefore(new3,null);//插入子节点
divNode2.insertBefore(new3,divNode2.firstChild); //将子节点移动到第一位
//移除节点
var remove=divNode2.removeChild(new3);
//替换节点，用另一个节点替换前节点的一个节点
var text4=document.createTextNode("insert4");
var new4=document.createElement("div");
new4.appendChild(text4);
var replace=divNode2.replaceChild(new4,divNode2.firstChild);
var replace=divNode2.replaceChild(newDivNode,divNode2.firstChild);
//clone节点
var clone1=divNode2.cloneNode(true);//克隆子节点
var clone2=divNode2.cloneNode(false);//不克隆子节点
dom对象对xml文档和html文档的操作，优点是可以在客户端更快速的，更直接的管理文档中的节点。缺点就是在不同的浏览器中对文档的操作和加载存在这差异。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
