Question

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

我不认为为所有元素定义这样的好。任何人都可以告诉我，我错了，为什么它没有处理所有元素。

这是我目前的代码

HTML

document.querySelectorAll('//elements')[1]

JS

<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>

Answer 1

querySelectorAll会返回元素的集合。 DOM没有基于集合的＆＃34;功能允许您在一个语句中为整个集合分配处理程序（如果您喜欢使用它，jQuery库会这样做），您必须使用循环。

例如：

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

在那里，我们使用Array#forEach来遍历集合（因为它可以在任何类似数组的对象上使用，而不仅仅是数组）。您还可以在＆＃34;类似数组＆＃34;中列出其他几个选项。 this answer的一部分。

附注1：我直接在上面使用了MyFunction，因为将它包装在一个只调用它的函数中似乎是不必要的，但这会改变它接收的参数，所以如果需要的话添加一个包装器。

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

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

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

Answer 2

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

通过"calling" Array.prototype.slice上的'array-like-objects'，slice迭代＆amp;填充返回的新数组。然后你可以在那个数组上使用数组方法。

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
}
})

Answer 3

我找到了一个更简单的循环方式，循环将运行到元素的长度

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');
}

只需调用click in循环，每件事情都是一样的。

document.querySelectorAll（）函数不能处理所有元素

3 个答案: