javascript - document.querySelectorAll() 函数不适用于所有元素

Question

我正在使用document.querySelectorAll()函数来捕获 <a>在我的列表中<li>但该函数不适用于我必须像这样定义的所有元素 document.querySelectorAll('//elements')[0] , document.querySelectorAll('//elements')[1]如果我这样定义，它仅适用于该索引上的元素。

我认为对所有元素都这样定义并不好。谁能告诉我我错在哪里，为什么它不适用于所有元素。

这是我当前的代码

HTML

<ul class="questions">
    <li>
        <a href="#" class="clearfix"><span class="faq_name">My Account</span><span class="arrow"><img src="images/plus.png"></span></a>
        <div class="answer_box">
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
        </div>
    </li>
    <li>
        <a href="#" class="clearfix"><span class="faq_name">Categories</span><span class="arrow"><img src="images/plus.png"></span></a>
        <div class="answer_box">
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
        </div>
    </li>
    <li>
        <a href="#" class="clearfix"><span class="faq_name">Trouble with check-in</span><span class="arrow"><img src="images/plus.png"></span></a>
        <div class="answer_box">
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
        </div>
    </li>
</ul>

JS

document.querySelectorAll('.questions li a').onclick = function() {myFunction()};
function myFunction(){
    alert('asd');
}; 

Answer 1

querySelectorAll 返回元素的集合。 DOM 没有“基于集合”的功能，可以让您在一个语句中将处理程序分配给整个集合(如果您喜欢使用 jQuery 库，则可以)，您必须使用循环。

例如:

Array.prototype.forEach.call(
    document.querySelectorAll('.questions li a'),
    function(element) {
        element.onclick = myFunction;
    }
);
function myFunction(){
    alert('asd');
}

在那里，我们使用 Array#forEach 来循环访问集合(因为它可以用于任何类似数组的对象，而不仅仅是数组)。 this answer 的“类似数组”部分中概述了其他几个选项。 .

<小时/>

旁注 1:我直接在上面使用了 MyFunction ，因为将其包装在一个仅调用它的函数中似乎没有必要，但这会改变它接收的参数，因此如果需要，请添加一个包装器。

旁注 2:虽然我没有在上面更改它，但我强烈建议使用 addEventListener (如果您必须支持 IE8 或损坏的“兼容模式”，我强烈建议使用 attachEvent IE9-IE11 的“)而不是 onclick。

旁注 3:对于此特定用例，您可能会考虑事件委托(delegate)，而不是向每个元素添加处理程序。在事件委托(delegate)中，您将一个处理程序添加到包含所有链接的容器(可能是 document.body，但通常有一个离它们更近的容器更合适)，然后当事件发生时发生时，您可以查看它在冒泡时是否通过了匹配的元素。

旁注 4:在您只需要第一个匹配项的情况下，请使用 querySelector(...)，而不是 querySelectorAll(...)[0] >。它返回第一个匹配项，如果没有匹配项，则返回 null。