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

最新推荐文章于 2021-06-23 19:32:08 发布

Estom_yin

最新推荐文章于 2021-06-23 19:32:08 发布

阅读量369

点赞数

分类专栏： html&css&javascript 文章标签：父子节点兄弟节点插入删除创建节点

本文链接：https://blog.csdn.net/Estom_yin/article/details/51899305

版权

html&css&javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

>父子节点

>>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>