搜尋

首頁 >web前端 >js教程 >DOM屬性方法及相容性問題詳解

DOM屬性方法及相容性問題詳解

巴扎黑
巴扎黑原創
2017-08-09 14:05:411308瀏覽

DOM中Element類型：（以下所有的屬性只是唯讀屬性）

一、node.nodeType    以數字值傳回指定節點的節點類型。

存在12 種不同的節點類型，其中可能會有不同節點類型的子節點(前三個為重要)：
DOM屬性方法及相容性問題詳解

if(ul .nodeType == Node.ELEMENT_NODE){
    alert(‘Node is an element’);  
 }  
上述程式碼，在標準瀏覽器下可以正常的運行，在非標準的瀏覽器（ie8之下）下不能正常的運行。
解決辦法：
if(ul.nodeType ==1){   alert(‘Node is an element’);  } 使用nodeType屬性與數字比較。

二、nodeName值為元素類型的標籤名稱例如ul、 p等。
nodeValue值為null。
parentNode可能是document或Element，子節點可能。 Element,Text,Comment,ProcessingInstruction, CDATASection, EntityReference。

操作特性

一、HTML元素屬性的方式獲得特性

所有HTML元素透過HTMLElement類型或它的子類型（HTMLDivElement 、HTMLImageElement ）表示，HTMLElement類型是繼承自Element類型，只不過度加了一些特有的屬性，切子類型也有自己特有的屬性和方法，例如img有src，title等特有屬性。特別注意的是由於class是js中的關鍵字，要使用className來取得class 的值。

對於獲取和設定方式以及注意地地方在二三中透過對比的方式表述。

二、element.getAttribute(attributename)傳回指定屬性名稱的屬性值。

這個方法傳入一個屬性名的字串，不區分大小寫。
例如ul.getAttribute(‘class’);由於參數為字串，所以可以使用class不必使用className。透過這個方法可以獲得自訂屬性，在一些含有非關鍵字中使用的字元的屬性名，用這個方法獲得屬性的值特別方便，例如在HTML5規範中，自訂屬性前面應該加上data-前綴以方便驗證，其中包含了非法字元'-',可以使用ul.getAttribute('data-index');獲得。

特別的，當attributename為style時這個方法在IE7之前的版本返回的是一個對象，其他版本的瀏覽器返回的是CSS文本。當attributename為onclick這樣的事件處理程序時這個方法在IE7之前的版本回傳的是一個方法或null，其他版本的瀏覽器回傳的是函數程式碼字串。

