DOM之兄弟节点 - xiaoleilei

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

posted on 2013-08-30 13:38 xiaoleilei 阅读(515) 评论(0) 收藏举报

刷新页面返回顶部