Question

我想使所有li元素在我碰到"Hello"时都变成Test Button，但是querySelectorAll什么也没做，但是如果我用{{1 }}仅适用于一个元素。我在这里想念什么？

querySelector

function test() {
    var foundDiv = document.querySelectorAll("li");
    foundDiv.innerText = "Hello";
}

Answer 1

如果您查看querySelectorAll()的文档，它将返回NodeList，而不是单个项目。根据{{3}}上的文档：Although NodeList is not an Array, it is possible to iterate over it with forEach().，您需要遍历查询结果并更新列表中的每个项目。

function test() {
    var foundDivs = document.querySelectorAll("li");
    foundDivs.forEach(div => {
      div.innerText = "Hello";
    });
}

<body>
    <div class="header">
    </div>
    <section id="container">
        <ul>
            <li class="first">one</li>
            <li class="second">two</li>
            <li class="third">three</li>
        </ul>
        <ol>
            <li class="first">one</li>
            <li class="second">two</li>
            <li class="third">three</li>
        </ol>
    </section>
    <div class="footer">
    </div>

    <button onclick="test()"> Test </button>
</body>

为什么`querySelectorAll`不能按预期工作

1 个答案: