JAVASCRIPT DOM对象二——节点与遍历

来源：互联网发布：淘宝偷换宝贝怎么举报编辑：程序博客网时间：2024/06/06 02:49

>父子节点

>>childNode

使用语法：elementNode.childNodes
注意事项：空白节点会被浏览器但顾总文本节点

>>firstChild lastChild

使用语法：node.firstChild node.lastChild

>>parentNode

使用语法:elementNode.parentNode

<span style="font-size:14px;"><body>    <ul id="father">        <li>大娃</li>    </ul>    <script type="text/javascript">        var li_num = 0;        var childNodes = document.getElementById("father").childNodes;        for(var i = 0; i < childNodes.length; i++){            document.write("节点名：" + childNodes[i].nodeName + " ");            document.write("节点类型：" + childNodes[i].nodeType + " ");            if(childNodes[i].nodeType == 1){                document.write("我是" + childNodes[i].innerHTML + "<br>");                li_num++;            }            else{                document.write("<br>");                console.log("这是一个空节点，不用理他");            }        }        document.write("子节点数目：" + childNodes.length + "<br>");        document.write("li 子节点数目：" + li_num + "<br>");        document.write("文本子节点数目：" + (childNodes.length - li_num));    </script></body></span>

//补充节点的属性还有title！

>兄弟节点

previousSibling nextSibling
使用语法：
nodeobject.nextSibling / previousSibling

<span style="font-size:14px;"><body>    <ul id="father">        <li title="force_max">大娃</li>        <li id="second_children">二娃</li>        <li title="fire">三娃</li>    </ul>    <script type="text/javascript">        function getprenode(node){            var prenode = node.previousSibling;            while(prenode && prenode.nodeType != 1){                prenode = prenode.previousSibling;            }            return prenode;        }        function getnextnode(node){            var nextnode = node.nextSibling;            while(nextnode && nextnode.nodeType != 1){                nextnode =nextnode.nextSibling;            }            return nextnode;        }        var second_children = document.getElementById("second_children");        var first_children = getprenode(second_children);        var third_children = getnextnode(second_children);        alert(first_children.innerHTML+first_children.title);        alert(third_children.innerHTML+third_children.title);    </script></body></span>

//虽然觉得这是史上最无聊的程序，但还是含泪贴上了

>创建节点方法

createElement('tagName'):创建节点
crreateTextNode("text")：穿件文本节点

<span style="font-size:14px;">        var newinp = document.createElement("input");        alert(newinp);        var newtext = document.createTextNode("text");        alert(newtext);</span>

>添加删除节点

nodeobject.appendChild(newnode)：父节点末尾添加
nodeobject.removeChild(node)：删除节点

<span style="font-size:14px;"><body><ul id="father">    <li>大娃</li></ul><input type="button" id="createbtn" value="祭出紫金葫芦"><script type="text/javascript">    function createnode(){        var btn = document.createElement("input");        btn.setAttribute("type", "button");        btn.setAttribute("name", "紫金葫芦");        btn.setAttribute("value", "吸进去");        btn.setAttribute("onclick", "removenode()");        document.body.appendChild(btn);    }    function removenode(){        var fnode = document.getElementById("father");        var nodes = fnode.childNodes;        for(var i = 0; i < nodes.length; i++){            if(nodes[i] && nodes[i].nodeType == 1){                var rm = fnode.removeChild(nodes[i]);                rm = null;                break;            }        }    }    var createbtn = document.getElementById("createbtn");    createbtn.onclick = createnode;  </script></body></span>

//有很多需要注意的地方，等吃饭回来补充

appendChild()方法的主体必须使父节点，而且只能添加到节点对类的末尾

>插入节点

fnode.insertBefore(newnode，node)：可以指定插如节点的位置（在node之前）返回值是插入的节点

<span style="font-size:14px;"><body>    <ul id="father">        <li>二娃</li>    </ul>    <input type="button" id="add-btn" value="add">    <script type="text/javascript">        function addnode(){            var fnode = document.getElementById("father");            var newnode = document.createElement("li");            newnode.innerHTML = "大娃";            fnode.insertBefore(newnode, fnode.childNodes[0]);        }        var add = document.getElementById("add-btn");        add.onclick = addnode;    </script></body></span>

>替换子节点（克隆替换）

fonde.replaceChild(newnode, oldnode)//返回值是被替换的节点

<span style="font-size:14px;"><body><ul id="father">    <li id="first">大娃</li>    <li>二娃</li></ul><input type="button" id="replace-btn" value="replace"><script type="text/javascript">    function replacenode(){        var oldnode = document.getElementById("first");        var newnode = document.createElement("li");        newnode.innerHTML = "金刚葫芦娃";        oldnode.parentNode.replaceChild(newnode, oldnode);    }    var replace = document.getElementById("replace-btn");    replace.onclick = replacenode;</script></body></span>

0 0

**JAVASCRIPT** DOM对象二——节点与遍历

JAVASCRIPT DOM对象二——节点与遍历