js将数据绑在dom上,解析为object,怎么弄

JavaScript012

js将数据绑在dom上,解析为object,怎么弄,第1张

try{

if (window.ActiveXObject !== undefined){//兼容IE,注意IE11不能再用window.ActiveXObject或者document.all判断

var xmlDoc= new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async = "false"

xmlDoc.load("topology.xml")

}else if(document.implementation&&document.implementation.createDocument){//兼容火狐

try{

var xmlDoc = document.implementation.createDocument('', '', null)

xmlDoc.async = false

xmlDoc.load("topology.xml")

} catch(e){

var xmlhttp = new window.XMLHttpRequest()

xmlhttp.open("GET","topology.xml",false)

xmlhttp.send(null)

xmlDoc = xmlhttp.responseXML

}

}else{

alert("load data error")

}

}catch(e){

alert(e.message)

}

各常量名称与数值对照表如下:ELEMENT_NODE 1ATTRIBUTE_NODE 2TEXT_NODE 3CDATA_SECTION_NODE 4ENTITY_REFERENCE_NODE 5ENTITY_NODE 6PROCESSING_INSTRCTION_NODE 7COMMENT_NODE 8DOCUMENT_NODE 9DOCUMENT_TYPE_NODE 10DOCUMENT_FRAGMENT_NODE 11NOTATION_NODE 12IE6不支持,不过你可以自定义一个JS对象Node。3.处理特性处理特性可以使用标准的NameNodeMap中的方法:getNamedItem(name) removeNamedItem(name) setNamedItem(node) item(pos)比如:<p id="test">测试</p>假设变量oP是上面的p节点的引用,我们要访问oP的id属性:var sId=oP.attributes.getNamedItem("id").nodeValue这些方法用起来很累赘,所以DOM又定义了三个方法来简化:getAttribute(name) ——返回名称为name的属性的值setAttribute(name,value) ——顾名思义removeAttribute(name) ——顾名思义 上面的例子可以改写为:var sId=oP.getAttribute("name")4.访问指定节点:熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三个方法,不再展开。5.创建和操作节点:(1)创建新节点,一张IE(6.0)和FF对DOM Level1的创建新节点方法支持的对照表:方法IE FFcreateAttribute(name) Y YcreateCDATASection(text) N YcreateComment(text) Y YcreateDocumentFragment() Y YcreateElement(tagName) Y YcreateEntityReference(name) N YcreateProcessingInstruction(target,data) N YcreateTextNode(text) Y Y下面介绍常用的几个方法(2)createElement(),createTextNode(),appendChild()例子:<html><head><title>createElement() Example</title><script type="text/javascript">function createMessage() { var oP = document.createElement("p")var oText = document.createTextNode("Hello World!")oP.appendChild(oText)document.body.appendChild(oP)} </script></head><body ></body></html>在页面载入后,创建节点oP,并创建一个文本节点oText,oText通过appendChild方法附加在oP节点上,为了实际显示出来,将oP节点通过appendChild方法附加在body节点上。此例子将显示Hello World!(3)removeChild(),replaceChild()和insertBefore()从方法名称就知道是干什么的:删除节点,替换节点,插入节点。需要注意的是replaceChild和insertBefore两个参数都是新节点在前,旧节点在后。(4)createDocumentFragment()此方法主要是为了解决大量添加节点时,速度过慢。通过创建一个文档碎片节点,将要添加的新节点附加在此碎片节点上,然后再将文档碎片节点append到body上面,替代多次append到body节点。