Get elements by ID--
getElementById
Standard
- DOM 1, defined in Interface, is a
HTMLDocument
prototype 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
getElementById
put 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
Watch out.
- Note that
getElementById
the name is not in full capitalization ID
, but instead id
.
- Currently the browser
getElementById
is only defined in Document
and 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 window.foo
appears in JavaScript runtime) and keep it for backwards compatibility, but it is not in the standard, and the global variable is easily overwritten and should be avoided as much as possible.
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.
Check method:
<!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.
Compatibility
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
.
Other
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
Document
Inherited from TreeScope
, that is referred to in WHATWG NonElementParentNode
(see webcore/dom/document.h), getElementById
actually implemented in TreeScope
, called the private variable DocumentOrderedMap
pointer m_elementsById
getElementById
(webcore/dom/ TreeScope.h, Webcore/dom/treescope.cpp).
DocumentOrderedMap
In getElementById
fact is get
the packaging, the final realization see Webcore/dom/documentorderedmap.cpp
The inheritance structure of the iterator is descendantsOfType
TypedElementDescendantIteratorAdapter
TypedElementDescendantIterator
, and, TypedElementDescendantIterator<ElementType>::operator++
called, ElementIterator<ElementType>::traverseNext
see TypedElementDescendantIterator.h.
ElementIterator<ElementType>::traverseNext
Again called Traversal<ElementType>::next
(Webcore/dom/elementiterator.h), where the polymorphic ElementTraversal
(inheritance Traversal
) is actually called NodeTraversal
, NodeTraversal
in 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