Question

159

HTML DOM element name as a string

rated 0 times [ 160] [ 1] / answers: 1 / hits: 16893 / 13 Years ago, thu, january 12, 2012, 12:00:00

Suppose I have the following HTML snippet:

<input type=text id=myinput />

Now I want to get that DOM element using JavaScript:

var element = document.getElementById(myinput);

Works fine, no problem so far.

But when I print it inside an alert box using alert(element);, it displays object HTMLInputElement.

Is there a way to get that element name (HTMLInputElement) as a string?

(Notice that when saying element name I do not mean the name attribute of an element, but the name how it is displayed when using alert() for example, as described above.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darleneh

Add To Favorites

Follow

Total Points: 231

Total Questions: 110

Total Answers: 94

Location: Spain

Member since Thu, Dec 23, 2021

3 Years ago

darleneh questions

1 Bootstrap 5 collapse show/hide not working when invoked with JS

Fri, Apr 23, 21, 00:00, 3 Years ago

1 ReferenceError: Cannot access 'variable' before initialization

Tue, Apr 6, 21, 00:00, 3 Years ago

1 React hooks - how to force useEffect to run when state changes to the same value?

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Vue + Typescript - Import errors with class based decorators

Thu, Oct 8, 20, 00:00, 4 Years ago

1 Storybook Component-level css file not working

Thu, Aug 20, 20, 00:00, 4 Years ago

View All

answered 13 Years ago deving · Accepted Answer

In some browsers, such as Firefox (and Chrome, potentially others) you can do:

element.constructor.name; // => HTMLInputElement

But in general it's a bit more complicated, perhaps not even totally reliable. The easiest way might be as such:

function getClassName(o) {

  // TODO: a better regex for all browsers...

  var m = (o).toString().match(/[object (.*?)]/);

  return (m) ? m[1] : typeof o;

}

getClassName(element); // => HTMLInputElement

getClassName(123); // => number

[Edit]

Or, using the nodeName attribute, you could write a utility function which should be generally much more reliable:

function getHtmlElementClassName(htmlElement) {

  var n = htmlElement.nodeName;

  if (n.matches(/^H(d)$/)) {

    return HTMLHeadingElement;

  } else if (/* other exceptional cases? */) {

    // ...

  } else {

    return HTML + n.charAt(0) + n.substr(1).toLowerCase() + Element;

  }

}

(Thanks @Esailija for the smarter implementation, @Alohci for pointing out exceptional cases.)