How to get Element from Node

Question

From my understanding, document.querySelector returns a Node object. I can then call appendChild on this object.

I execute the following code to append a bunch of divs to my container div:

var container = document.querySelector('.container');
for (var i = 0; i < 400; i++) {
  var block = document.createElement('div');
  block.className = 'block';
  container.appendChild(block);
}

And end up with the following structure:

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  ...
  <div class="block"></div>
</div>

How can I loop through each element in my container div and add a new class to it using my existing container variable?

I have tried this:

...
container.childNodes[i].className = 'myClass';

It seems I need to access the Element object of the child Node, but I'm not sure how to do this.

That should work. What is `i`? Are all of the containers `childnodes` elements? Try `children` instead. — Bergi, Nov 24 '15 at 01:15
[difference between node and element](http://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object) — Barmar, Nov 24 '15 at 01:19
The nodes returned by `querySelector` are all elements, because you can't write a selector for non-element nodes. — Barmar, Nov 24 '15 at 01:20
Why don't you add the class in the loop where you create the DIVs? — Barmar, Nov 24 '15 at 01:21
Before you added the DIVs, the container DIV may have had a child text node. Appending the DIVs doesn't get rid of that, so `container.childNodes[0]` may be that text node. — Barmar, Nov 24 '15 at 01:23
@Bergi `i` is a number between 0 and 399. When I run `console.log(container.childNodes[i])` the output is `
`. Looking at https://developer.mozilla.org/en-US/docs/Web/API/Node, `children` doesn't seem to be a property or method of `Node`. @Barmar I didn't know about the text node! And I'm working on this CodePen: http://codepen.io/robkom/pen/RWmodz. I want to randomly loop through and simulate hover on the child elements. — chipit24, Nov 24 '15 at 01:31
@cornflakes24: I don't understand, isn't that log expected? What doesn't work? `.children`is a property of the [`Element` subclass of `Node`](https://developer.mozilla.org/en-US/docs/Web/API/Element) — Bergi, Nov 24 '15 at 01:38
I believe: nodes are sometimes elements, and elements are always nodes — markasoftware, Nov 24 '15 at 01:38

score 1 · Answer 1 · answered Nov 24 '15 at 01:52

1

Can you not just add it when you create the divs ?

var container = document.querySelector('.container');
for (var i = 0; i < 400; i++) {
  var block = document.createElement('div');
  block.className = 'block myClass';
  container.appendChild(block);
}

answered Nov 24 '15 at 01:52

cmd430

96
7

1

This is the trivial solution - if I could have done this, I would have (and thus not posted this question on SO). – chipit24 Nov 24 '15 at 21:08

score 0 · Accepted Answer · answered Nov 24 '15 at 21:14

To add classes to the elements in the container variable, I used the following code:

container.children[i].className = 'myClass';

I had to use children instead of childNodes. You can see the context in which this code was used here: http://codepen.io/robkom/pen/RWmodz.

How to get Element from Node

2 Answers2