fristChild,lastChild,NextSiBling,previousSibling


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
   
   var oUl = document.getElementById('ul1');
   /*
      元素.firstChild : 只讀 屬性 第一個子節點
         標準下:firstChild會包含文本類型的節點
         非標準下:只包含元素節點
      元素.firstElementChild : 只讀 屬性 標準下獲取第一個元素類型的子節點
   */
   
   //alert( oUl.firstChild );
   
   //alert( oUl.firstElementChild );
   
   /*if ( oUl.firstElementChild ) {
      oUl.firstElementChild.style.background = 'red';
   } else {
      oUl.firstChild.style.background = 'red';
   }*/
   
   var oFirst = oUl.firstElementChild || oUl.firstChild;
   oFirst.style.background = 'red';
   
   /*
      元素.lastChild || 元素.lastElementChild 最後一個子節點
   */
   var oLast = oUl.lastElementChild || oUl.lastChild;
   oLast.style.background = 'yellow';
   
   /*
      元素.nextSibling || 元素.nextElementSibling 下一個兄弟節點
   */
   var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
   oNext.style.background = 'blue';
   
   /*
      元素.previousSibling || 元素.previousElementSibling 上一個兄弟節點
   */
   var oPrev = oLast.previousElementSibling || oLast.previousSibling;
   oPrev.style.background = 'orange';
   
   
}
</script>
</head>

<body>
   <ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>
</html>
發佈了52 篇原創文章 · 獲贊 9 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章