Get all html tags with Javascript

Question

Does anybody knows how can I get all the HTML tags that exist in a page? I need to get only the tags without their IDs or other attributes, and create a kind of tree-structure of them. Prefer to do that with Javascript or JQuery.

For example, This HTML code:

<html>
  <head>
    <title>
      Example Page 
  </title>
  </head>
  < body>
    <h1 style="somestyle">
      Blabla
  </h1>
  <div id="id">
    <table id="formid">
      <tr>
        <td>
        </td>
      </tr>
      </table>
  </div>
  </body>
</html>

should return return:

html
head
title
body
h1
div
table
tr
td

document.querySelectorAll('*'). or traverse the DOM (document.body) recursively with .children. — A1rPun
– A1rPun, Commented Mar 2, 2015 at 15:46
What is the use case for this? It is not trivial reproducing the DOM — charlietfl
– charlietfl, Commented Mar 2, 2015 at 15:53
To clarify, do you want the output you described under "will return:", or an indented tree-like version of that? — Nicky McCurdy
– Nicky McCurdy, Commented Mar 2, 2015 at 15:58
It doesn't matter so much.. @NicolasMcCurdy, I tried to do this with querySelectorAll but it return a lot of junk with it and I need the tag name only. — Gal
– Gal, Commented Mar 3, 2015 at 8:02

Jordi Castilla · Accepted Answer · 2015-03-02 16:00:50Z

11

You can pass a * to getElementsByTagName() so that it will return all elements in a page:

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here
}

answered Mar 2, 2015 at 16:00

Jordi Castilla

27.1k8 gold badges73 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stewartside · Accepted Answer · 2015-03-02 16:34:24Z

0

Its a very simple piece of Javascript

document.querySelectorAll('*')

Try it out in the console log and it will show you all the tags in the document.

Another example is to getElementsByTagName

These do print out into an array, so you can then loop through the elements and doing different things on different elements.

Example:

var items = document.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
    //do stuff
}

edited Mar 2, 2015 at 16:34

answered Mar 2, 2015 at 16:00

Stewartside

21k13 gold badges64 silver badges82 bronze badges

1 Comment

Katana314 Over a year ago

And, just to add a little more info, each HTML element will have a "tagName" property that gives the basic name you're looking for. It's uppercase by default

dayuloli · Accepted Answer · 2015-03-19 15:10:09Z

0

I did it with getElementsByTagName and .tagName for every value in the return array.

edited Mar 19, 2015 at 15:10

dayuloli

17.2k18 gold badges76 silver badges133 bronze badges

answered Mar 3, 2015 at 8:13

Gal

7293 gold badges8 silver badges9 bronze badges

Collectives™ on Stack Overflow

Get all html tags with Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related