Home > Article > Web Front-end > Comprehensive analysis of js selectors

Comprehensive analysis of js selectors

怪我咯Original: 2017-04-01 09:13:491318browse

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 method is generally suitable for submitting forms. 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. So you can reference the corresponding dom object through document.domName

3.getElementsByTagName (get elements by element name)

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

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 If you want to get 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 the detailed content of Comprehensive analysis of js selectors. 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：Parsing Boolean types in JavaScript typesNext article：Parsing Boolean types in JavaScript types

See more

Comprehensive analysis of js selectors

Related articles