Object array child attributes

Question

Hei guys, i recently started to develop an auto recognizer of all div tags from DOM.

I would like to get their properties, like offsetWidth, offsetLeft, ... as the console return when i try to show the variable.

my code looks like:

var elements = [];

    elements.push(document.querySelectorAll('body > div'));
    console.log(elements);

The console return:

[NodeList[3]]
0: NodeList[3]
0: div
1: div
2: div
length: 3
__proto__: NodeList
length: 1
__proto__: Array[0]

The HTML:

<div style="left:40px;top:10px;position:absolute">
        <img src="assets/images/text1.png" />
    </div>
    <div style="left:200px;top:88px;position:absolute">
        <img src="assets/images/text2.png" />
    </div>
    <div style="left:85px;top:166px;position:absolute">
        <img src="assets/images/text3.png" />
    </div>

My question is:

How i can access the array with my divs so i can get its length, its whole properties (like offsetLeft) if the expanded div in console shows properties like x,y,naturalHeight and many others...

EDIT

Sorry, i forgot to mention, the code should be PURE JS! Sorry for the wrong jQuery tag added...

I think this question addresses your question http://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery — sbonkosky, Jul 24 '15 at 19:25
With pure javascript I think this question answers it http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery — sbonkosky, Jul 24 '15 at 19:35

score 0 · Answer 1 · answered Jul 24 '15 at 19:27

0

You are actually initiating an array and pushing the elements from the querySelector to it. Instead you can directly assign the result of querySelector

var elements = document.querySelectorAll('body > div');
console.log(elements);

answered Jul 24 '15 at 19:27

Ammadu

1,675
15
17

score 0 · Answer 2 · answered Jul 24 '15 at 19:53

First of all, why would you use .push() with the array if you can directly declare it and initialize it with the elements:

 var elements = document.querySelectorAll('body > div');

Then for each element you will need to use .attributes to get all the attributes:

 for(elem in elements) {
     console.dit(elem.attributes);
 };

Object array child attributes

2 Answers2