初探JS节点 node

在使用原生JS获取元素节点的时候发现没有获取成功，想起来应该是获取到了nodeType = 3的文本节点，再次专门记录一下解决过程。

参考caocx的博客:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        //关于节点的属性：nodeType,nodeName.nodeValue
        //在文档中，任何一个节点都有这三个属性
        //而id,name,value是具体节点的属性
        window.onload = function () {
//1,元素节点的这三个属性
            var bjNode = document.getElementById("bj");
            alert(bjNode.nodeType);//元素节点：1
            alert(bjNode.nodeName);//节点名：li
            alert(bjNode.nodeValue);//元素节点没有nodeValue属性值：null
//2,属性节点
            var nameAtr = document.getElementById("name").getAttributeNode("name");
            alert(nameAtr.nodeType);//属性节点：2
            alert(nameAtr.nodeName);//属性节点的节点名：属性名name
            alert(nameAtr.nodeValue);//属性节点的nodeValue属性：属性值username
//3,文本节点
            var textNode = bjNode.firstChild;
            alert(textNode.nodeType);//文本节点：3
            alert(textNode.nodeName);//节点名：#text
            alert(textNode.nodeValue);//文本节点的nodeValue属性值：文本值本身：北京
//nodeType、nodeName是只读的
//而nodeValue是可以被改变的
//以上三个属性，只有在文本节点中使用nodeValue读写文本时使用最多
        }
    </script>
</head>
<body>
<p>你喜欢那个城市</p>
<ul id="city">
    <li id="bj" name="BeiJing">北京</li>
    <li>上海</li>
    <li>香格里拉</li>
    <li>天山</li>
</ul>
<br><br>
<p>你喜欢那个游戏</p>
<ul id="game">
    <li id="rl">贪吃蛇</li>
    <li>搬箱子</li>
    <li>魔兽</li>
    <li>lol</li>
</ul>
<br><br>
name:<input type="text" name="username" id="name" value="你是个傻瓜"/>
</body>
</html>

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<p>123</p>
<div id="test"></div>

<script>

    window.onload = function () {

        var oElem = document.getElementById('test');
        do {
            oElem = oElem.previousSibling;
        } while (oElem && oElem.nodeType != 1);
        console.log(oElem); //=> <p>123</p>

    }

</script>
</body>
</html>

　　将获取上一个兄弟元素节点的方法封装成函数：

    function prev(elem) {
        do {
            elem = elem.previousSibling;
        } while (elem && elem.nodeType != 1);

        return elem;
    }