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

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