Bagaimana saya bisa menentukan jenis elemen HTML dalam JavaScript?

191

Saya perlu cara untuk menentukan jenis elemen HTML dalam JavaScript. Ini memiliki ID, tetapi elemen itu sendiri bisa berupa <div>, <form>bidang, a <fieldset>, dll. Bagaimana saya bisa mencapai ini?

javascript dom AdamTheHutt
sumber

Jawaban:

290

nodeNameadalah atribut yang Anda cari. Sebagai contoh:

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

Perhatikan bahwa nodeNamemengembalikan nama elemen dengan huruf kapital dan tanpa tanda kurung sudut, yang berarti bahwa jika Anda ingin memeriksa apakah suatu elemen adalah <div>elemen, Anda dapat melakukannya sebagai berikut:

elt.nodeName == "DIV"

Meskipun ini tidak akan memberi Anda hasil yang diharapkan:

elt.nodeName == "<div>"
pkaeding
sumber
29
Saya sarankan melakukannya seperti ini: if (elt.nodeName.toLowerCase () === "div") {...} Dengan cara ini, jika karena alasan itu tidak lagi dikembalikan dalam huruf besar (huruf kecil atau campuran), Anda tidak perlu mengubahnya dan kode ini akan tetap berfungsi.
TheCuBeMan
6
Menanggapi @TheCuBeMan, menggunakan toLowerCase () berarti Anda juga perlu memastikan nodeName ada (jika mungkin, elt bukan elemen): if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }
Erik Koopmans
bagaimana localName?
bomba
46

Bagaimana dengan element.tagName?

Lihat juga tagNamedokumen di MDN .

Brian Cline
sumber
4
Menurut cap waktu, Anda mengalahkan saya kurang dari 1 detik!
kelopak mata
27
Dari QuirksMode: Saran saya untuk tidak menggunakan tagName sama sekali. nodeName berisi semua fungsi tagName, ditambah beberapa fungsi lainnya. Oleh karena itu nodeName selalu merupakan pilihan yang lebih baik.
bdukes
7

Terkadang kamu mau element.constructor.name

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

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

document.createElement('foo').constructor.name
// HTMLUnknownElement
golopot
sumber
7

Anda dapat menggunakan inspeksi kode umum melalui 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

Lihat di sini untuk daftar lengkap antarmuka.

Code4R7
sumber