querySelectorAll对指定元素不起作用

Question

I'm trying to achieve to select all specified elements that i want using looped querySelectorAll but I'm still failing. Only the first element is always selected. Here is my code:

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

What have I done wrong?

Answer 1

The return statement terminates the function execution, ie the subsequent code is not executed. Your function returns the first selected element in the first iteration of the loop and that's the end of it.

In this case there is no need to iterate the collection. If you want to get all the selected elements you can return the returned value of the querySelectorAll method, but then you can't use the style property that way as the returned collection doesn't have such property.

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

Note that IDs must be unique. You should use classes instead.

Answer 2

The problem is in the return statement, which only returns first element and then applies the chain to it. After that it is finished and no more elements get processed.

---

You can use this hack and have a truly universal applicator .

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

And this is how to use it.

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

Apply several changes at once:

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

---

Or mimick chaining , if you want to be nasty for whatever reason...

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

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

usage:

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

Answer 3

Use class instead of id -- Ids have to be unique, but classes can be assigned to as many element as you want and you can assign as many classes to each element as well, so

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

And I suggest you use Jquery instead, so you can do the background color as

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