document.querySelectorAll(） 函数不适用于所有元素

document.querySelectorAll() function not working on all elements

本文关键字：适用于 元素 不适用 函数 querySelectorAll document      更新时间：2023-09-26

我正在使用document.querySelectorAll()函数来捕获<li>列表中的<a>，但该函数不适用于我必须像这样定义的所有元素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="answerswer_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="answerswer_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="answerswer_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');
};

querySelectorAll返回元素集合。DOM 没有"基于集合"的功能，允许您在一个语句中将处理程序分配给整个集合（jQuery 库可以，如果您喜欢使用它），您必须使用循环。

例如：

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

在那里，我们使用Array#forEach来循环访问集合（因为它可以用于任何类似数组的对象，而不仅仅是数组）。您在此答案的"类似数组"部分中概述了其他几个选项。

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

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

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

旁注4：在你只想要第一场比赛的情况下，querySelectorAll(...)[0]，使用querySelector(...)。它返回第一个匹配项，如果没有匹配项，则返回null。

您需要将"HTMLcollection"转换为数组，然后循环该数组以将事件侦听器绑定到每个元素。

通过在"类似数组的对象"上"calling" Array.prototype.slice，slice迭代并填充返回的新数组。然后，可以在该数组上使用数组方法。

Array.prototype.slice.call(document.querySelectorAll('.questions li a'))
//converts HTMLCollection to an array
//or Array.apply(null ,document.querySelectorAll('.questions li a'))
.forEach(function(element){
element.onclick = function(){
//do something
}
})

我找到了一种更简单的循环方法，其中循环将运行到元素的长度

var question = document.querySelectorAll('.questions li a');
var i;
for(i=0;i<question.length;i++){
    question[i].addEventListener('click',myFunction)
}
function myFunction(){
    alert('adasd');
}

每件事都是一样的，只是调用点击循环。

相关文章：