firstChild,lastChild,nextSibling,previousSibling & 兼容性寫法

時間 2019-12-13
標籤 firstchild lastchild nextsibling previoussibling 兼容性寫法简体版
原文原文鏈接
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>Document</title>
  7     </head>
  8 
  9     <body>
 10         <ul id="ul1">
 11             <li>0001</li>
 12             <li>0002</li>
 13             <li>0003</li>
 14             <li>0004</li>
 15         </ul>
 16         <script>
 17             window.onload = function() {
 18 
 19                 var oUl = document.getElementById('ul1');
 20 
 21                 /**
 22                     獲取第一個子元素
 23 
 24                     obj.firstChild
 25                     標準瀏覽器下會取到文本節點
 26                     非標準瀏覽器下只會取到元素節點
 27 
 28                     obj.firstElementChild
 29                     標準瀏覽器下只會取到元素節點
 30                     非標準瀏覽器不認識該屬性
 31 
 32                     兼容代碼
 33                     if(obj.firstElementChild){
 34                         obj.firstElementChild.style.background='red';
 35                     }else{
 36                         obj.firstChild.style.background='red';
 37                     }
 38 
 39                     var oFirst = obj.firstElementChild || obj.firstChild;
 40                     if( oFirst ){
 41                         oFirst.style.background = 'red';
 42                     }
 43 
 44                     以上兼容代碼都有BUG so 使用一下代碼查找第一個子obj
 45                     obj.children[0].style.background = 'red';
 46                 */
 47 
 48                 var oFirst = oUl.children[0];
 49                 if (oFirst) {
 50                     oFirst.style.background = 'red';
 51                 }
 52 
 53                 /**
 54                     獲取最後一個子元素
 55 
 56                     obj.lastChild
 57                     標準瀏覽器下會取到文本節點
 58                     非標準瀏覽器下只會取到元素節點
 59 
 60                     obj.lastElementChild
 61                     標準瀏覽器下只會取到元素節點
 62                     非標準瀏覽器不認識該屬性
 63 
 64                     var oLast = obj.lastElementChild || obj.lastChild;
 65                     if( oLast ){
 66                         oLast.style.background = '#abcdef';
 67                     }
 68 
 69                 */
 70 
 71                 var oLast = oUl.children[oUl.children.length-1];
 72                 if (oLast) {
 73                     oLast.style.background = '#abcdef'
 74                 }
 75 
 76                 /**
 77                     獲取上一個兄弟節點
 78 
 79                     obj.previousSibling
 80                     標準瀏覽器下會取到文本節點
 81                     非標準瀏覽器下只會取到元素節點
 82 
 83                     obj.previousElementSibling
 84                     標準瀏覽器下只會取到元素節點
 85                     非標準瀏覽器不認識該屬性
 86 
 87                     var oPrevious = obj.previousElementSibling || obj.previousSibling;
 88                     if( oPrevious ){
 89                         oPrevious.style.background = 'yellow';
 90                     }
 91 
 92                 */
 93 
 94                 var oPrevious = oLast.previousElementSibling || oLast.previousSibling;
 95                 if (oPrevious) {
 96                     oPrevious.style.background = 'yellow';
 97                 }
 98 
 99 
100                 /**
101                     獲取下一個兄弟節點
102                     
103                     nextSibling
104                     標準瀏覽器能夠獲取文本節點
105                     非標準瀏覽器只能獲取元素節點
106 
107                     nextElementSibling
108                     標準瀏覽器只能獲取元素節點
109                     非標準瀏覽器不支持該屬性
110 
111                     var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
112                     if( oNext ){
113                         oNext.style.background = 'pink';
114                     }
115 
116                 */
117 
118                 var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
119                 if (oNext) {
120                     oNext.style.background = 'pink';
121                 }
122 
123             };
124         </script>
125     </body>
126 
127 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。