透過HTML元素屬性的方式取得特性與getAttribute（）差異比較大。
1、自訂屬性存取上的差異：
解析html程式碼的時候，標準的瀏覽器不會將元素的自訂屬性加入到DOM物件中，在js中透過屬性的方式存取自訂屬性是不存在的結果為undefined，非標準的瀏覽器會將這個自訂屬性加入到DOM物件中，在js中會存取到結果。 

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <ul id="ul1"  index="hehe">            <li>11111111</li>            <li>22222222</li>            <li>33333333</li>            <li>44444444</li>        </ul>        <script type="text/javascript">            var ul = document.getElementById(&#39;ul1&#39;);
            alert(ul.id);     /*标准与非标准都是div1*/
            alert(ul.index);/*标准为undefined 非标准为hehe*/        </script>    </body></html>123456789101112131415161718192021

2.當屬性為style時，傳回一個對象，當屬性為處理事件時，傳回被複製的函數。

綜上所述，在操縱DOM物件屬性的時候，一般情況下使用HTML元素屬性的方式獲得特性，只有在取得自訂屬性的值和一些含有非法字元的屬性名的值的時候使getAttribute方法。

.

三、element.setAttribute(attributename,attributevalue)加入指定的屬性，並為其賦指定的值。

與HTML元素屬性的方式設定特性的方式相比，這個方法可以加入一些沒有的自訂屬性並賦值，但透過HTML元素屬性的方式設定特性不會被設定。同時這個方法在IE7之前的版本也存在異常，所以除了設定自訂屬性外，其他方式透過HTML元素屬性的方式設定特性。

四、RemoveAttribute()移除特性，但不常使用，IE6之前的版本不支援這個方法。

操作內容

一、childNodes：表示某個元素子節點的集合，回傳NodeList 物件。

在標準瀏覽器下：傳回的子節點包含文字類型、元素類型、註解類型等，特別的包含文字類型中空文字即所謂的換行。
在非標準的瀏覽器下：傳回的子節點中不包含文字類型中空文本，同時與節點位置、解析方式等也有關。 

<ul id="ul1">            <li>22222</li>
            111111            <!--33333--></ul><script type="text/javascript">    var oul = document.getElementById(&#39;ul1&#39;);
    alert(oul.childNodes.length);</script>在标准浏览器下：得到的结果为5（li元素前的换行空文本，li元素，注释到</li>之间这一段文本，注释，注释到</ul>的空白） 在非标准的浏览器下得到的结果为1 但是将<li>22222</li>  111111互换位置之后得到的结果为2.1234567891011
所以当运行下面代码的时候为出问题：<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">    </head>    <body>        <ul id="ul1">            <li>11111111</li>            <li>22222222</li>            <li>33333333</li>            <li>44444444</li>        </ul>        <script type="text/javascript">            var oul = document.getElementById(&#39;ul1&#39;);            for(var i = 0; i<oul.childNodes.length; i++){
                oul.childNodes[i].style.backgroundColor = &#39;red&#39;;
            }        /*标准： Cannot set property &#39;backgroundColor&#39; of undefined*/        /*非标准：（ie8之前）正常*/   
        </script>    </body></html>原因很简单，就是因为在标准浏览器下childNodes返回的子节点中包含非元素类型的节点。12345678910111213141516171819202122232425

解決上述問題的方式：
透過nodeType屬性判斷子節點是否為元素類型：

for(var i = 0; i<oul.childNodes.length; i++){
    if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = &#39;red&#39;;
}1234

在非法嵌套的html文檔中由於解析方式不同，在標準和非標準瀏覽器下呈現的結果不同，這完全於瀏覽器核心的解析方式有關。如：

<!doctype html>    <html lang="en">    <head>        <meta charset="UTF-8" />    </head>    <body>        <ul id="ul1">            <li>11111111</li>            <li>22222222</li>            <li>33333333</li>            <li>44444444</li>            <p>5555555</p>        </ul>        <script type="text/javascript">            var oul = document.getElementById(&#39;ul1&#39;);            for(var i = 0; i<oul.childNodes.length; i++){                if(oul.childNodes[i].nodeType === 1)
                oul.childNodes[i].style.backgroundColor = &#39;red&#39;;
            }        </script>    </body>    </html>1234567891011121314151617181920212223

对于一些分标准的浏览器比如ie7 解析的时候他会把这种那个不符合语义的p元素放到最后一个li中，但对于其他的浏览器并不会这样。换句话说，在标准浏览器下p是ul的子节点，但是在非标准的浏览器下p是最后一个li的子节点，这完全和浏览器内核的系欸小方式有关。

由此可以看出，对于在书写html文档的时候，结构化语义是多么的重要，至少能为添加js方便不少。

二、element.childern仅仅返回元素类型的子节点集合，返回NodeList 对象。

Children比childNodes要好得多，因为他仅仅获取那些为元素类型的子节点。但是还是不能免于非法嵌套带来的问题，这本身至于浏览器的近稀饭时有关，与用那种属性没有关系。

三、element.firstChild（firstElementChild）：获取第一个子点
 element.lastChild（lastElementChild）：获取最后一个子节点
 element.nextSibling（nextElementSibling）：获取相邻的下一个兄弟子节点
 element.previousSibling（previousElementSibling）：获取相邻的上一个兄弟节点

以firstChild为例说明一下性质，其他的大同小异。
在标准情况下：返回的结果可能是文本类型（空文本）。
在非标准的情况下：如果有元素子节点，那么一定返回第一个元素类型的子节点。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8" /></head><body>    <ul id="ul1">            <li>11111111</li>            <li>22222222</li>            <li>33333333</li>            <li>44444444</li>    </ul>    <script type="text/javascript">        var oul = document.getElementById(&#39;ul1&#39;);
            alert(oul.firstChild.nodeName);            /*标准下text非标准为li*/    </script></body></html>123456789101112131415161718192021

解决这种情况
1是firstElementChild。
firstElementChild仅仅是在标准浏览器下有效，在非标准的浏览器下是没有定义的。在标准浏览器下仅仅返回第一个元素类型的子节点，如果没有返回null。
再js中加入：

function firstChild(obj){                if(obj.firstElementChild === undefined){//检测是否为标准浏览器                    return obj.firstChild;//不是标准浏览器，用firstChild返回第一个元素子节点，可能为null
                }else{                    return obj.firstElementChild;//是标准浏览器，用firstElementChild返回第一个元素子节点，可能为null
                }
            }            var oFirst = firstChild(oul);            if(oFirst){//判断有没有第一个元素子节点排除空节点的情况
                oFirst.style.backgroundColor = &#39;orange&#39;;
            }else{
                alert(&#39;没有第一个元素&#39;);
            }123456789101112131415

2直接用children：推荐

if(oul.children[0]){
                oul.children[0].style.backgroundColor = &#39;orange&#39;;
            }else{
                alert(&#39;没有第一个元素&#39;);
            }123456

四、element.parentNode： 当前节点的父级节点，无兼容性问题。

Eg：点击隐藏将这个列表隐藏<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function() {    var aA = document.getElementsByTagName(&#39;a&#39;);    for (var i=0; i<aA.length; i++) {   
        aA[i].onclick = function() {            this.parentNode.style.display = &#39;none&#39;;     
        }   
    }
}</script></head><body>    <ul id="ul1">        <li>11111 <a href="javascript:;">隐藏</a></li>        <li>22222 <a href="javascript:;">隐藏</a></li>        <li>33333 <a href="javascript:;">隐藏</a></li>        <li>44444 <a href="javascript:;">隐藏</a></li>    </ul></body></html>123456789101112131415161718192021222324252627

五、element.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点

非ie7以下的浏览器：  
如果没有定位父级    offsetParent 为body
如果有定位父级    offsetParent 为定位父级
Ie7以下的浏览器：
如果没有定位父级    自身没有定位 offsetParent 为body，自身有定位的话 为html
                   如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上。

如果有定位父级    offsetParent 为定位父级

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; zoom: 1;position: relative;}#div3 {background: orange;}</style><script>window.onload = function() {    var oDiv3 = document.getElementById(&#39;div3&#39;);
    alert( oDiv3.offsetParent.id ); 
}</script></head><body id="body1">    <div id="div1">        <div id="div2">            <div id="div3"></div>        </div>    </div></body></html>1234567891011121314151617181920212223242526272829

Div2 zoom：1；属性触发layout，并且div3没有定位，所以在ie7一下的版本父元素div2，同时，div2相对定位，在其他浏览器中父元素为div2。解决了兼容性问题。

六、element.offsetLeft[Top] : 只读 属性
 当前元素到定位父级的距离（偏移值）（或者说，到当前元素的offsetParent的距离）

非ie7以下的浏览器：
如果没有定位父级    offsetLeft [top]是到html的距离。
如果有定位父级      是到定位父级的距离。
ie7以下：
如果自己没有定位，无论是否有没有父级定位offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离（没有父级定位情况下是到html的距离）。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; position: relative;}#div3 {background: orange; position: relative;}</style><script>window.onload = function() {    var oDiv3 = document.getElementById(&#39;div3&#39;);
    alert( oDiv3.offsetTop );
}</script></head><body id="body1">    <div id="div1">        <div id="div2">            <div id="div3"></div>        </div>    </div></body></html>123456789101112131415161718192021222324252627
例子：获得任意一个元素的相对
于页面的位置<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <style type="text/css">            body{padding:0; margin:0;}            /*由于offsetLeft和offsetParsent在没有定位父级的时候父级不同*/            div{padding: 40px 50px;}            #div1{background-color: #008000;}            #div2{background-color: #FF0000;position: relative;}            #div3{background-color: #FFA500;position:relative;}            /*设置position offsetLeft在字节没有定位的时候是相对body的*/        </style>    </head>    <body>        <div id="div1">            <div id="div2">                <div id="div3"> 
                </div>            </div>        </div>        <script type="text/javascript">            var oDiv = document.getElementById(&#39;div3&#39;);            function getPosition(obj){                var pos = {left:0, top:0};                while(obj){
                    pos.left += obj.offsetLeft;
                    pos.top +=obj.offsetTop;
                    obj = obj.offsetParent; 
                }                return pos;
            }
            alert(getPosition(oDiv).left);        </script>    </body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546

