window object properties returning a dom node?

Question

I've noticed that when I am trying to check for a variable within the window object, javascript will return the DOM node of an id matching the variable name. Consider the following code:

<html>
<body>
  <div id='hello'>
  </div>
  <script>console.log(window.hello);</script>
</body>
</html>

In this example, the console will output the DOM object representation of <div id='hello'> and any of its descendants. I've also observed that overwriting window.hello doesn't affect the DOM and subsequent operations show the new assignment.

Is there a way to type check specifically for a DOM object? Alternatively, is there a way to avoid this behavior? Although not difficult, having to be conscious of page ID's when choosing namespaces seems like it could become very counter intuitive.

possible duplicate of Javascript isDOM -- How do you check if a Javascript Object is a DOM Object? — Daniel A. White
– Daniel A. White, Commented Dec 13, 2013 at 20:53
My question was less about they type checking and more about the nature of javascript returning a DOM node when attempting to access an undefined variable. — devnill
– devnill, Commented Dec 13, 2013 at 21:05

Community · Accepted Answer · 2017-05-23 10:32:18Z

2

Some browsers will create a global variable for each id value in the document. In general, you should use:

document.getElementById("hello")

to retrieve DOM elements by id.

This is yet another reason why you should generally avoid using the global namespace any more than required as it is significantly polluted by this browser practice.

If you really want to test whether something is DOM object, you can see how that is done here: JavaScript isDOM -- How do you check if a JavaScript Object is a DOM Object?, but you should, in general, not need to do this for regular DOM programming purposes.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Dec 13, 2013 at 20:55

jfriend00

712k105 gold badges1.1k silver badges1k bronze badges

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

4 Comments

Don Rhummy Over a year ago

This is a standard. It's the HTML5 standard, see more in my post: stackoverflow.com/a/20575948/857025

jfriend00 Over a year ago

@DonRhummy - OK, I'll retract the part about it not being a standard. Sounds horrible though with automatic global namespace pollution.

Don Rhummy Over a year ago

I agree. It's a dumb standard. It should be something like window.dom.hello.

jfriend00 Over a year ago

@DonRhummy - yep, not sure how that one got through the committee.

Don Rhummy · Accepted Answer · 2013-12-13 21:03:13Z

1

This is actually the HTML5 standard:

http://www.whatwg.org/specs/web-apps/current-work/#named-access-on-the-window-object

A way to be safe about this is to make all your javascript objects and functions within a "namespace":

var objs = {

    someObject: document.getElementById( "someThing" ),

    someFunction: function() {},

    hello: {
        ...
    }
};

//Now you can access it without interfering with the DOM "hello"
console.log( window.objs.hello );

answered Dec 13, 2013 at 21:03

Don Rhummy

26.2k55 gold badges199 silver badges368 bronze badges

1 Comment

devnill Over a year ago

Ah ha! I haven't heard about that feature of HTML5! Thanks for the link!

Collectives™ on Stack Overflow

window object properties returning a dom node?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related