zoukankan      html  css  js  c++  java
  • DOM之兄弟节点

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>兄弟节点previousSibling</title>
    </head>
    <body>
    <ul id="ele">
            <li id='li1'>前端开发课程</li>
            <li id='li2'>javaScript课程</li>
            <li id="li3">HTML5课程</li>
            <li id="li4">CSS课程</li>
            <li id="li5">其它网站开发经典课程</li>
            <li id="li6">jQuery是其中的一部</li>   
    </ul>
    </body>
        <script type="text/ecmascript">
            function previousSibling(ele) {
                //先判断它支持不支持这个属性
                if (typeof previousElementSibling == 'object') {
                    //如果支持直接返回return ele.previousElementSibling;
                    return ele.previousElementSibling;
                } else {
                    //如果不支持就返回  ele.previousSibling
                    //元素的父节点
                    ele.previousSibling
                    //判断元素的哥哥节点,循环
                    do {
                        if (ele.previousSibling&&ele.previousSibling.nodeType=="1") {
                            return ele.previousSibling
                        }else{
                            ele = ele.previousSibling;
                        }
                    } while (ele)
                    return null;
                }

            }
            var oLi1 = document.getElementById("ele").children[0];
            var pre=previousSibling(oLi1)
            alert(pre)//弹出null

            //var oLi1 = document.getElementById("ele").children[1];
            //var pre = previousSibling(oLi1)
            //alert(pre)//弹出objectHTMLLIElement
        </script>
    </html>

  • 相关阅读:
    vscode安装扩展插件提示:扩展不可用,XHR error?
    react函数组件的条件渲染和列表渲染
    动态设置背景图片和图片地址
    computed和watch,getters的计算变化
    VueLazyLoad图片懒加载
    vuex实现数据持久化
    vuex不需要一个个引入模块文件
    react的state和setState
    热爱生命 汪国真
    分分钟手写http server
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3291298.html
Copyright © 2011-2022 走看看