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>