Javascript Can'；t使用querySelector（）为经典todo应用程序选择嵌套元素

我的HTML基于几个框或容器，下面是一个示例代码：

<div id="box">
    <div id="board">
        <div class="project" id="project-0">
            <h4 class="project-title">To-Do's<i class="arrowproject"></i></h4>
            <div class="todo" id="todo-0">
                <h4 class="todo-title">To-Do 1<i class="far fa-check-circle"></i><i class="arrowtodo" id="arrowtodo-0"></i></h4>
                <div class="todo-box"> 
                    <!-- Here goes the to-do's details -->
                </div>
            </div>
        </div>
    </div>
</div>

要做的事
做1

---

我的目标是使用

queryselectoral（）

选择每个

，并添加一个

onClick

侦听器以进行选项卡处理，因为该结构是动态添加并重复的。简单

这里的问题是

querySelectorAll（）

和其他所有DOM方法，如

getElementById（）

等，都只到达

h4

标记，当我尝试选择我想要的元素或

h4

之外的任何其他元素时，它返回一个空的

节点列表

有趣的是，如果我选择
标记和
console.log（）
，它会成功地选择所有内容，并且我可以毫无问题地看到它的子项

我真的不知道发生了什么事。我开始假设嵌套元素是有限制的，但当我在线搜索时，限制已经超过了4（这是我代码中的级别数量）

是否有人遇到并解决了此问题，或者知道发生了什么

提前感谢。
“我的目标是使用querySelectorAll（）选择每个选项。”

由于您没有提供任何javascript，我无法确切地告诉您错误的原因，但这里有一些可能性：

“每个”：
只有一个类具有
arrowtodo
（至少在提供的HTML中）

id=“arrowtodo-0”：
每个
id
必须是唯一的。您不应该对id使用
querySelectorAll（）
来获取多个元素

同样，也不清楚为什么它不起作用，因为您没有提供javascript，也可能没有提供所有相关的HTML代码（尽管这肯定比提供不必要的代码要好）。如果您有任何进一步的问题，或者如果这个答案没有部分或全部回答您的问题，请在评论中告诉我。无论如何，下面是我的解决方案，并添加了一些额外的元素作为示例：


var elements=document.getElementsByClassName（“arrowtodo”）；
对于（var i=0；i


要做的事
做1



阿罗托多
另一个例子
具有唯一id的'p'标记
没有实际的嵌套限制。请显示一个演示代码未按预期工作的示例，以便对其进行调试。