A simple way to select DOM elements _javascript tips

From the JavaScript Authority Guide (jquery's ultimate way to find elements based on the style selector is to get all the DOM elements with getElementsByTagName (*), and then filter all DOM elements according to the style selector)

Today, we tried the speed of various methods of selecting elements, the native method is almost 8 times times faster than jquery, IE8 is the slowest, IE9 speed is almost IE8 3 times times, Chrome is the best, followed by Firefox.

How to select a document element:

1. Select elements by ID (getElementById)

1 Use Method: document.getElementById ("Domid")
Where Domid is the id attribute value of the element to be selected

2 compatibility: Lower than IE8 version of IE browser implementation of the getElementById method is case-insensitive, and will return the element that matches the name property.

2. Select element by name (Getelementsbyname)

1 Use Method: Document.getelementsbyname ("Domname")
Where Domname is the Name property value of the element to select

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 created to facilitate the submission of form data.

C. When you set the Name property for form, IMG, IFRAME, applet, embed, object elements, you automatically create properties that are named with the Name property value in the Document object. So you can refer to the corresponding DOM object by Document.domname

3 compatibility: The element matching the id attribute value in IE will also return together

3. Select elements by label name (getElementsByTagName)

1 Use Method: Element.getelementsbytagname ("TagName")
where element is a valid DOM element (including document)

TagName is the label name of the DOM element

2) Description: A. The return value is a NodeList collection (different from array)
B. This method can only select the descendant elements of the element that invokes the method.
C. tagname is case insensitive
D. When TagName is *, indicates that all elements are selected (subject to the B. Rules)
E. HTMLDocument defines some shortcut properties to access the label node. For example: Document images, forms, links properties point to , <form>, <a> tag elements collection, and Document.body and Document.head always point to the body and head tags (the browser also creates the Document.head property when the statement head label is not displayed)

4, through the CSS class selection element (Getelementsbyclassname)

1 Use Method: 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),
such as Element.getelementsbyclassname ("Class2 Class1") will select elements in elements descendant elements that apply both Class1 and Class2 styles (style names are not sequential)

2) Description: A. The return value is a NodeList collection (different from array)

B. This method can only select the descendant elements of the element that invokes the method.

3 Compatibility: IE8 and the following version of the browser do not implement the Getelementsbyclassname method

5. Select elements through CSS Selector

1 Use Method: Document.queryselectorall ("selector")
Where the 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 version of the browser only supports CSS2 standard selector syntax

The above JS Select DOM elements of the simple method is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.