javascript - “遍历DOM”的nextSibling属性不起作用。 (JavaScript)

This question already has answers here:

Get next / previous element using JavaScript?

                                    （7个答案）


                                3年前关闭。


JS nextSibling属性不适用于我。

HTML：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>DOCUMENT OBJECT MODEL</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <ul>
            <li class="sameClass" id="one">first list item</li>
            <li class="sameClass" id="two">second list item</li>
            <li class="sameClass" id="three">third list item</li>
            <li class="sameClass" id="four">fourth list item</li>
        </ul>
        <div id="getValues"></div>
        <script src="javascript.js"></script>
    </body>
</html>

CSS：

li.sameClass{
    background-color:black;
    color:white;
}
li.targetClass{
    background-color:orange;
    color:red;
}

JS：

var element = document.getElementById("one").nextSibling;
element.className = "targetClass";

该代码应通过将id="two"的className更改为“ targetClass”来更改第二个列表项的外观。那不起作用，document.querySelector("#one")也不起作用。

可能是什么问题？

最佳答案

代替使用nextSibling，而是使用nextElementSibling。

nextSibling-查找下一个同级，即使它不是元素（例如，文本节点）

nextElementSibling-查找是元素的下一个同级。

NextSibling

javascript - “遍历DOM”的nextSibling属性不起作用。 (JavaScript)