Is there a way to get a list of all existing HTML tags via JavaScript?

Question

There is an exercise in a bootcamp I am attending which tasks one to create a jQuery like selector, here is part of the test:

describe("selectorTypeMatcher", function() {
  it("should return the 'id' type for an id selector", function() {
    var type = selectorTypeMatcher('#pagetitle');
    expect(type).toEqual("id");
  });

  it("should return the 'class' type for a class selector", function() {
    var type = selectorTypeMatcher('.image');
    expect(type).toEqual("class");
  });

  it("should return the 'tag.class' type for a tag.class selector", function() {
    var type = selectorTypeMatcher('img.thumbnail');
    expect(type).toEqual("tag.class");
  });

  it("should return the 'tag' type for a tag selector", function() {
    var type = selectorTypeMatcher('div');
    expect(type).toEqual("tag");
  });
});

The following is part of function which I created as described in the test spec.

var selectorTypeMatcher = function(selector) {
  if (selector.includes('#')) return 'id';
  if (selector.indexOf('.') == 0) return 'class';
  if (/<[a-z][\s\S]*>/i.test() && selector.includes('.')) return 'tag.class';
};

I am stuck at the conditional which would check for a tag and class e.g. div.foo

I thought of created an array which would contain all existing tags...

var tags = ["a", "div", "span", "form", "h1", "h2", "h3", "h4"];

And then loop over them and see if that value was followed by an . for a class but that would be a lot of elements...

I thought of leveraging document.querySelectorAll('*') but that just...

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

But like it says Returns a list of the elements within the document...

So is there an API that will return all of the existing html elements?

html, head, body, div, p, span etc.

Merci!

existing in a document or existing in the specification? Array.from(new Set(Array.from(document.querySelectorAll('*'), node => node.nodeName))) — Jaromanda X
– Jaromanda X, Commented Nov 1, 2017 at 1:24
You should be using queryselectorAll . It returns all of the HTML elements because all elements exist within the document. JQuery uses querySelectorAll internally. — S. Walker
– S. Walker, Commented Nov 1, 2017 at 1:26
Hey Guys! I am looking for existing in the spec! But thanks my friends! — Antonio Pavicevac-Ortiz
– Antonio Pavicevac-Ortiz, Commented Nov 1, 2017 at 1:29
There should be no need for a list of tag names. A CSS-style selector will match against any pattern that forms a valid tag name, so it should match custom tags too. All you need is the generic definition of a valid tag name. — llama
– llama, Commented Nov 1, 2017 at 1:32
You can get all their constructor names with Object.getOwnPropertyNames(window).filter(k=>{ try{ return HTMLElement.isPrototypeOf(window[k])} catch(e){} }) but to get their tagName would require being able to create these, which must be done with Document.createElement(tagName)... Oh and actually this code will also return HTMLMediaElement, which is the proto of other HTMLElements, so it's not entirely reliable either... — Kaiido
– Kaiido, Commented Nov 1, 2017 at 1:33

Sami Almalki · Accepted Answer · 2017-11-01 03:02:05Z

3

You can use HTMLUnknownElement object to check for a valid tag by specification:

if (tagIsValid(selector))
  return 'tag';

and tagIsValid definition would be:

function tagIsValid(tag) {
  tagChecked = document.createElement(tag).toString();
  return tagChecked != "[object HTMLUnknownElement]";
}

answered Nov 1, 2017 at 3:02

Sami Almalki

6585 silver badges19 bronze badges

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

Comments

Dharman · Accepted Answer · 2020-10-28 17:50:34Z

0

if (selector.indexOf('.') > 0) return 'tag.class';
return 'tag';

I think you can end it with that.

edited Oct 28, 2020 at 17:50

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Oct 28, 2020 at 17:44

Lucia Rivero

1

Collectives™ on Stack Overflow

Is there a way to get a list of all existing HTML tags via JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related