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

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