ajax——dom对xml和html的操作
上篇文章说到了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文档的操作,可以在客户端更快速的,更直接的管理文档中的节点。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。