Follow the standard and WebKit source to explore DOM--get the getElementById of the element

Source: Internet
Author: User

Get elements by ID-- getElementByIdStandard
    • 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 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 === 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 directly obtained through the way.

Webkit Related Code Analysis

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.