Warning: session_start(): open(/tmp/sess_30540fc4b1dcc1caed0f878e3c3075ad, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Update All Dom Elements With A Specific Class Using JS - LearnShareIT

How To Update All Dom Elements With A Specific Class Using JS

Update all dom elements with a specific class using js

Are you having trouble and don’t know how to update all dom elements with a specific class using js? Don’t worry, let’s follow this article. We will give you some methods to do that.

Update all DOM Elements with a specific Class using JS

Method 1: Use the getElementsByClassName()

An HTML element’s class can be specified using the class attribute. The same class might apply to several HTML elements. JavaScript has a method getElementsByClassName() method to help you:

<!DOCTYPE html>
<html>
<body>

<h2>Update all dom elements with a specific class using JS</h2>
<p>Click the button to add number before headings that is of class “learnshareit”</p>

<button onclick="foo()">Add auto number</button>

<h2 class="learnshareit">LearnShareIT Angular</h2>
<p>Error “Could not find module ‘@angular-devkit/build-angular’”.</p>

<h2 class="learnshareit">LearnShareIT Python</h2>
<p>Round a float to 2 decimals in python</p>

<h2 class="learnshareit">LearnShareIT JavaScript</h2>
<p>How To Remove Object From An Array By It Value In JavaScript</p>

<script>
function foo() {
  var x = document.getElementsByClassName("learnshareit");
  for (var i = 0; i < x.length; i++) {
    x[i].innerText=i+1+". "+x[i].innerText;
  }
}
</script>

</body>
</html>

Syntax:

getElementsByClassName(names)

Parameter:

  • names: A string representing the class name(s) to match; multiple class names are separated by whitespace.

Output:

The getElementsByClassName() function will return an iterable array containing all dom elements which are of the given specific class. The logic behind this method is very simple. Because we want to update all dom elements with a specific class, we will use a for loop to iterate and update those DOM elements.

Method2: Use recursion

The above approach has given you basic knowledge on updating all elements with a specific class using JS. However, in practice, you might have many classes where you want to update all elements with each of these classes. If you continue doing as guided in the above approach, your code will be longer and difficult to maintain. We will show you another approach using recursion to tackle this disadvantage:

<!DOCTYPE html>
<html>
<body>

<h2>Update all dom elements with a specific class using JS</h2>
<p>Click the button to change color of these headings of different classes</p>

<button onclick="foo()">Add auto number</button>

<h2 class="learnshareit">LearnShareIT Angular</h2>
<p>Error “Could not find module ‘@angular-devkit/build-angular’”.</p>

<h2 class="learnshareit1">LearnShareIT Python</h2>
<p>Round a float to 2 decimals in python</p>

<h2 class="learnshareit2">LearnShareIT JavaScript</h2>
<p>How To Remove Object From An Array By It Value In JavaScript</p>

<script>
function foo() {
  for (i of document.getElementsByClassName("learnshareit"))
  	changeColor(i);
  for (i of document.getElementsByClassName("learnshareit1"))
  	changeColor(i);
  for (i of document.getElementsByClassName("learnshareit2"))
  	changeColor(i);
}
function changeColor(x){
x.style.color = "red";
x.style.fontFamily = "Tahoma";
x.style.fontSize = "39px";
}
</script>

</body>
</html>

The example above give instructions to change the font formats of the dom elements of class “learnshareit”, “learnshareit1”, “leanrshareit2”. If you define all the things you want to do with the dom element in a function such as changeColor(), you will be able to avoid writing the same code. Instead, you have to call the function inside the loop.

Output:

Summary

We have learned How to update all dom elements with a specific class using JS. We hope you will enjoy this article. If you have any questions, please comment below. We will respond as possible. Thank you for your reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *