代码改变世界

js节点操作

2020-04-08 21:48  默默不语  阅读(180)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            <div></div>
        </div>
        <table id="t1">
            <tr>
                <td><a></a></td>
                <td><a href="javascript:void(0);" id="a1">百度一下</a></td>
                <td><a>我是下一个兄弟节点的a标签</a></td>
            </tr>
            <tr>
                <td><a></a></td>
                <td><a></a></td>
                <td><a></a></td>
            </tr>
        </table>
        <input type="button" id="fjd" value="获取父节点" />
        <input type="button" id="xdjd" value="获取下一兄弟节点" />
        <input type="button" id="zjd" value="获取所有子节点" />
        <input type="button" id="add_node" value="添加节点" />
        <input type="button" id="del_node" value="删除节点" />
        <div id="result"></div>
        <div id="add" style="width: 300px; height: 300px;border: solid 2px #0000FF;"></div>
        <ol id = "ol">
            <li>苹果</li>
            <li>香蕉</li>
        </ol>
    </body>
    <script type="text/javascript">
        var a1 = document.getElementById("a1");
        var result = document.getElementById("result");
        var fjd = document.getElementById("fjd");
        var xdjd = document.getElementById("xdjd");
        var zjd = document.getElementById("zjd");
        var add_node = document.getElementById("add_node");
        var del_node = document.getElementById("del_node");
        
        fjd.onclick = function(){
            /* 获取父节点 */
            var parent = a1.parentNode;
            result.innerHTML = parent.nodeName;
        }
        
        xdjd.onclick = function(){
            var parent = a1.parentNode;
            /* 获取下一个兄弟节点 */
            /* IE678中用nextSibling  IE9+、火狐、谷歌用nextElementSibling*/
            result.innerHTML = parent.nextElementSibling.innerText;
        }
        
        zjd.onclick = function(){
            var t1 = document.getElementById("t1");
            /* 只取html标签的子元素，会忽略空格和回车 */
            var nodes = t1.children;
            alert(nodes.length);
            for(var i=0;i<nodes.length;i++){
                alert(nodes[i]);
            }
        }
        
        add_node.onclick = function(){
            var newNode = document.createElement("div");
            newNode.innerHTML = "我是新添加的div";
            newNode.style = "width:200px;height:200px;backgroundColor:#7FFF00";
            /* 将新节点插入到对应的位置 */
            /* 方式一：插入到最后一个子结点的 */
            /* var add = document.getElementById("add");
            add.appendChild(newNode); */
            /* 插入到参考节点之前 */
            var ol = document.getElementById("ol");
            var node = ol.childNodes[2];
            alert(node.innerText);
            ol.insertBefore(newNode,node);
        }
        del_node.onclick = function(){
            /* 想要删除某个节点必须先获取到它 */
            var ol = document.getElementById("ol");
            var del_node = ol.firstElementChild;//苹果
            ol.removeChild(del_node);
        }
        
        
    </script>
</html>