获取各种节点

firstChild (firstElementChild)
lastChild (lastElementChild)
nextSibling (nextElementSibling)
previousSibling (previousElementSibling)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1 firstChild,lastChild,nextSibling,previousSibling</title>
    <script>
        window.onload = function () {
            /* body... */
            var oUl = document.getElementById('ul1');

            /*
                firstChild ：第一个子节点，包含文本节点。
                firstElementChild ：第一个子元素节点，标准浏览器下支持(下同)
            */
            // var oFirst = oUl.firstElementChild||oUl.firstChild;
            var oFirst = oUl.children[0];
            oFirst.style.background = 'red';

            /*
                lastChild,lastElementChild ：最后一个子节点
            */
            var oLast = oUl.lastElementChild||oUl.lastChild;
            oLast.style.background = 'orange';

            /*
                nextSibling,nextElementSibling ：下一个兄弟节点
            */
            var oNext = oFirst.nextElementSibling||oFirst.nextSibling;
            oNext.style.background = 'yellow';

            /*
                previousSibling,previousElementSibling ：上一个兄弟节点
            */
            var oPrev = oLast.previousElementSibling||oLast.previousSibling;
            oPrev.style.background = 'blue';
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>
</html>