document.QuerySelector不适用于多个javascript类

document.QuerySelector不适用于多个javascript类,javascript,html,Javascript,Html,我试图对一组具有相同类的元素执行的操作我想对它们进行迭代并添加一些类或执行一些任务,但document.querySelectorAll不起作用,即使它返回的节点列表长度为0 所以任何人都可以帮我解决这个问题,我被困在这一点上了 Js脚本 <script> var highlightedItems = document.querySelectorAll(".highlighted"); highlightedItems.forEa

我试图对一组具有相同类的元素执行的操作我想对它们进行迭代并添加一些类或执行一些任务,但document.querySelectorAll不起作用,即使它返回的节点列表长度为0 所以任何人都可以帮我解决这个问题,我被困在这一点上了

Js脚本

<script>
        var highlightedItems = document.querySelectorAll(".highlighted");

        highlightedItems.forEach(function (userItem) {
            deleteUser(userItem);
        });

        console.log(document.querySelectorAll('.headings'));
        if (document.querySelectorAll('.headings').length === 0) {
            //do stuff
            console.log("hello it is working");
        }
        document.querySelectorAll('.headings').forEach(item => {
            console.log("it is not good but its okay");

            item.addEventListener('click', event => {
                console.log('hello');
            })
        })

    </script>
甚至我试着用if条件检查长度,结果显示为0

html divs

    <p class="highlighted">hello heloo helllo</p>
    <p class="highlighted">hello heloo helllo</p>
    <p class="highlighted">hello heloo helllo</p>
    <p class="highlighted">hello heloo helllo</p>
    <h1 class="animate__animated animate__bounce"> heloo</h1>
    <h1 class="mheadings">An animated element</h1>
    <h1 class="mheadings">An animated element</h1>
    <h1 class="mheadings">An animated element</h1>
    <h1 class="mheadings">An animated element</h1>
    <h1 class="mheadings animate__animated animate__bounce">An animated element</h1>
    <h1 class="mheadings animate__animated animate__bounce">An animated element</h1>
您正在使用.headings来选择元素,但您的HTML元素具有mheading类


修复方法:在选择器函数中将类名更改为mheading,或在HTML代码中将类名更改为heading。

要使用QuerySelector,您需要使用tagName.className

就你的情况而言,请试一试-

document.querySelectorAll('p.highlighted')


另外,请参考正确的类名,因为我在代码中找不到您提到的类。

可能是常见的问题,您的脚本代码在元素实际存在之前运行…?将脚本元素放在HTML中这些元素之后,或者让代码在文档上执行。或者简单地键入:“headers”!='标题不是标题==mheading我只是更改了类名,然后您需要提供一个有效的html和js示例,最好是在一个代码段中。给我们一些明显的拼写错误只会让我们认为是明显的拼写错误导致了您的问题。您的代码,如图所示,减去所谓的拼写错误,在JSFIDLE中工作得非常完美。代码总是在DOM之后运行,因此如果它不适合您,检查此处的第一条注释,并/或将其包装在doc.ready中。由于您最初标记为[jquery]否,您不需要包含标记名
document.querySelectorAll('h1.mheadings')