HTMLElement.getElementById

[Renato Bebić]

/**
* Gets element by id starting from HTMLElement it was called from.
* Author: Renato Bebić <renato.bebic[at]gmail.com>
* Tested and works on: Firefox 3.5, Chrome 3, Safari 4
*
* @param id to search for
*/
HTMLElement.prototype.getElementById = function( id ) {
var element = null;
if ( this.getAttribute('id') == id )
return this;
for ( var i = 0; i < this.childNodes.length; i++ ) {
if ( this.childNodes[i].nodeType == 1 ) {
element = this.getElementById( id );
if ( element != null )
break;
}
}
return element;
};

[Alex Vincent]

Why wouldn't the user just call elem.ownerDocument.getElementById(foo)?

There's no way this line would work - it'd end up in infinite recursion:
element = this.getElementById( this.childNodes[i], id );
(Note that getElementById only takes one argument.)

[Renato Bebić]

There's no way this line would work - it'd end up in infinite recursion:
element = this.getElementById( this.childNodes[i], id );
(Note that getElementById only takes one argument.)


Uh, nice catch, fixed that.

[Renato Bebić]

Hm, I didnt know about ownerDocument.
This could save me few hours.
Well, now I know. :thumbsup:

[rnd me]

since there can be only one unique ID per document, what difference would it make where you started?

if this were something new like Element.getElementsByTitle or something, i think it would make more sense.
Right now, it seems to be just a slower way of calling document.getElementById...

[Renato Bebić]

I worked on something like window widget. I used this concept to create windows.


var win1 = createWindow( 'content.html' );
var win2 = createWindow( 'content.html' );


createWindow creates object that is abstraction of window, so i can do:


win1.left = 10;
win1.top = 50;
win1.resizeable = false;


Now there are two custom windows with same content in one document.
To add some functionality to controls loaded from content.html I embed that function to use like this...


var win1Button = win1.getElementById( 'button1' );
win1Button1.onclick = doSomething;
var win2Button = win2.getElementById( 'button1' );
win2Button1.onclick = doSomethingElse;


getElementById only searches for ids in content of window it was called from.

This is just an example so it may not have much sense.
But helps when window is controlled by module ( module is controlled by app ),
and there can be multiply instances on same module, say, having opened to calculators.

I'm using XHTML 1.1 DTD and there was no problems with having more same elements
with same ids in one document. I think native getElementById returns first occurrence
it finds. Now, will try to implement ownerDocument.getElementById. It might speed
things up, so thanks for mentioning it.

[Renato Bebić]

I have just checked out ownerDocument property and it does not do what i wanted it to do. It just returns parent document object.

Then, my HTMLElement.getElementById function is not useless after all.

[rnd me]

getElementById only searches for ids in content of window it was called from.


if you have a ref to the window object as win1, you should be able to say win1.document.getElementById, and search only that window's document.

or am i missing something?

[Renato Bebić]

Windows are custom made out of div elements, and my application is managing them. Here are some screen shots: http://bit.ly/yeof4

[antimatter15]

Aren't IDs supposed to be global for the entire document? Aren't classes or names more appropriate for this?

[Renato Bebić]

This is because I'm more try it yourself than learn from others. This worked in all browsers so i assumed it is right. There appears to be no problems in having two or more same id-s in one document. Just because people say id attribute is supposed to be unique, I will use class from now on.

[rnd me]

This is because I'm more try it yourself than learn from others. This worked in all browsers so i assumed it is right. There appears to be no problems in having two or more same id-s in one document. Just because people say id attribute is supposed to be unique, I will use class from now on.

just because something works doesn't make it a good idea.
In fact in browser javascript, lots of things work that probably shouldn't, leading to fragmented standards undisciplined coding.

why IDs should be unique instead of recycled:

that's the spec
document.getElementById (instant)
avoids slow dom node search loops
#fragment identifiers in xhtml
validation
portable/functioning css selectors
ids create an API from identical chucks of your site on each page
xpath
predictable results from standard DOM methods
easier for others to modify/fix/extend knowing what is what and where is what
easier to create userScripts and userStyles
allows command-line searching like grep, findstr