<!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>
