change html text by javascript class name in hierarchy

Table of Contents

Example

<!DOCTYPE html>
<html>
<body>
<h1>The Document Object</h1>
<h2>The querySelectorAll() Method</h2>

<p>Add a background color all elements with class=\”example\”:</p>
<h2 class=\”example\”>A heading</h2>

<div class=\”asdf\”><p class=\”example\”>A paragraph.</p> </div>

<script>
const tinaicon = document.querySelectorAll(\”.asdf .example\”);
for (let i = 0; i < tinaicon.length; i++) {
tinaicon[i].innerHTML = \”your text here\”;
}
</script>

</body>
</html>

output

$\"\"$

Browser Support

document.getElementsByClassName() is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

Parameters

Parameter	Description
classname	Required. The class name of the elements. Search for multiple class names separated by spaces like \”test demo\”.