A simple way to select DOM elements using JS

JSA simple method to select DOM elements. This article summarizes the various methods of js to select DOM, which can be used to learn js knowledge~ ~

Methods for selecting document elements:

1. Select elements by ID (getElementById)

1 ) Usage: document.getElementById("domId")
Among them, domId is the id attribute value of the element to be selected

2) Compatibility: lower than IE8 version The IE browser's implementation of the getElementById method does not distinguish between upper and lower 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")
Among them, 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 was created to facilitate submitting form data.

c. When setting the name attribute for form, img, iframe, applet, embed, and object elements, an attribute 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 with matching ID attribute values ​​in IE will also return

3. Select elements by tag name (getElementsByTagName)

1) Usage method: element.getElementsByTagName("tagName")
Among them, 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 (difference in Array)
b. This method can only select descendant elements of the element that calls this method.
c. tagName is not case-sensitive
d. When tagName is *, it means selecting all elements (subject to rule b.)
e. HTMLDocument will define some shortcut attributes to access tag nodes. For example: the images, forms, and links attributes of document point to the collection of ,

, tag elements, while document.body and document.head always point to the body and head tags (when the head declaration is not shown tag, the browser will also create the document.head attribute)

4. Select elements through CSS classes (getElementsByClassName)

1) How to use: element.getElementsByClassName("classNames")
Among them, element is a valid DOM element (including document)
classNames is a combination of CSS class names (spaces are used between multiple class names, which can be Separated by multiple spaces),
For example, element.getElementsByClassName("class2 class1") will select elements whose descendants of elements have both class1 and class2 styles applied (the style names are not in 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 this method.

3) Compatibility: IE8 and below browsers do not implement the getElementsByClassName method

##5. PassCSS selectorSelect elements

1) Usage method: document.querySelectorAll("selector")

Among them, 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 CSS2 Standard selector syntax

The above are the various methods for JS to operate dom. For more information, please go to

PHP Chinese website to search~

Related recommendations:

Detailed explanation of js operation array tutorial

Detailed explanation of js operation DOM object instance

A brief analysis of some common methods of JS operating DOM

The above is the detailed content of A simple way to select DOM elements using JS. For more information, please follow other related articles on the PHP Chinese website!