您的位置：首页 > Web前端 > CSS

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

2014-05-11 22:06 555 查看
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%" onclick="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/svg
console.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" onclick="deletepp()"/><input type='button' value="copyPP" onclick="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.document2 样式1）元素.style.样式，注意float，不是style.float，在非ie中是style.cssFloat,在ie中是styleFloat         

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航