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>
  • 相关阅读:
    区分浏览器的刷新与关闭(网上查到,记录一下)
    echarts中设置markPoint
    Vue自定义指令,ref ,sync,slot
    手动封装on,emit,off
    数组的一些操作
    ES6-字符串扩展-padStart(),padEnd()
    MongoDB 数据库
    新地方
    使用echarts踩过的一些坑
    IE无法访问vue项目
  • 原文地址:https://www.cnblogs.com/qilin20/p/12663090.html
Copyright © 2011-2022 走看看