Excerpted from the authoritative JavaScript guide (the ultimate way of jQuery to find elements based on style selector is to first use getElementsByTagName(*) to get all DOM elements, and then filter all DOM elements according to style selector)
Today I tried the speed of various elements selection methods. The native method is about 8 times faster than jQuery. IE8 is the slowest, IE9 is about 3 times faster than IE8, Chrome performs the best, followed by Firefox)
Methods to select document elements:
1. Select element by ID (getElementById)
1) Usage method: document.getElementById("domId")
where domId is the id attribute value of the element to be selected
2) Compatibility: IE browsers with lower than IE8 versions do not distinguish the case of the element ID number and will return elements matching the name attribute.
2. Select elements by name (getElementsByName)
1) Usage method: document.getElementsByName("domName")
where domName is the name attribute value of the element to be selected
2) Description: a. The return value is a nodeList collection (different from Array)
b. Unlike the ID attribute, the name attribute is only valid in a few DOM elements (form form, form element, iframe, img). This is because the name attribute is created to facilitate submission of form data.
c. When setting name attributes for form, img, iframe, applet, embed, object elements, attributes named after the name attribute value will be automatically created in the Document object. Therefore, the corresponding dom object can be referenced through document.domName
3) Compatibility: Elements that match ID attribute values in IE will also return together
3. Select elements by tag name (getElementsByTagName)
1) Usage method: 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. This method can only select descendant elements of the element that calls the method.
c. tagName is case-insensitive
d. When tagName is *, it means that all elements are selected (responsible to b. rule)
e. HTMLDocument defines some shortcut properties to access the tag node. For example: the images, forms, and links attributes of the document point to the <img>, <form>, and <a> tag element collection, while document.body and document.head always point to the body and head tags (when the declared head tag is not displayed, the browser will also create the document.head attribute)
4. Select elements through CSS class (getElementsByClassName)
1) Usage method: element.getElementsByClassName("classNames")
Where, element is a valid DOM element (including document)
classNames is a combination of CSS class names (multiple class names are separated by spaces, which can be separated by multiple spaces).
For example, element.getElementsByClassName("class2 class1") will select elements in the descendant elements of elements that have both class1 and class2 styles applied (the style names do not distinguish between order)
2) Description: a. The return value is a nodeList collection (different from Array)
b. This method can only select descendant elements of the element that calls the method.
3) Compatibility: IE8 and below browsers do not implement the getElementsByClassName method
5. Select elements through the CSS selector
1) Usage method: document.querySelectorAll("selector")
Where, the selector is a legal CSS selector
2) Description: a. The return value is a nodeList collection (different from Array)
3) Compatibility: IE8 and below browsers only support the CSS2 standard selector syntax
The simple method of selecting DOM elements in JS is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.