javascript DOM节点（二）

1、首尾子节点（有兼容问题）

firstChild,firstElementChild　　首子节点，前者为IE678，后者为FF

lastChild,lastElementChild　　尾子节点，前者为IE678，后者为FF

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
<script>
var oUl = document.getElementById("ul1");
// if(oUl.firstElementChild)
// {
//     alert(1)
//     oUl.firstElementChild.style.backgroundColor = "#f00";
// }
// else
// {
//     alert(2)
//     oUl.firstChild.style.backgroundColor = "#f00";
// }
/*
if条件判断oUl.firstChild貌似不行，不知道什么原因，只能用if(oUl.firstElementChild)
*/
var oFirst = oUl.firstElementChild || oUl.firstChild ;
oFirst.style.backgroundColor = "#f00";
/*
var oFirst = oUl.firstChild || oUl.firstElementChild ;
这么写也不行，不知道什么原因，IE9和chrome,FF测试有错
*/
</script>

2、兄弟节点

nextSibling,nextElementSibling　　下一个兄弟级节点

previousSibling,previousSibling　　上一个兄弟级节点

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
<script>
var aLi = document.getElementById("ul1").getElementsByTagName("li");
// if(aLi.nextElementSibling)
// {
//     alert(1)
//     aLi[2].nextElementSibling.style.backgroundColor = "#f00";
// }
// else
// {
//     alert(2)
//     aLi[2].nextSibling.style.backgroundColor = "#f00";
// }
/*
if条件判断aLi[2].nextSibling貌似不行，不知道什么原因，只能用if(aLi[2].nextElementSibling)
*/
var oNext = aLi[2].nextElementSibling || aLi[2].nextSibling ;
oNext.style.backgroundColor = "#f00";
/*
var oNext = aLi[2].nextSibling || aLi[2].nextElementSibling ;
这么写也不行，不知道什么原因，IE9和chrome,FF测试有错
*/
</script>