Home > Article > Web Front-end > Comprehensive analysis of js selectors for you (basic tutorial)

Comprehensive analysis of js selectors for you (basic tutorial)

亚连Original: 2018-05-21 09:25:591340browse

Below I will bring you a comprehensive analysis of js selectors. Let me share it with you now and give it as a reference for everyone.

The native JS selectors include getElementById, getElementsByName, getElementsByTagName and getElementsByClassName. Below I will introduce the usage of these four selectors one by one.

1.getElementById (get element by ID)

Usage: document.getElementById("Id");Id is the id attribute value of the element to be obtained.

2.getElementsByName (get elements through name attribute)

Usage: document.getElementsByName("Name");Name is the name attribute value of the element to be obtained, this This method is generally suitable for submitting form data. When the name attribute is set when the element is form, img, iframe, applet, embed, or object, 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.getElementsByTagName (get the element through the element name)

Usage: document.getElementsByTagName(TagName);TagName is To get the tag name of an element, when TagName is *, it means getting all the elements. The document can also be replaced with a DOM element, but in this way you can only get the subset of elements behind the DOM element.

4.getElementsByClassName (get elements through CSS classes)

Usage: document.getElementsByClassName(ClassName); ClassName is the CSS class name of the element to be obtained. If you want to obtain multiple ones at the same time, separate them with spaces after each CSS class. For example, document.getElementsByClassName("class2 class1") will obtain elements of class1 and class2 styles. The document can also be replaced with a DOM element, so that only a subset of elements behind the DOM element can be obtained.

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
<p>我是通过标签获取</p>
<p id="box">我是通过id获取</p>
<p class="box1">我是通过class获取</p>
<form action="" name="box2">
  我是通过name获取
</form>
</body>
<script type="text/javascript">
  var p = document.getElementsByTagName("p");
  var box = document.getElementById("box");
  var box1 = document.getElementsByClassName("box1");
  var box2 = document.getElementsByName("box2");
</script>
</html>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed analysis of JS abstract factory pattern for you

Detailed analysis of JS function debouncing and throttling (Picture and text tutorial)

How to make your JS code more beautiful and easy to read (please see the detailed introduction)

The above is the detailed content of Comprehensive analysis of js selectors for you (basic tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Large-Scale JavaScript Application Architecture Design Patterns (Advanced)Next article：Large-Scale JavaScript Application Architecture Design Patterns (Advanced)

See more

Comprehensive analysis of js selectors for you (basic tutorial)

Related articles