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>

 

posted @ 2017-03-28 15:19  (゜-゜)つロ干杯  阅读(716)  评论(0)    收藏  举报