Warning: session_start(): open(/tmp/sess_35ae9d47636508eb20577c77c486823a, 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 Get DOM Element By Attribute Using JavaScript - LearnShareIT

How To Get DOM Element By Attribute Using JavaScript

In this article, you will learn how to get DOM Element by Attribute using JavaScript in two ways: the getElementById() method and the querySelectorAll() method. Read the following explanations and examples to understand the two methods above.

Get DOM Element by Attribute using JavaScript.

Using the getElementById() method

getElementById() in JavaScript is a method of DOM object used to get a DOM element through the value of the element’s id attribute. This method will return the Element Object if an element with a matching id is found and will return “null” if no matching element is found.

Example:

Let’s take out the paragraph containing the student’s name with id="stdName" and print out its content.

<html>
  <body>
    <p id="stdName">Andrew</p>
	<p id="stdAddress">USA</p>
	<p>Result:</p>
	<script>
      //Get DOM element by ID attribute
      var element = document.getElementById("stdName");
      
      // Print out the element's content
      document.write("Name of student: " + element.innerHTML);
    </script>
  </body>
</html>

Output:

Andrew
USA
Result:
Name of student: Andrew

The getElementById() method is the easiest way to get DOM Element by Attribute using JavaScript. However, this method only returns a single value because we cannot give the same id name to multiple elements.

Using the querySelectorAll()method

querySelectorAll() or document.querySelectorAll() in JavaScript is a method of the DOM object. This method gets all the elements in the DOM according to the specified CSS selectors. We can get elements according to various conditions by specifying CSS selectors as an argument in querySelectorAll().

The querySelectorAll() method will return a NodeList Object containing all found elements. This method return an empty NodeList Object if no matching element is found.

Example:

Let’s take out the paragraph containing the student’s information with class="stdName" and print out its content.

<html>
  <body>
    <p id="stdName" class="student">Andrew</p>
    <p id="stdAddress" class="student">USA</p>
    <p>Result:</p>
    <script>
      document.write("<p> Student's information </p>");
      
      // Get DOM element by Class attribute
      const element = document.querySelectorAll("p[class=student]");
      
      // Print out the element's content
      for (var i = 0; i < element.length; i++) {
        document.write(element[i].innerHTML + " ");
      }
    </script>
  </body>
</html>

Output:

Andrew
USA
Result:
Student's information
Andrew USA

This way, we can get DOM Element by Attribute using JavaScript and get back all returned values. Elements in the returned NodeList Object will be distinguished by their index value. This value starts at 0 and increments by 1 unit (0, 1, 2, 3, 4…).

Summary

Through this article, I have introduced to you two ways to get DOM Element by Attribute using JavaScript. I recommend you utilize the querySelectorAll() method to get all the returned DOM elements. Hope this article will help your project.

Leave a Reply

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