js的nextSibling和previousSibling兄弟节点 nextSibling

最新推荐文章于 2024-03-05 12:15:59 发布

jqrsdsy

最新推荐文章于 2024-03-05 12:15:59 发布

阅读量608

点赞数 1

分类专栏： JavaScript 文章标签： html javascript class button function input

JavaScript 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Untitled Document</title>   
        <script language="JavaScript">   
            function test() {   
                var node = document.getElementById("li2");   
alert(node.id+"---"+node.innerText);//li2---J2EE
                alert(node.nextSibling.id+"---"+node.nextSibling.innerText);   //Li3---Haha
                alert(node.previousSibling.id+"---"+node.previousSibling.innerText);  //li1---Magci
                alert(node.nextSibling.previousSibling.id+"---"+node.nextSibling.previousSibling.innerText);  //li2---J2EE  
            }   
        </script>   
    </head>   
    <body>   
        <ul id="u1">   
            <li id="li1" class="li1">Magci</li>   
            <li id="li2">J2EE</li>   
            <li id="li3">Haha!</li>   
        </ul>   
        <ul id="u2">   
            <li id="li4" class="li1">Magci</li>   
            <li id="li5">J2EE</li>   
            <li id="li6">Haha!</li>   
        </ul>   
        <input type="button" value="Click Me!" />   
    </body>   
</html>