[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);        }