js学习小结（十）2014.5.10.11(DOM2和DOM3的变化，操作样式的DOM API（1）)

本文链接：https://blog.csdn.net/danzhang1010/article/details/25560359

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'));//http://www.w3.org/2000/svgconsole.log(svg.lookupPrefix("http://www.w3.org/2000/svg"));//s}]]></script></body></html>





注意:
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