Get elements by ID--
- DOM 1, defined in Interface, is a
Element getElementById(in DOMString elementId) that returns NULL when no element with the corresponding ID exists, and the method does not throw any exceptions.
- DOM 2, moved to
Document (the original
HTMLDocument parent Interface), the prototype does not change.
- DOM 3 specifically declares that the browser should use the
Attr.isId Attr to determine if the ID is the same, adding a "Attributes with the name" id "or" id "is not of type ID unless so defined." Adds a description of the error implementation that ie7-will return with the element name "id"
- WHATWG will be
NonElementParentNode in, so
NonElementParentNode the realization of
DocumentFragment also have this method (and the standard,
DocumentFragment only inherited
Node , should not have this method)
- DOM 4 is currently the same as WHATWG
- Note that
getElementById the name is not in full capitalization
ID , but instead
- Currently the browser
getElementById is only defined in
DocumentFragment on, WHATWG's documentation mentions not being added to
Element is for this feature to hang up the sizzle before the jquery (<=1.2.6) unit test (Legacy jquery used
elem.getElementById To determine if the element is
Document ), see the discussion on the mailing list.
- Elements that are not inserted into the DOM (as used
appendChild ) are not searchable by this method. Because of the difference between the WHATWG and the World Wide Web Standard, it
DocumentFragment is also possible to search for elements in the browser using this method.
- Some browsers create an element with an ID as a global variable (such as
id="foo" an element that
The standard stated that when there are multiple elements with corresponding IDs, the behavior of the browser is undefined , but most browsers choose to return the first element that has that ID. As for what is "first", it depends on how the DOM tree in the browser implementation is traversed. WHATWG describes the Tree-order, the first-order DFS.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <Div> <DivID= "Foo"class= "a"></Div> </Div> <DivID= "Foo"class= "B"></Div></Body></HTML>
Browser console Run
document.getElementById (' foo ')
Chrome,firefox and IE both return the div of class= "a", which is the first order DFS specified in WHATWG.
Ie7-will also count elements that have the same name as the query ID, so you might need to make a decision if compatibility with ie7-is required
elem.id === id .
In Dom 2, the ID is defined on HtmlElement (DOM 3 does not have the DOM HTML standard), WHATWG puts the ID in Element, defines it
attribute DOMString id , and describes the
id global attribute. In short, in HTML as long as the element can have an ID, and can be
elem.id directly obtained through the way.
Webkit Related Code Analysis
TreeScope , that is referred to in WHATWG
NonElementParentNode (see webcore/dom/document.h),
getElementById actually implemented in
TreeScope , called the private variable
getElementById (webcore/dom/ TreeScope.h, Webcore/dom/treescope.cpp).
getElementById fact is
get the packaging, the final realization see Webcore/dom/documentorderedmap.cpp
The inheritance structure of the iterator is
TypedElementDescendantIterator , and,
ElementIterator<ElementType>::traverseNext see TypedElementDescendantIterator.h.
Traversal<ElementType>::next (Webcore/dom/elementiterator.h), where the polymorphic
Traversal ) is actually called
next the overload utilization
traverseNextTemplate implementation. Finally through Webcore/dom/nodetraversal.h can see the order of access is firstchild---nextSibling---nextancestorsibling, that is, the first order DFS, In accordance with WHATWG's description.
Follow the standard and WebKit source to explore the DOM--get the getElementById of the element