Có cách nào để kiểm tra loại phần tử trong JavaScript không?

Câu trả lời có thể yêu cầu hoặc không yêu cầu thư viện nguyên mẫu, tuy nhiên thiết lập sau sử dụng thư viện.

function(event) {
  var element = event.element();
  // if the element is an anchor
  ...
  // if the element is a td
  ...
}

Bạn có thể sử dụng typeof(N)để lấy loại đối tượng thực, nhưng những gì bạn muốn làm là kiểm tra thẻ, không phải loại của phần tử DOM.

Trong trường hợp đó, hãy sử dụng elem.tagNamehoặc thuộc elem.nodeNametính.

nếu bạn muốn thực sự sáng tạo, bạn có thể sử dụng từ điển các tên thẻ và các cụm từ ẩn danh để thay thế nếu chuyển đổi hoặc if / else.

if (element.nodeName == "A") {
 ...
} else if (element.nodeName == "TD") {
 ...
}

Có lẽ bạn cũng sẽ phải kiểm tra kiểu gật đầu:

if(element.nodeType == 1){//element of type html-object/tag
  if(element.tagName=="a"){
    //this is an a-element
  }
  if(element.tagName=="div"){
    //this is a div-element
  }
}

Chỉnh sửa: Đã sửa giá trị nodeType

roenving là đúng NHƯNG bạn cần thay đổi kiểm tra thành:

if (element.nodeType == 1) {
// mã
}

bởi vì nodeType của 3 thực sự là một nút văn bản và nodeType của 1 là một phần tử HTML. Xem http://www.w3schools.com/Dom/dom_nodetype.asp

Tôi thường lấy nó từ giá trị trả về toString (). Nó hoạt động trong các phần tử DOM được truy cập khác nhau:

var a = document.querySelector('a');

var img = document.createElement('img');

document.body.innerHTML += '<div id="newthing"></div>';
var div = document.getElementById('newthing');

Object.prototype.toString.call(a);    // "[object HTMLAnchorElement]"
Object.prototype.toString.call(img);  // "[object HTMLImageElement]"
Object.prototype.toString.call(div);  // "[object HTMLDivElement]"

Sau đó, phần liên quan:

Object.prototype.toString.call(...).split(' ')[1].slice(0, -1);

Nó hoạt động trong Chrome, FF, Opera, Edge, IE9 + (trong IE cũ hơn, nó trả về "[object Object]").

Mặc dù các câu trả lời trước hoạt động hoàn hảo, tôi sẽ chỉ thêm một cách khác mà các phần tử cũng có thể được phân loại bằng cách sử dụng giao diện mà chúng đã triển khai.

Tham khảo W3 Org để biết các giao diện có sẵn

console.log(document.querySelector("#anchorelem") instanceof HTMLAnchorElement);
console.log(document.querySelector("#divelem") instanceof HTMLDivElement);
console.log(document.querySelector("#buttonelem") instanceof HTMLButtonElement);
console.log(document.querySelector("#inputelem") instanceof HTMLInputElement);

<a id="anchorelem" href="">Anchor element</a>
<div id="divelem">Div Element</div>
<button id="buttonelem">Button Element</button>
<br><input id="inputelem">

Kiểm tra giao diện có thể được thực hiện theo 2 cách elem instanceof HTMLAnchorElementhoặc elem.constructor.name == "HTMLAnchorElement"cả hai đều trả vềtrue

Tôi có một cách khác để kiểm tra tương tự.

Element.prototype.typeof = "element";
var element = document.body; // any dom element
if (element && element.typeof == "element"){
   return true; 
   // this is a dom element
}
else{
  return false; 
  // this isn't a dom element
}