Solved

How does document.getElementById retreive references to HTML elements from the DOM? Tree Search? Hash Map?

Posted on 2009-07-09
8
204 Views
Last Modified: 2012-08-13
I was just speaking with a coworker about this and neither of us knew. I've had no luck researching it online, so I'm opening it for discussion.

How does document.getElementById actually find the elements in the DOM? Is it a hash map, or does it recursively check each node's children, etc?

Thanks.
0
Comment
Question by:AndrewLundgren
  • 4
  • 3
8 Comments
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24818314
it check the children node. it uses FIFO method. So the the first it finds that what is being used
0
 

Author Comment

by:AndrewLundgren
ID: 24818866
No, you misunderstood I guess. I'm not asking what happens when you have two identical ids, I'm asking what the search algorithm is.
0
 
LVL 4

Expert Comment

by:jamesbcox1980
ID: 24819071
When the page is created, a DOM tree is also created, behind the scenes, if you will.  This tree contains all the tags in the page, and sets every attribute of those tags as child nodes.  I believe document.getElementById() reads the DOM tree as if it were XML.  It runs a FOR loop down the list of tags looking for a child node of ID, and when it finds one, it checks the value against the argument specified in calling the method.  As soon as it sees the matching id, it exits the loop and returns that tag as an object.

IE also searches for case insensitive matches and checks the "name" attribute as well. (IE6 and IE7 that is)

I have no idea what the actual algorithm is, but I have created similar methods in AJAX to search XML files the same way.

1.  Count the objects in the tree
2.  Create a for loop for the number of objects
3.  on each loop, read the value of childNode "id"
4.  if childNode "id" matches document.getElementById argument "id",
     return all childNodes of parentNode
     if not, return next loop
5.  if no childNode "id" matches document.getElementById argument "id",
     return null
0
 

Author Comment

by:AndrewLundgren
ID: 24822938
So the answer is it recursively checks each node's children for the entire DOM tree? Your explanation is a little off, but it sounds like that's what you were saying.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Accepted Solution

by:
jamesbcox1980 earned 250 total points
ID: 24823655
Yeah sorry, I probably should have spent more time organizing my thoughts.  But yeah, you can't really say each node's children, because the children are nodes too. There is the parentNode and the childNode (actual objects in javascript).  Each childNode and be a parentNode to other childNodes, just like you can be a father and a son at the same time.  The terms are just relative to the nodes above and below them on the tree.

So each tag is represented as a node, which contains several childNodes including all attributes of that tag and any tag that is contained within another tag is stored as a childNode of the orginial one.  And they have their own childNodes, and so on.  The loop basically just climbs the tree checking every branch looking for a leaf, so to speak, called "id" and tries to match it against the argument set when the function was called (the argument is the variable on which a function operates, and in this case, it's the id we're looking for)

Finally, when the id is found, the information it returns is that entire branch of the tree.  It sends back the tag and all it's attributes in an object so that you can call each attribute with it's own methods.

Hope that was a little better.
0
 
LVL 4

Expert Comment

by:jamesbcox1980
ID: 24823673
correction: "Each childNode CAN be a parentNode to other childNodes......"
0
 

Author Comment

by:AndrewLundgren
ID: 24824402
It doesn't actually return the branch as you're thinking. Each node has three references to other nodes: "parentNode", "childNode", "nextSibling", "prevSibling(?)", which can be null if there is no respective node. The only reference that is returned by getElementById is the reference to the element with that id. You're probably right though, in how it crawls the tree.

Thanks for the input, made me think about some things in more depth than I have before.
0
 
LVL 4

Expert Comment

by:jamesbcox1980
ID: 24827951
Actually, it does return the entire node.  When you set a variable to getElementById(id), that variable becomes an object with it's own methods which can affect the original node.  For example you can say

var alert_box = document.getElementById('alert_div_1');

Now you can reference any of the childNodes simply by call that variable.  So if you want to set all the anchor tags in that div into an array, you can simply call:

var alert_box_anchors = alert_box.getElementsByTagName('a');

Which means they are all there.  Every child node is loaded into the object.  Another reason I say it's the entire branch, is that you can call those parentNodes, nextSibling, etc. directly from that object as well without referring back to your getElementById() method.  So you could call:

var alert_box_container_id = alert_box.parentNode.id.

If the javascript did not load the entire branch into the object, this would not be possible without recalling the original element every time.  The values themselves are not loaded into the object.  The object uses the tree and these methods to find the values.  So when you call for a value from that object contained within the variable, you are actually asking that object to grab the value from the DOM.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now