Làm cách nào để xác định loại phần tử HTML trong JavaScript?

189

Tôi cần một cách để xác định loại phần tử HTML trong JavaScript. Nó có ID, nhưng chính phần tử có thể là a <div>, một <form>trường, a <fieldset>, v.v ... Làm thế nào tôi có thể đạt được điều này?

javascript dom

— AdamTheHutt
nguồn

290

nodeNamelà thuộc tính bạn đang tìm kiếm. Ví dụ:

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

Lưu ý rằng nodeNametrả về tên phần tử được viết hoa và không có dấu ngoặc nhọn, điều đó có nghĩa là nếu bạn muốn kiểm tra xem một phần tử có phải là <div>phần tử không, bạn có thể thực hiện như sau:

elt.nodeName == "DIV"

Trong khi điều này sẽ không cung cấp cho bạn kết quả mong đợi:

elt.nodeName == "<div>"

— bỏ đi
nguồn

29

Tôi khuyên bạn nên làm như thế này: if (elt.nodeName.toLowerCase () === "div") {...} Bằng cách này, nếu vì lý do nào đó, nó không còn được trả lại bằng chữ in hoa (chữ thường hoặc hỗn hợp), bạn sẽ không phải thay đổi nó và mã này sẽ vẫn hoạt động tốt.

— TheCuBeMan

6

Để trả lời @TheCuBeMan, sử dụng toLowerCase () có nghĩa là bạn cũng cần đảm bảo nodeName tồn tại (nếu thực tế thì đó không phải là một phần tử):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

— Erik Koopmans

những gì về localName?

— bomba

46

Thế còn element.tagName?

Xem thêm tagNametài liệu về MDN .

— Brian Cline
nguồn

4

Theo dấu thời gian bạn đánh bại tôi chưa đầy 1 giây!

— mí mắt

27

Từ QuirksMode: Lời khuyên của tôi là không nên sử dụng tagName. nodeName chứa tất cả các chức năng của tagName, cộng thêm một vài chức năng. Do đó, nodeName luôn là sự lựa chọn tốt hơn.

— bdukes

7

Đôi khi bạn muốn element.constructor.name

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

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

document.createElement('foo').constructor.name
// HTMLUnknownElement

— con golopot
nguồn

6

Bạn có thể sử dụng kiểm tra mã chung thông qua 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

Nhìn vào đây để xem danh sách đầy đủ các giao diện.

— Mã4R7
nguồn