1.DOM2 DOM3概述
(1)DOM1主要定义了HTML和XML的底层结构,而DOM2 DOM3则在这个结构的基础上引入了更多的交互能力,目的是扩展DOM API,以满足操作XML的所有需求,同时提供更好的差错处理和特性检测能力。
(2)DOM2级并没有引入新类型,只是在DOM1级的基础上增加了新属性和新方法来增强既有类型。DOM3既增强了现有类型,又引入了新类型。
2.DOM2和DOM3的变化
(1)针对xml命令空间的变化
一般一个文档中混合使用了两种语言的情况下, 针对命名空间的DOM API才有效。实例代码如下:
<html xmlns='http://www.w3.org/1999/xhtml'> <head><title>this is head</title></head> <body> <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="width:100%; height:100%" οnclick="getElementInfo()"> <s:rect x="0" y="0" width="100" height="100" style="fill:red" /> </s:svg> <script type='text/javascript'><![CDATA[ function getElementInfo(){ var head=document.getElementsByTagName("head")[0]; alert(head.localName+""); alert(head.namespaceURI+""); alert(head.prefix+"");//在xml中使用document.write是没有效果的 alert(document.body.isDefaultNamespace("http://www.w3.org/1999/xhtml")); var svg=document.getElementsByTagName("rect")[0];//注意此处必须是rect不是s:rect console.log(svg.lookupNamespaceURI('s'));//
console.log(svg.lookupPrefix("http://www.w3.org/2000/svg"));//s}]]></script></body></html>http://www.w3.org/2000/svg
注意:
1)该文档是xml文档,同时在xml文档中写js代码,必须用<![CDATA[
//JS CODE
]]>
2)localName和tagName的值是一样的
3)通过getElementsByTagName或去元素时,传入的tag参数是不带前缀的
(2)针对不同类型节点的变化
1)针对document的变化
createElementNS(nameSpace,tagname)//使用给定的tagname创建一个属于命名空间的新元素
createAttributeNS和上面的类似,只不过是创建属性节点。getElementsByTagNameNS(namespace,tagname)和getElementsByTagName类似
2)Element类型的变化
也新增了一个getelementsByTagName的方法,同时新增的还有element对应的attribute的方法,例如,getAttributeNS,getAttributeNodeNS,removeAttributeNS,setAttributeNS,setAttributeNodeNS。
另外还新增了一个importNode方法,该方法和appendChild类似,但是importNode的参数和调用的节点可以不属于同一份文档。
(4)针对node类型的变化
1)新增了isSupported,和document.implementation类似检查一个元素是否支持新增的特性。
2)isSameNode和isEqualNode,前者是指两个是否指同一的node,后者是指两个node的类型、属性、子节点相同,就返回true。
3)DOM节点添加额外数据引入新方法,setUserData(key,value,function(operation,key,value,src,dest){}),第三个参数是一个function,有五个参数,其中的operation有三个取值,1.表示复制,2表示导入,3表示删除,4表示重命名,四个取值,当对该节点进行这些操作时就会执行该function,但是发现了一个bug,只有复制才会引起function执行,而删除并没有触发该分支执行
<body> <p id='testp'></p> <input type='button' value="deletePP" οnclick="deletepp()"/> <input type='button' value="copyPP" οnclick="copypp()"/> <script type="text/javascript"> var pp=document.getElementById("testp"); if(typeof pp.setUserData=='function') pp.setUserData("name",'danzhang',function(operation,key,value,src,dest){ if(operation==1){//如果是复制 dest.setUserData(key,value,function(){}); } if(operation==3){//一直没有被触发 console.log(key+":"+value+" has been deleted"); } }); function deletepp(){ var node=document.body.removeChild(document.getElementById("testp")); node=null; } function copypp(){ var cpp=document.getElementById("testp").cloneNode(true); alert(cpp.getUserData("name")); } </script> </body>
(3)针对框架和视图的变化
新增了defaultView来指向当前的窗口或者框架,低版本ie不支持,但是有一个类似的parentWindow。
为document.implementation新增了一个createDocumentType和createDocument方法,用于创建文档模型和文档,前一个方法的返回结果通常作为第二个方法调用的参数。
document.createHTMLDocument是creatDocument的特列,只能用于创建一个html文档,传入一个文档名就可以了。
可以通过属性获取框架里面的内容,大多数都是iframeelement.contentDocument,低版本的ie,iframeelement.contentWindow.document
2 样式
1)元素.style.样式,注意float,不是style.float,在非ie中是style.cssFloat,在ie中是styleFloat