[js高手之路] dom常用節點屬性相容性詳解與應用

來源:互聯網
上載者:User

標籤:ast   idt   fragment   ack   簽名   section   style   nload   相容   

一、每個DOM節點都有一個nodeType屬性,表示節點類型, NodeType一共有12種類型,我們可以通過遍曆內建的Node建構函式擷取

 1          window.onload = function(){ 2             var str = "<table>"; 3             for( var key in Node ){ 4                 str += "<tr>"; 5                 str += "<td>" + key + "</td><td>" + Node[key] + "</td>"; 6                 str += "</tr>"; 7             } 8             str += "</table>"; 9             document.body.innerHTML = str;10         }
ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12

其中,最常用的是1(元素節點) 和 3( 文本節點 ).可以結合childNodes做一個簡單的應用

 1         window.onload = function(){ 2             var oUl = document.getElementById("box"); 3             var cNodeList = oUl.childNodes; 4             for( var i = 0, len = cNodeList.length; i < len; i++ ){ 5                 cNodeList[i].nodeType == 1 ? cNodeList[i].style.backgroundColor = ‘red‘ : ‘‘; 6             } 7         } 8  9     <ul id="box">10         <li>11111</li>11         <li>22222</li>12         <li>33333</li>13     </ul>

上例,給li加背景顏色, childeNodes在chrome和FF下會區分元素節點和文本節點. 所以為了在chrome和FF下加上背景顏色,

需要nodeType = 1判斷為元素節點,才能加上背景顏色

二、nodeName和nodeValue屬性

如果是元素, nodeName就是標籤名稱, nodeValue為null, 如果是文本節點,自然就是空

1         window.onload = function(){2             var oUl = document.getElementById("box");3             var cNodeList = oUl.childNodes;4             for( var i = 0, len = cNodeList.length; i < len; i++ ){5                 console.log( cNodeList[i].nodeName, cNodeList[i].nodeValue );6             }7         }

三、每個節點都有一個childNodes屬性,儲存的是當前節點下面的所有子節點,其中儲存著一個nodeList對象,nodeList是一種類數組結構,

有兩種方法可以擷取需要的子項目

  • 數組索引
  • item方法
1 var oUl = document.getElementById("box");2 var cNodeList = oUl.childNodes;3 console.log( cNodeList[0] );4 console.log( cNodeList.item(0) );

如果這個nodeList需要使用數組方法,他不能直接調用,需要轉成數組方式

console.log( cNodeList.slice( 0, 1 ) ); 這樣使用,會報錯. 應該先轉成數組,可以採用以下兩種方式:
1  // var aNode = [].slice.call( cNodeList, 0 );2 var aNode = Array.prototype.slice.call( cNodeList, 0 );3 console.log( aNode );

在IE8及其更老的版本,不支援這兩種方式,只能使用for迴圈遍曆

1             try {2                 var aNode = [];3                 aNode = Array.prototype.slice.call( cNodeList, 0 );4             } catch( e ){5                 for( var i = 0, len = cNodeList.length; i < len; i++ ){6                     aNode.push( cNodeList[i] );7                 }8             }9             console.log( aNode );

四、兄弟節點、第一個子節點、最後一個子節點、父節點(parentNode),子節點(children)

這裡一個有4組屬性,IE和Chrome,FF支援的屬性分別如下

在IE下是支援firstChild,lastChild,nextSibling,previousSibling

在Chrome和FF下支援: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling

如果需要相容,我們可以採用短路運算式:

 1 window.onload = function(){ 2             var aDiv = document.getElementsByTagName( "div" ); 3             (aDiv[2].previousElementSibling || aDiv[2].previousSibling).style.color = ‘red‘; 4             (aDiv[1].nextElementSibling || aDiv[1].nextSibling).style.color = ‘green‘; 5             (document.body.firstElementChild || document.body.firstChild).style.color = ‘blue‘; 6             (document.body.lastElementChild || document.body.lastChild).style.color = ‘orange‘; 7 } 8  9 <div>ghostwu1</div>10 <div>ghostwu2</div>11 <div>ghostwu3</div>12 <div>ghostwu4</div>

parentNode的小應用,隱藏當前a元素對應的li元素

 1         window.onload = function(){ 2             var aHref = document.getElementsByTagName("a"); 3             for( var i = 0, len = aHref.length; i < len; i++ ){ 4                 aHref[i].onclick = function(){ 5                     this.parentNode.style.display = ‘none‘; 6                 } 7             } 8         } 9 10     <ul>11        <li><a href="javascript:;">1111</a><a href="javascript:">隱藏</a></li>12        <li><a href="javascript:;">2222</a><a href="javascript:;">隱藏</a></li>13        <li><a href="javascript:;">3333</a><a href="javascript:;">隱藏</a></li>14    </ul>

children的小應用,隔行變色

 1         window.onload = function(){ 2             var oDiv = document.querySelector("#box"); 3             var aP = oDiv.children; 4             aP = [].slice.call(aP); 5             aP.forEach(function( el, key ) { 6                 el.style.backgroundColor = ( key % 2 == 0 ? ‘red‘ : ‘green‘ ); 7             }, this); 8         } 9 10 11     <div id="box">12         <p></p>13         <p></p>14         <p></p>15         <p></p>16         <p></p>17         <p></p>18     </div>

 

[js高手之路] dom常用節點屬性相容性詳解與應用

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.