How to get DOM elements in JavaScript

Methods: 1. Use the getElementById method to obtain through the ID; 2. Use the getElementsByName method to obtain through the name value; 3. Use the getElementsByTagName method to obtain through the tag name; 4. Use the querySelector method to obtain through the selector.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

JS methods to get DOM elements (8 ways)

• Get by ID (getElementById)
• By name attribute (getElementsByName)
• Through the tag name (getElementsByTagName)
• Through the class name (getElementsByClassName)
• Get an element through the selector (querySelector)
• Get a group through the selector Element (querySelectorAll)
• Method to get html (document.documentElement)
• document.documentElement is specifically used to get the html tag
• Method to get body (document.body)
• Document.body is specifically used to obtain the body tag.

1. Get by ID (getElementById)

document.getElementById('id')

• The context must be document.
• Must pass parameters. The parameter is of string type and is used to obtain the id of the element.
• The return value only obtains one element, and returns null if it is not found.

2. Through the name attribute (getElementsByName)

document.getElementsByName('name')

• The context must be document, the content
• must pass parameters, parameters Yes, get the name attribute of the element.
• The return value is an array-like array. If not found, an empty array is returned.

[Recommended learning: javascript advanced tutorial]

3. Through the tag name (getElementsByTagName)

• The context can be a document or an element. Note that this element must exist.
• The parameter is to obtain the tag name attribute of the element, which is not case-sensitive.
• The return value is a class array, if not found an empty array is returned

4. Through the class name (getElementsByClassName)

var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated

• Context can be a document or an element.
• The parameter is the class name of the element.
• The return value is an array-like array. If not found, an empty array is returned.

5. Get an element through the selector (querySelector)

document.querySelector('.animated')

• The context can be a document or an element.
• The parameter is the selector, such as: "p .className".
• The return value only obtains the first element.

6. Get a set of elements through the selector (querySelectorAll)

document.querySelector('.animated')

• The context can be a document or an element.
• The parameter is the selector, such as: "p .className".
• The return value is an array-like.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to get DOM elements in JavaScript. For more information, please follow other related articles on the PHP Chinese website!