How To Get All h1 Tags From HTML Document in Javascript

Share this Article
Reading Time: 3 minutes
261 Views

Inside this article we will see the concept i.e How To Get All h1 Tags From HTML Document in Javascript Tutorial. Article contains the classified information about Read All h1 Tags from Webpage Using Javascript getElementsByTagName() Method.

There is a very simple process which you will see and learn to read all h1 tags. It’s very useful when you are trying to read attributes, values, etc from web page tags. Here, we will see how to get contents from each h1 tag.

Learn More –

Let’s get started.

Application Programming

Let’s create a folder with name read-h1s in your localhost directory. In this project folder, create a file: index.html

Open index.html and write this complete code into it.

<!DOCTYPE html>
<html>

<head>
    <title>How To Find All h1 Tag Using Javascript</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <h1>This is first h1 tag</h1>

    <h2>This is first h2 tag</h2>

    <h2>This is second h2 tag</h2>

    <h1>This is second h1 tag</h1>

    <h1>This is third h1 tag</h1>

</body>

<script type="text/javascript">
    var all_h1s = document.getElementsByTagName("h1");

    for (var i = 0; i < all_h1s.length; i++) {
        var h1 = all_h1s[i];

        console.log(h1.innerHTML);
    }
</script>

</html>

Concept

To get all h1 from web page we used getElementsByTagName() of Javascript.

var all_h1s = document.getElementsByTagName("h1");

for (var i = 0; i < all_h1s.length; i++) {
    var h1 = all_h1s[i];

    console.log(h1.innerHTML);
}

Application Testing

Open your browser.

Next,

Your project URL will be like this.

URL: http://localhost/read-h1s/index.html

Output #1 (In Browser’s screen)

Output #2 (In Browser’s Console)

We hope this article helped you to learn How To Get All h1 Tags From HTML Document in Javascript Tutorial in a very detailed way.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Was this post helpful?

Get PHP Web Development Courses on Offer in just ₹299
Get PHP Web Development Courses on Offer in just ₹299