How to get multiple HTML elements from class name using getElementsByClassName()

GetElementsByClassName() is a method that can obtain all HTML elements for which the target class name is set. This article will introduce to you the specific use of the GetElementsByClassName() method.

Recommended Manual:
1.HTML5 latest version reference manual
2.JavaScript Chinese Reference Manual

For example, the class name of an HTML element is as follows

<h1 class="sample">标题</h1>
<p class="test">文本</p>
<a class="test" href="#">链接</a>

It has the function of giving the same class name to multiple HTML elements.

Therefore, there are usually many same class names in an HTML file. Using getElementsByClassName(), we can extract all HTML elements using any class name.

How to use getElementsByClassName()

Let’s take a look at the basic syntax first

Specify the class name to be extracted to the target scope by using a string to use.

doccument.getElementsByClassName( 类名 );

You can specify an entire HTML element by setting the target scope to document.

Of course, you can also set any range. (Details will be described later)

Also note that the return value is an HTML collection that is very similar to an array.

Method to get all elements with any class name

First assume you have the following HTML.

<h1 class="sample">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample">标题2</h2>
<p class="test">文本2</p>

There are two class names sample and test

For example, to get all HTML elements with the class name "test", you can write it as follows.

var result = document.getElementsByClassName('test');
console.log(result[0]);
console.log(result[1]);

Execution results

<p class="test">文本1</p>
<p class="test">文本2</p>

If "test" is specified as a string in the parameter, you can get the collection of all HTML elements containing the class name.

After that, if you use array output like subscript, you can get HTML elements, such as execution results.

Methods for specifying multiple classes

For example, the following HTML

<h1 class="sample test">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample test">标题2</h2>
<p class="test">文本2</p>

In this example, the h1 and h2 elements are assigned 2 classes Name

Even in this case, you can get all classes by providing multiple class names to the parameters.

var result = document.getElementsByClassName('sample test');
console.log(result[0]);
console.log(result[1]);

Execution results

<h1 class="sample test">标题1</h1>
<h2 class="sample test">标题2</h2>

Usage of GetElementsByClassName()      

Methods to specify root elements other than document

Let’s take a look The following HTML elements

<h1 class="sample test">标题1</h1>
<p class="test">文本1</p>
<div id="wrap">
    <h2 class="sample test">标题2</h2>
    <p class="test">文本2</p>
</div>

In this example, a div element is used to form a hierarchical structure.

With this description, for example, only the HTML elements within the id attribute value wrap can be used as objects.

Methods for specifying element range search classes

If you set the range of a div element like above, write it as follows.

var div = document.getElementById('wrap');
var result = div.getElementsByClassName('test sample');
console.log(result[0]);

Execution results

<h2 class="sample test">标题2</h2>

First, prepare getElementById() to obtain the div element.

After that, execute getElementsByClassName() with the obtained div element as the object.

Judging from the execution results, only the h2 element within the div element is obtained.

Recommended articles: ​ ​ ​
1.How to use getElementsByClassName()? Summary of getElementsByClassName() instance usage
Related video recommendations: ​                
1.Dugu Jiujian (1)_HTML5 video tutorial ​
2.JavaScript Quick Start_Jade Girl Heart Sutra Series

The above is the detailed content of How to get multiple HTML elements from class name using getElementsByClassName(). For more information, please follow other related articles on the PHP Chinese website!