一

html

<div id="dv">
            <p>我是p</p>
            <span>我是span</span>
            <ul id="list">
                <li>01</li>
                <li>02</li>
                <li id="three">03</li>
                <li>04</li>
                <li>05</li>
                <li>06</li>
            </ul>
        </div>

js 节点 1是标签 2是属性 3是文本

function $(id){
    return document.getElementById(id);
    }

console.log($("list").parentNode);//得到父节点
console.log($("list").parentElement)//得到父元素
console.log($("list").parentNode.nodeType)//标签的----1(属性)
console.log($("list").parentNode.nodeName)//标签的----大写的名字
console.log($("list").parentNode.nodeValue)//标签的---null(文本内容)

console.log($("list").childNodes);//得到子节点（在ie8中得到的是子元素）
console.log($("list").children);//得到子元素（ie8不支持）
console.log($("list").firstChild);//第一个子节点（在ie8中得到的是子元素）
console.log($("list").firstElementChild);//第一个子元素（ie8不支持）
console.log($("list").lastChild);//最后一个节点（在ie8中得到的是子元素）
console.log($("list").lastElementChild);//最后一个子节点（ie8不支持）
            
console.log($("list").getAttributeNode("id"))//获取属性节点

console.log($("three").previousSibling);//前一个兄弟节点
console.log($("three").previousElementSibling);//前一个兄弟元素
console.log($("three").nextSibling);//下一个兄弟节点
console.log($("three").nextElementSibling);//下一个兄弟元素

小结：在标准浏览器中获取节点都是对应的节点，获取的元素都是对应的元素。
在ie8中获取的节点都是元素，获取的元素都是undefined，不支持元素代码

二

获得任意元素的第一个子元素和最后一个子元素

//获得任意元素的第一个子元素
function getFirstElemenChild(element){
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
        var node=element.firstChild;
        while(node && node.nodeType != 1){
            node=node.nextSibling;
        }
        return node;
    }
}

//获得任意元素的最后一个子节点
function getLastElementChild(element){
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
        var node=element.firstChild;
        while(node && node.nodeType != 1){
            node=node.previousSibling;
        }
        return node;
    }
}

简单的切换背景