JavaScipt Method for Selecting Document Elements of Recommendation

  • 2021-07-09 06:49:25
  • OfStack

Excerpt from the JavaScript Authoritative Guide (jQuery's ultimate way to find elements based on the style selector is to get all DOM elements with getElementsByTagName (*) and then filter all DOM elements based on the style selector)

How to select document elements:

1. Select elements through ID (getElementById)

1) How to use: document. getElementById ("domId")
Where domId is the id attribute value of the element to be selected

2) Compatibility: IE browsers lower than IE 8 implement the getElementById method insensitive to the case of the element ID number and return elements that match the name attribute.

2. Select the element by name name (getElementsByName)

1) How to use: document. getElementsByName ("domName")
Where domName is the name attribute value of the element to be selected

2) Description:

a. The return value is a collection of nodeList (different from Array)

The b. and ID attributes are different, and the name attribute is only valid in a few DOM elements (form forms, form elements, iframe, img). This is because the name attribute is created to facilitate submission of form data.

c. When the name attribute is set for an form, img, iframe, applet, embed, object element, an attribute named after the name attribute value is automatically created in the Document object. So the corresponding dom object can be referenced through document. domName

3) Compatibility: Elements that match ID attribute values in IE will also be returned once

3. Select the element by label name (getElementsByTagName)

1) How to use: document. getElementsByTagName ("tagName")

Where element is a valid DOM element (including document)
tagName is the label name of the DOM element

For example: 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 collection of nodeList (different from Array)

b. This method can select only descendants of the element that called the method.

c. tagName is case insensitive

d. When tagName is *, all elements are selected (subject to b. rules)

e. HTMLDocument defines 1 shortcut property to access the tag node. For example, images, forms and links attributes of document point to < img > , < form > , < a > Collection of tag elements, while document. body and document. head always point to body and head tags. (The browser also creates the document. head attribute when the declared head tag is not displayed.)

4. Select an element through the 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 (multiple class names are separated by spaces, which can be multiple spaces),

For example, element.getElementsByClassName ("class2 class1") will select the elements of elements descendant elements that apply both class1 and class2 styles (style names do not distinguish between order)

2) Description:

a. The return value is a collection of nodeList (different from Array)

b. This method can select only descendants of the element that called the method.

3) Compatibility: Browsers from IE 8 and later do not implement the getElementsByClassName method

5. Select elements through CSS selector

1) How to use: document. querySelectorAll ("selector")

selector is a legal CSS selector

2) Description: a. The return value is a collection of nodeList (different from Array)

3) Compatibility: IE8 and later browsers only support the selector syntax of the CSS2 standard


Related articles: