Home > Developer > Web Develop
getElementByIdHTMLDocument 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.Document (the original HTMLDocument parent Interface), the prototype does not change.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"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)getElementById the name is not in full capitalization ID , but instead id .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.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.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.
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.
DocumentInherited 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).
DocumentOrderedMapIn 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>::traverseNextAgain 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
