javascript nextSibling属性

最新推荐文章于 2024-01-03 08:30:00 发布

PHP__廊外诗鸽

最新推荐文章于 2024-01-03 08:30:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/tashanhongye/article/details/72901576

javascript 专栏收录该内容

29 篇文章

订阅专栏

本文通过两个实例详细介绍了nextSibling属性的使用方法及注意事项，强调了节点间的关系与空格对其的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于nextSibling属性，在W3school中的定义为：

nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。

注意所返回的节点必须是与上一个节点是同级关系，且彼此之间不能有空格，否则将会返回：undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
<!--    <p id="p">this is a test project!</p>  <p id="p2">this is a test project2.</p>-->
        <ul>
            <li id="a">hello</li>
            <li id="b">world</li>
        </ul>
    <script type="text/javascript" src="scripts/test.js"></script>
</body>
</html>



test.js
window.onload=function(){
/*    var a=document.getElementById("p");
    a.style.color="black";*/
    var a=document.getElementById("a").nextSibling.id;
    alert(a);
}

返回结果如下图：

这里写图片描述

在此我把它改动一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
<!--    <p id="p">this is a test project!</p>  <p id="p2">this is a test project2.</p>-->
        <ul>
            <li id="a">hello</li><li id="b">world</li>
        </ul>
    <script type="text/javascript" src="scripts/test.js"></script>
</body>
</html>



test.js

window.onload=function(){
/*    var a=document.getElementById("p");
    a.style.color="black";*/
    var a=document.getElementById("a").nextSibling.id;
    alert(a);
}