Jak mogę określić typ elementu HTML w JavaScript?

190

Potrzebuję sposobu, aby określić typ elementu HTML w JavaScript. To ma identyfikator, ale sam element może być <div>, o <form>pole, <fieldset>itp jaki sposób można to osiągnąć?

javascript dom AdamTheHutt
źródło

Odpowiedzi:

290

nodeNameto atrybut, którego szukasz. Na przykład:

var elt = document.getElementById('foo');
console.log(elt.nodeName);

Zwróć uwagę, że nodeNamezwraca nazwę elementu wielkimi literami i bez nawiasów kątowych, co oznacza, że ​​jeśli chcesz sprawdzić, czy element jest <div>elementem, możesz to zrobić w następujący sposób:

elt.nodeName == "DIV"

Chociaż nie dałoby to oczekiwanych rezultatów:

elt.nodeName == "<div>"
pkaeding
źródło
29
Polecam zrobić to w ten sposób: jeśli (elt.nodeName.toLowerCase () === "div") {...} W ten sposób, jeśli z jakiegoś powodu nie jest już zwracany wielkimi literami (małe lub mieszane), ty nie będę musiał tego zmieniać, a ten kod nadal będzie działał poprawnie.
TheCuBeMan
6
W odpowiedzi na @TheCuBeMan użycie toLowerCase () oznacza, że ​​musisz także upewnić się, że nodeName istnieje (jeśli to w ogóle możliwe, elt nie jest w rzeczywistości elementem):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }
Erik Koopmans
co localName?
bomba
46

Co element.tagName?

Zobacz także tagNamedokumenty dotyczące MDN .

Brian Cline
źródło
4
Według znaczników czasu pokonałeś mnie o mniej niż 1 sekundę!
powiek
27
Z QuirksMode: Radzę, aby w ogóle nie używać tagName. nodeName zawiera wszystkie funkcje tagName oraz kilka innych. Dlatego nodeName jest zawsze lepszym wyborem.
bdukes
7

Czasem chcesz element.constructor.name

document.createElement('div').constructor.name
// HTMLDivElement

document.createElement('a').constructor.name
// HTMLAnchorElement

document.createElement('foo').constructor.name
// HTMLUnknownElement
golopot
źródło
7

Możesz użyć ogólnej kontroli kodu poprzez instanceof:

var e = document.getElementById('#my-element');
if (e instanceof HTMLInputElement) {}         // <input>
elseif (e instanceof HTMLSelectElement) {}    // <select>
elseif (e instanceof HTMLTextAreaElement) {}  // <textarea>
elseif (  ... ) {}                            // any interface

Zajrzyj tutaj, aby uzyskać pełną listę interfejsów.

Code4R7
źródło