How can I access DOM objects in an external JavaScript file?

Question

I'm using an external JavaScript file to access DOM objects with in my documents. The problem is that jQuery doesn't seem to have access if it's an externally loaded file. My code looks like:

<html>
    <head>
    </head>

    <body>
        <div id="domToChange" someAttribute="hi"></div>
        <script src="officialJqueryLibrary"></script>
        <script src="myJS.js"></script>
    </body>
</html>

///////// myJS.js file

// Returns undefined
$('#domToChange').attr('someAttribute');

The DOM selector doesn't seem to find my div when the JavaScript file is loaded externally. However everything works when I place it inside the HTML document itself. How can I give DOM access to my JavaScript file?

In firebug it shows me the script and I've stepped through the script. Is there anything in particular that would keep external js files from accessing dom elements or is it suppose to just work right out of the box? If it's the latter then I probably did something silly, but the code that I posted is greatly simplified. I'm actually executing that code inside an event handler which is why I know the DOM object should be loaded when the script is executed. — Dr.Knowitall
– Dr.Knowitall, Commented Aug 14, 2013 at 22:53
Would be nice if everybody that asks would just give a real live code example. jsbin.com/irihew/1/edit took me 1min and all you have to do is add an external source and we can answer you in like 5mins then. — DoctorArnar
– DoctorArnar, Commented Aug 14, 2013 at 22:54
@Mr.Student does it work the same way in different browsers ? — woofmeow
– woofmeow, Commented Aug 14, 2013 at 23:40

Peter Mortensen · Accepted Answer · 2014-06-22 06:55:23Z

1

You should wrap all your DOM related code into

$(function() {
    //Code
});

Then the code gets executed when the DOM is fully loaded.

edited Jun 22, 2014 at 6:55

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 14, 2013 at 22:44

Michiel Dral

4,1251 gold badge23 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicolae Olariu · Accepted Answer · 2013-08-14 22:59:13Z

0

Try getting the value for your attribute, like so:

$('#domToChange').attr('someattribute');
//or
$('#domToChange').attr('someAttribute'); // i know you've tried this, but pls check demo

Demo here. On my machine, browser Chrome Version 28.0.1500.95 m, it just works fine.

answered Aug 14, 2013 at 22:59

Nicolae Olariu

2,5652 gold badges20 silver badges31 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2014-06-22 06:52:18Z

OK, this is a hit and miss kind of thing (but I believe it be an accurate explanation), but the real explanation for why it is happening lies here.

You need to understand that jQuery is an object that is initialized. So the jQuery object takes time to initiatize. As it says,

is very important to make the distinction between jQuery object and native DOM elements. Native DOM methods and properties are not present on the jQuery object, and vice versa.

So it is not necessary that the jQuery object gets initialized at the same time the DOM gets initialized.

Also, all scripts that are passed have a defer attribute. This is mostly browser dependent.

As it says,

When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no "document.write" in javascript) and thus, the user agent can continue parsing and rendering.

And it can sometimes delay the execution of the script. Hence the different result according to different people.

Peter Mortensen · Accepted Answer · 2014-06-22 06:54:49Z

0

You have to enclose the code like this:

$(function(){
     $('#domToChange').attr('someAttribute');
});

So that the code is executed when the DOM is ready.

edited Jun 22, 2014 at 6:54

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 14, 2013 at 22:43

RicardoE

1,7356 gold badges24 silver badges42 bronze badges

1 Comment

Niet the Dark Absol Over a year ago

No you don't, since it's placed AFTER the element on the page.

Collectives™ on Stack Overflow

How can I access DOM objects in an external JavaScript file?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related