/    Sign up×
Community /Pin to ProfileBookmark

New Way of Accessing DOM

Copy linkTweet thisAlerts:
May 15.2012

Hi All

Suprisingly it was new for me, when i was working with a core javascript code and found something very interesting there.

It was a new way DOM elements are being processed in javascript. I am not sure whether this is pure luck or something really interesting and innovating. Let me help decide this… ?

[B]Problem:[/B]
It was a simple textbox like

[CODE]<input type=”text” id=”userName” />[/CODE]

On a button click i just wrote like :

[CODE]alert(userName.value)[/CODE]

and surprisingly it worked.

I am not getting how this is being treated as a DOM object. i debugged and found complete DOM object is available once we use element id as a variable in javascript.

I am not getting exact reason why it is happening and if possible how it is getting converted as a DOM object, and if its so, so what’s the use of javascript/jquery left to make DOM for html elements.

kindly help me resolve this, wishing for a innovation soon ?

Thanks
Jatin

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooMay 15.2012 — This is a holdover from older days, and has a gotcha- if you have any variables with the same name as an id, the variable is exposed and the id is not. Also, the behavior is not in any specification, and is not guaranteed to continue in future versions of browsers that use it now. Better to use getElementById...
Copy linkTweet thisAlerts:
@MarPloMay 15.2012 — Hi

I tested and seems to works, also with other HTML tags::
<i>
</i>&lt;div id="userName"&gt;&lt;b&gt;test&lt;/b&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;&lt;!--
alert(userName.innerHTML); // &lt;b&gt;test&lt;/b&gt;
--&gt;&lt;/script&gt;

- But, for safe, I think it is better to use [b]document.getElementById('id')[/b] or with jQuery [b]$('#id')[/b] .
Copy linkTweet thisAlerts:
@jatinkindraauthorMay 16.2012 — Yes Marplo

You are correct. i tested it at my end and surprisingly it worked for any HTML tag.

So i understand for precautions its better to use getElementById/Jquery DOM accessor. But was just wondering whatr's the reason/cause for this actually conceptually.

Even its not the case with IE only it works with any browser, so we can't take it as a constraint of browser only. Any conceptual reason for this behaviour?

Thanks

Jatin
Copy linkTweet thisAlerts:
@MarPloMay 16.2012 — Hi,

This is also something new for me too.

Maybe someone professional know the answer.

Anyway, in the console of firebug addon in Mozilla appear this warning:

"[i]Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead[/i]".
Copy linkTweet thisAlerts:
@jatinkindraauthorMay 16.2012 — Hi Marplo

Thanks for your help, i think what Firefox says is something which seems to be suprising, it means by default for each element a DOM is already available pre made. Its convention to use getEleementById, but its availability is already there though.

So was just wondering is this the feature of browser or so, because each browser provides these, so might be a feature available above the limitations of browser.

So just wondering about some detailed inputs for the reason. Hope so we learn something new ?

Thanks

Jatin
Copy linkTweet thisAlerts:
@Declan1991May 16.2012 — So just wondering about some detailed inputs for the reason. Hope so we learn something new ?[/QUOTE]What's your question? As mrhoo said, it's still allowed occasionally for backwards compatibility, other than that, it's entirely wrong and you should never use it. Nothing to be learned.
×

Success!

Help @jatinkindra spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...