Getting DOM element information from javascript

Question

So I'm trying to grab some attributes of a div table from the DOM from within a script - and failing.

Code should speak for itself:

<head>
<script type = "text/javascript" src = "SCRIPT_IN_QUESTION.js"></script>
</head>

<body>
      <div id = "my_elements">

            <!-- I want to access 'attribute-one' data attributes from 
                 all children -->
            <div data-attribute-one = "Hello"></div>
            <div data-attribute-one = "World"></div>
      </div>       

</body>

I've seen how this is done with an embedded script in the DOM using something along the lines of:

 <script type = "text/javascript">

      var values  = document.getElementById('my_elements').childNodes;

      var foo = values[0].getAttribute('data-attribute-one');

 </script>

I'm trying to access these attributes from within a script that isn't embedded into the DOM, and getAttribute is undefined - guess you can only ue that within the DOM.

How do I access this data in a script 'outside' the DOM?

As the below comment states, doing this after the DOM has been loaded makes sense to do, and I'm doing it something like:

window.addEventListener('load', onload, false);


function onload(){

    var data = document.getElementById('canvas_segments').childNodes;

    //This throws an undefined error
    var attribute = data[0].getAttribute('data-attribute-one'); 
}

Many thanks

What if you put your `` *after* div definitions? If that's not an option, you may want to put the code into body.onload/window.onload events — Yuriy Galanter, May 12 '14 at 18:55
Hey thanks for the comment!, that is actually exactly what I'm trying to do. I'll edit the question. — Lee Brindley, May 12 '14 at 18:57
Unless your SCRIPT_IN_QUESTION.js has a function in it that keeps your code from running after the DOM is loaded, there is your problem. Your JavaScript code runs as soon as you hit that ` — krillgar, May 12 '14 at 19:00
Ok cool, I'll probably go with setting the tag after the div's. Just curious as to what i'm doing wrong considering i'm executing it after the 'load' event. — Lee Brindley, May 12 '14 at 19:03

score 1 · Answer 1 · answered May 12 '14 at 19:01

You have a timing issue here. The script in question is being executed before the DOM is complete, so there is no element.

Either you can move the script tag to the bottom of the page, after all other markup, or you can put the code in a window.onload function.

score 1 · Accepted Answer · answered May 12 '14 at 19:03

1

Use .children instead of .childNodes (which also includes text nodes). And you may need to wrap your call into onload event, e.g.

<body onload="onLoad()";>
      <div id = "my_elements">

            <!-- I want to access 'attribute-one' data attributes from 
                 all children -->
            <div data-attribute-one = "Hello"></div>
            <div data-attribute-one = "World"></div>
      </div>       

</body>

and in your script:

function onLoad() {
   var values  = document.getElementById('my_elements').children;
   var foo = values[0].getAttribute('data-attribute-one');
}

answered May 12 '14 at 19:03

Yuriy Galanter

38,833
15
69
136

Bingo! Thank-you again for your time! Using .childNodes was the problem. – Lee Brindley May 12 '14 at 19:05
Or if there is need to use '.childNodes', then you should check the 'nodeType' property of each node and check if there is no text nodes you try to process – kuzzmi May 12 '14 at 19:06

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

First of all in the code snippet above, you are attaching the javascript before the DOM structure is loaded. Attach the js file after body so that the HTML content gets loaded first and then the js executes.

After you have done this you will still hit an issue saying, 'Uncaught TypeError: undefined is not a function.' This will be because you are using 'ChildNodes' instead of 'Children.' The difference between the two is that Children gets only Elements whereas 'ChildNodes' will fetch nodes too. Refer this question for a clearer distinction between the two (What is the difference between children and childNodes in JavaScript?)

You might be interested in a working copy of your code: http://goo.gl/HonxtJ

Getting DOM element information from javascript

3 Answers3