Javascipt How to select document elements

Excerpt from the JavaScript authoritative guide (jquery the ultimate way to find elements based on a style selector is to get all DOM elements with getElementsByTagName (*) First, and then filter all DOM elements based on the style selector)

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: document.getElementsByTagName ("TagName")
where element is a valid DOM element (including document)
TagName is the tag name of the DOM element

such as: var ainput = document.getelementsbytagname ("input");

var aName = ainput[0];

var pwd = ainput[1];

var cfm = ainput[2];

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 the Getelementsbyclassname method

5. 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

Javascipt How to select document elements