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>
