[JavaScript][兄弟节点] DOM节点解析

下面是DOM解析中常用的属性及方法:

            //属性部分
            setAttribute(String key , String value) //给当前节点添加属性
            getAttribute(String name)    //获取该节点的属性值,通过属性的名称(key)获取值(value),返回值为属性值 
            getAttributeNode(String name) //获取该节点的属性节点,通过属性的名称(key)获取值(value),返回值为节点
            //操作节点部分
            hasChildNodes()  //是否有子节点
            replaceChild( newNode , oldNode ) //替换节点, 调用者为父节点 , 返回值为 oldNode 旧节点
                                              //如果被替换的节点有子节点,那么子节点也会被插入
            //创建节点及插入节点
            createElement(String element)  //创建一个新节点,返回值为被新建的节点,参数值为标签名,例如:input    
            createTextNode(String text)    //创建一个文本节点,参数为文本内容,返回值为被新建的节点
            appendChild(Node node)      //添加节点,调用者为父节点
            insertBefore(newNode , oldNode)  //插入节点,调用者为父节点,将新节点插入到旧节点前面,                                                  旧节点必须为父节点里的子节点
            removeChild(Node node)     //删除节点

            //兄弟节点
            firstChild       //该节点下的第一个子节点
            lastChild        //该节点的最后一个节点
            nextSibling      //该节点的下一个节点
            previousSibling  //该节点的前一个节点
            parentNode       //该节点的父节点
            childNodes       //该节点下的所有子节点(为数组)

            //节点名称,类型,值
            nodeName         //该节点的name值
            nodeType         //该节点的type值(返回值为数字)
            nodeValue        //该节点的value值

下面是测试部分

Html:

    <select name="edu" id="edu">
        <option value="博士" id="stu">博士~~~</option>
        <option value="硕士">硕士~~~</option>
        <option value="本科">本科~~~</option>
        <option value="大专">大专~~~</option>
    </select>

    <select name="job" id="job">
        <option value="工程师" id="gcs">工程师~~~</option>
        <option value="教师">教师~~~</option>
        <option value="建筑师">建筑师~~~</option>
        <option value="记者">记者~~~</option>
    </select>

    <br/>
    <p id="pid" name="text">文本~~~~~~~~~</p>
    <br/>

    <ul>
        <li id="bj" onclick="text5()">北京</li>
        <li id="sh" onclick="text6()">上海</li>
    </ul>

    <ul>
        <li id="lq">篮球</li>
        <li id="zq">足球</li>
    </ul>

    <input type="button" value="js测试" onclick="text4()"></input>

js测试

        function text1() {
            //是否还有子节点
            var element = document.getElementById("edu");
            alert(element.hasChildNodes());
            var btn = document.getElementById("btn");
            alert(btn.hasChildNodes());
        }

        function text2(){
            //获取<p id="pid">文本</p>的子节点
            var elements = document.getElementById("pid");
            var text = elements.childNodes[0];
            alert(text.nodeValue);
        }

        function text3(){
            //获取<p id="pid" name="text">文本</p>节点的属性值
            var pElement = document.getElementById("pid");
            //getAttributeNode("name")  获取该节点的name属性
            var attribute = pElement.getAttributeNode("name");
            alert(attribute.nodeType);
            alert(attribute.nodeName);
            alert(attribute.nodeValue);
        }

        function text4(){
            //输出下拉列表每一条文本内容
            var select = document.getElementById("edu");
            var options = select.getElementsByTagName("option");
            for (var i = 0; i < options.length; i++) {
                alert(options[i].firstChild.nodeValue);
            }
        }

        function text5(){
            //替换列表中的北京节点,替换为足球节点

            //获取博士列表
            var bj = document.getElementById("bj");
            //获取工程师列表
            var zq = document.getElementById("zq");
            //获取博士列表的父节点
            var bjParent = bj.parentNode;
            //替换节点
            var oldBj = bjParent.replaceChild(zq,bj);
            //输出被替换节点的ID属性值
            alert(oldBj.getAttributeNode("id").nodeValue);
        }

        function text6(){
            //新建一个<li>,并插入到<li>列表的上海前面

            //新建一个<li>
            var sjz = document.createElement("li");
            //设置属性
            sjz.setAttribute("value","sjz");
            //新建一个文本节点
            var text = document.createTextNode("石家庄");
            //获取上海节点
            var sh = document.getElementById("sh");
            //获取上海的父节点
            var shParent = sh.parentNode;
            //添加节点
            sjz.appendChild(text);
            shParent.appendChild(sjz);
            //插入节点
            shParent.insertBefore(sjz,sh);
        }