querySelectorAll changing attributes

Question

var p = document.getElementById(e),
   nodes = p.querySelectorAll('span');

   for (var i=0; i<nodes.length; i++) {
      node = nodes[i];
      node.innerHTML = '&nbsp;';
   }

If I make after console.log(p) and console.log(nodes), i see that the changes impacted nodes, but not p. Why and how to apply to p?

If i make nodes = p.childNodes; all works fine.

So, the main question, why it works with childNodes and doesn't work with querySelectorAll?

UPDATED

Finally, adding something like below can solve the issue:

for (var k=0; k<childNodes.length; k++) {
        for (var j=0; j<nodes.length; j++) {    
            if (childNodes[k].id === nodes[j].id) {
                p.replaceChild(nodes[j],childNodes[k]);
            } 
        }   
    }

Where nodes = querySelectorAll and childNodes = p.childNodes;

What is 'e'? What element does it refer to? You code affects all spans that are within the 'e' element. — Andy G, Jun 08 '13 at 20:17

Aiias · Accepted Answer · 2013-06-08T20:34:16.663

1

You can simply set the innerHTML of p directly:

p.innerHTML = '&nbsp';

Please note that Element.querySelectorAll() "returns a non-live NodeList of all elements descended from the element on which it is invoked that match the specified group of CSS selectors."

So by default, the element you are calling this on p will not be included in the returned NodeList.

edited Jun 08 '13 at 20:34

answered Jun 08 '13 at 20:16

Aiias

4,683
1
18
34

I don't understand... I have
with different elements there. I want to find all inside that
and change the innerHTML for each of them.
– jagger Jun 08 '13 at 20:19
@jagger - Your original question mentioned that the changes were **successfully** applied to all of the inner ``s, but not to `p` itself. So my answer addresses setting the `innerHTML` of `p`. – Aiias Jun 08 '13 at 20:20
Yes, that mean, that all the `` in `nodes` are changed, but the same `` in `p` are still not changed, but on my view they should be changed. If i make `nodes = p.childNodes;`, all works correctly. – jagger Jun 08 '13 at 20:25
`
...
..TEXT TO CHANGE..
` – jagger Jun 08 '13 at 20:28
@jagger - Check out this working jsFiddle http://jsfiddle.net/mvnCf/ . How does this differ from your code? – Aiias Jun 08 '13 at 20:30
hm... it works and i don't understand why =) let me check my code again. – jagger Jun 08 '13 at 20:33
referring to your edit _So by default, the element you are calling this on p will not be included in the returned NodeList._, how i can avoid this? – jagger Jun 09 '13 at 08:31
Short answer is you **can't**. [`Element.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll) only returns `descended` elements. – Aiias Jun 09 '13 at 08:33
All of the ``s descended from `p` were affected, that is correct. But `p` **itself** was not affected. – Aiias Jun 09 '13 at 08:37
Ok, well, but is there any trick to do? Like run over `p` after and check by `id` of elements, making `p[] = nodes[]`? – jagger Jun 09 '13 at 08:44

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

Your NodeList should be converted to an array before using it.

Fastest way to convert JavaScript NodeList to Array?

edited May 23 '17 at 12:23

Community

1
1

answered Jun 08 '13 at 21:02

donkeydown

698
7
16

It's not, as in this case it will be static array and i need dynamically change it. – jagger Jun 09 '13 at 08:28

querySelectorAll changing attributes

2 Answers2