七、长高：
element.style.width :  样式宽    =   width
element.clientWidth : 可视区宽  =   width + padding
element.offsetWidth:  占位宽   =   width + padding + border

八、
node.appendChild(node)
node.insertBefore(newnode,existingnode)
node.removeChild(node)
node.replaceChild(newnode,oldnode) node为oldnode的父节点
这几个函数既能操作已有的节点，也能操作动态创建的节点（createElement（））
node.insertBefore(newnode,existingnode)当existingnode当null时在ie下会报错解决的方式就是：用if判断如果为null执行什么操作，否则执行什么操作。

简单的留言板：<!DOCTYPE html><html><head>    <meta charset="UTF-8"></head><body>    <input type="text" name="text" id="text" />    <input type="button" name="btn" id="btn" value="添加" />    <ul id="ul1">    </ul>    <script type="text/javascript">        var text = document.getElementById(&#39;text&#39;);        var btn = document.getElementById(&#39;btn&#39;);        var oul = document.getElementById(&#39;ul1&#39;);

        btn.onclick =function(){            var li = document.createElement(&#39;li&#39;);
            li.innerHTML = text.value;            var oa = document.createElement(&#39;a&#39;);
            oa.innerHTML = &#39;删除&#39;;
            oa.href = &#39;javascript:;&#39;;
            oa.onclick = function(){
                oul.removeChild(this.parentNode);
            }
            li.appendChild(oa);            if(!oul.children[0]){
                oul.appendChild(li);
            }else{
                oul.insertBefore(li,oul.children[0]);
            }            if(oul.children.length>5){
                oul.removeChild(oul.children[oul.children.length-1])
            }
        }    </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

以上是DOM屬性方法及相容性問題詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JavaScript原生數組函數講解下一篇：JavaScript原生數組函數講解

相關文章

看更多