A Simple Method for JS to select DOM elements. js selects dom

A Simple Method for JS to select DOM elements. js selects dom

From the JavaScript authoritative guide (the ultimate way for jQuery to find elements based on the style selector is to first use getElementsByTagName (*) to get all DOM elements, and then filter all DOM elements based on the style selector)

Today, I tried various methods to select elements. The native method is almost eight times faster than jQuery, IE8 is the slowest, and IE9 is about three times faster than IE8, chrome performs best, followed by Firefox)

Method for Selecting document elements:

1. getElementById)

1) usage: document. getElementById ("domId ")
DomId indicates the id attribute value of the element to be selected.

2) compatibility: the implementation of the getElementById method by IE browser earlier than IE8 does not distinguish the case sensitivity of the element ID, and will return elements that match the name attribute.

2. getElementsByName)

1) usage: document. getElementsByName ("domName ")
DomName indicates the name attribute value of the element to be selected.

2) Description: a. The returned value is a nodeList set (different from Array)

B. Unlike the ID attribute, the name attribute is valid only for a few DOM elements (form, form element, iframe, img ). This is because the name attribute is created to facilitate the submission of form data.

C. When you set the name attribute for the form, img, iframe, applet, embed, and object elements, an attribute named after the name attribute value is automatically created in the Document object. Therefore, you can use document. domName to reference the corresponding dom object.

3) compatibility: The elements matching the ID attribute values in IE will also be returned together.

3. getElementsByTagName)

1) usage: element. getElementsByTagName ("tagName ")
Element is a valid DOM element (including document)

TagName is the Tag Name of the DOM element.

2) Description: a. The returned value is a nodeList set (different from Array)
B. This method can only select the child element of the element that calls this method.
C. tagName is case insensitive
D. When the tagName is *, all elements are selected (B. Rules must be followed)
E. HTMLDocument defines some shortcut attributes to access tag nodes. For example, the images, forms, and links attributes of a document point to the , <form>, and <a> Tag Element Set, while the document. body and document. head always points to the body and head labels (when the declared head label is not displayed, the browser will also create a document. head attribute)

4. getElementsByClassName)

1) usage: element. getElementsByClassName ("classNames ")
Element is a valid DOM element (including document)
ClassNames is a combination of CSS class names (multiple class names can be separated by spaces ),
For example, element. getElementsByClassName ("class2 class1") selects elements with both the class1 and class2 styles applied to element descendants of elements (style names do not differentiate order)

2) Description: a. The returned value is a nodeList set (different from Array)

B. This method can only select the child element of the element that calls this method.

3) compatibility: The getElementsByClassName method is not implemented for browsers in IE8 and earlier versions.

5. Select elements using the CSS selector.

1) usage: document. querySelectorAll ("selector ")
The selector is a valid CSS selector.

2) Description: a. The returned value is a nodeList set (different from Array)

3) compatibility: IE8 and earlier browsers only support the CSS2 standard selector syntax.

The simple method for choosing DOM elements in the above JavaScript code is to share all the content with you. I hope to give you a reference, and I hope you can also provide more support for the help house.