zoukankan      html  css  js  c++  java
  • js节点操作

    <!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=" 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 = "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>
  • 相关阅读:
    MongoDB Shell
    mongo 日记
    java 堆栈 静态
    面向对象(2)
    面向对象(1)
    mongo 学习笔记
    深入浅出学Spring Data JPA
    java记录
    mongodb 2.6 window 安装启动服务
    CF1012F Passports
  • 原文地址:https://www.cnblogs.com/qilin20/p/12663090.html
Copyright © 2011-2022 走看看