How to enumerate all custom HTML tags using javascript?

Question

Say I have the following in my HTML file

<div class="foo"> item1 </div>
<div class="foo"> item2 </div>
<div class="foo"> item3 </div>

I can easily get all these divs using the following JavaScript code:

document.getElementsByClassName("foo")

Here, foo is defined somewhere in a CSS file as follows:

.foo { /* Some style */ }

Now, the question is, sometimes one would define foo as a custom HTML tag as follows

foo { /* Some style */ }

to allow for more succinct HTML:

<foo> item1 </foo>
<foo> item2 </foo>
<foo> item3 </foo>

But then the JavaScript line above does not work anymore. How should one get all the foo nodes in this case?

document.getElementsByTagName('foo') does not work for you? — ettanany
– ettanany, Commented Nov 25, 2016 at 20:17
<foo> won't be a valid html tag unless you define it otherwise. developer.mozilla.org/en-US/docs/Web/Web_Components/… — user4164128
– user4164128, Commented Nov 25, 2016 at 20:17

andreas · Accepted Answer · 2016-11-25 20:17:03Z

3

You can just use:

document.getElementsByTagName("foo");

See MDN for more information.

answered Nov 25, 2016 at 20:17

andreas

17k13 gold badges81 silver badges83 bronze badges

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

Comments

vijay · Accepted Answer · 2016-11-25 20:19:02Z

1

use same class like this <foo class="foo"> item1 </foo> <foo class="foo"> item2 </foo> <foo class="foo"> item3 </foo>

or use

document.getElementsByTagName("foo")

answered Nov 25, 2016 at 20:19

vijay

6315 silver badges11 bronze badges