Difference between getElementById methods from DOM and Document classes

Question

GWT offers two ways of retrieving an HTML element by its unique ID.

What's the diference (if there is one) between :

• DOM.getElementById("divID") :

Gets the element associated with the given unique id within the entire document.

@param id the id whose associated element is to be retrieved
@return the associated element, or null if none is found

• Document.get().getElementById("divID") :

Returns the Element whose id is given by elementId. If no such element exists, returns null. Behavior is not defined if more than one element has this id.

@param elementId the unique id value for an element
@return the matching element

Answer 1

Basically nothing. At some point during GWT's lifecycle the whole DOM related code was rewritten into the dom package. In the new package for each HTML tag a specific Element class is available, like DivElement to provide specific methods for these tags. For example in you example if you would use it to look up div elements you could directly use the DivElement. The code would for both versions look as follows:

DivElement divID = (DivElement) Document.get().getElementById("divID");

or

DivElement divID = (DivElement) DOM.getElementById("divID").cast();

To be backward compatible the old code was kept. All Widget classes use the old Element class which is also returned by DOM.getElementById. The old Element class was changed and extends the new Element class, without any extra's. So they are basically the same. In general you should just use the Document.get(). This all can make it somewhat confusing when working with elements.

Answer 2

Look:

in com.google.gwt.dom.client.Document

public final native Element getElementById(String elementId) /*-{
    return this.getElementById(elementId);
}-*/;

in com.google.gwt.user.client.DOM

public static Element getElementById(String id) {
    return Document.get().getElementById(id).cast();
}

So it's just a "convenience wrapper method".

But although they both return Element these ara Elements from different packages, and as both Elements are JavaScriptObject and mean the same you can cast between them ignoring inheritance hierarchy either with java cast syntax () or with convenience method JavaScriptObject.<T extends JavaScriptObject> cast()

Btw. Document is JSO overlay type so "native this" points at this ;)