The speed of various methods of selecting elements, using the native method is almost 8 times times faster than jquery, IE8 is the slowest, IE9 speed is almost IE8 3 times times, chrome performance is the best, followed by Firefox
To select a document element:
1. Select elements by ID (getElementById)
1) How to use: document.getElementById ("Domid")
Where Domid is the id attribute value of the element to be selected
2) Compatibility: the implementation of the getElementById method under the IE8 version of IE is not distinguished by the case of the element ID number, and the element that matches the name attribute is returned.
2. Select an element by name (Getelementsbyname)
1) How to use: Document.getelementsbyname ("Domname")
Where Domname is the Name property value to select the element
2) Description: A. The return value is a NodeList collection (different from array)
B. Unlike the id attribute, the Name property is valid only in a few DOM elements (form form, form element, iframe, IMG). This is because the Name property is built to facilitate the submission of form data.
C. When you set the Name property for a form, IMG, IFRAME, applet, embed, object element, an attribute named with that Name property value is automatically created in the Document object. So you can refer to the corresponding DOM object by Document.domname
3) Compatibility: elements that match the id attribute value in IE will also be returned together
3. Select elements by tag name (getElementsByTagName)
1) How to use: Element.getelementsbytagname ("TagName")
where element is a valid DOM element (including document)
TagName is the tag name of the DOM element
2) Description: A. The return value is a NodeList collection (different from array)
B. The method can only select the descendant elements of the element that called the method.
C. tagname case-insensitive
D. When TagName is *, all elements are selected (subject to B. Rules)
E. HTMLDocument defines some shortcut properties to access the label nodes. Such as: document's images, forms, links properties point to , <form>, <a> tag element collection, Document.body and Document.head always point to the body and head tags (the browser also creates Document.head properties when the head tag is not shown)
4. Select elements by CSS class (Getelementsbyclassname)
1) How to use: Element.getelementsbyclassname ("Classnames")
where element is a valid DOM element (including document)
Classnames is a combination of CSS class names (with spaces between multiple class names, which can be separated by multiple spaces),
Elements such as Element.getelementsbyclassname ("Class2 Class1") will be selected with Class1 and Class2 styles applied in the elements descendant elements (style names are not distinguished in order)
2) Description: A. The return value is a NodeList collection (different from array)
B. The method can only select the descendant elements of the element that called the method.
3) Compatibility: IE8 and the following versions of browsers do not implement Getelementsbyclassname method 5, select element 1 via CSS selector) usage: document.queryselector ("selector") or Element.queryselector ("selector") where selector is a valid CSS selector 2) Description: When the Document.queryselector ("selector") method is called, the document element Finds matching elements within the enclosing element.queryselector ("selector") method, only the matching elements are found within the bounds of the descendant elements of the element. 3) Compatibility: IE8 and the following versions are not supported
6. Selecting elements via CSS Selector
1) How to use: Document.queryselectorall ("selector")
Where selector is a legitimate CSS selector
2) Description: A. The return value is a NodeList collection (different from array)
3) Compatibility: IE8 and the following versions of browsers only support CSS2 standard selector syntax
A collection of methods for selecting DOM elements in JS
