querySelectorAll 不适用于指定元素

Question

我正在尝试使用循环 querySelectorAll 实现 select 我想要的所有指定元素，但我仍然失败。只有第一个元素总是 selected。这是我的代码：

HTML:

<div id="text">Text 1</div>
<div id="text">Text 2</div>
<div id="text">Text 3</div>

JS:

function query(selector) {
    var elem = document.querySelectorAll(selector);

    if(elem.length) {
        for(var i = 0; i < elem.length; i++) {
            return elem[i];
        }
    }
}

query("#text").style.background = "red";

我做错了什么？

Answer 1

return语句终止函数执行，即不执行后续代码。您的函数 return 是循环第一次迭代中的第一个选定元素，到此结束。

在这种情况下，无需迭代集合。如果你想获得所有选择的元素你可以returnreturnquerySelectorAll方法的值，但是你不能使用style属性这样 returned 集合没有这样的属性。

function query(selector) {
    // convert the NodeList into a regular array
    // https://developer.mozilla.org/en-US/docs/Web/API/NodeList
    return Array.prototype.slice.call(document.querySelectorAll(selector));
}

// since `query` returns an array you can use it's `forEach` method 
// for iterating over the array
query(".text").forEach(function(el) {
   el.style.backgroundColor = "red";
});

请注意，ID 必须是唯一的。您应该改用类。

Answer 2

使用 class 而不是 id -- ID 必须是唯一的，但是类可以分配给任意数量的元素，您可以分配任意数量的类到每个元素，所以

<div class="mytext">Text 1</div>
<div class="mytext">Text 2</div>
<div class="mytext">Text 3</div>

我建议您改用 Jquery，这样您就可以将背景色设置为

$(".mytext").css({background:"red"});

Answer 3

问题出在 return 语句中，它只 returns 第一个元素 然后将链应用于它。之后它就完成了，不再处理任何元素。

您可以使用这个 hack 并拥有一个真正的通用涂抹器。

function query(selector, callback) {
  [].forEach.call(document.querySelectorAll(selector), callback)
}

这就是使用方法。

query('#option', function(el){el.style.backgroundColor = "red"})
// or ES6
query('#option', el => el.style.backgroundColor = "blue")

一次应用多项更改：

query('#option', el => {
  el.style.backgroundColor = "green"
  el.style.color = 'cyan'
  el.style.textDecoration = 'line-through'
})

或模仿链接，如果你出于任何原因想要变得讨厌...

function query(selector, callback) {
  [].forEach.call(document.querySelectorAll(selector), callback) 

  return arguments.callee.bind(undefined, selector)
}

用法：

query('#option', el => el.style.backgroundColor = 'red')(el => el.style.color = 'black')(el => el.style.textDecoration = 'underline')

querySelectorAll 不适用于指定元素

querySelectorAll not working for specified elements

javascript

selectors-api