มีวิธีทดสอบประเภทขององค์ประกอบใน JavaScript หรือไม่?

คำตอบอาจต้องการไลบรารีต้นแบบหรือไม่ก็ได้ แต่การตั้งค่าต่อไปนี้จะใช้ประโยชน์จากไลบรารี

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

คุณสามารถใช้typeof(N)เพื่อรับประเภทออบเจ็กต์จริง แต่สิ่งที่คุณต้องการทำคือตรวจสอบแท็กไม่ใช่ประเภทขององค์ประกอบ DOM

ในกรณีนั้นให้ใช้คุณสมบัติelem.tagNameหรือelem.nodeName

หากคุณต้องการสร้างสรรค์อย่างแท้จริงคุณสามารถใช้พจนานุกรมของ tagnames และการปิดแบบไม่ระบุตัวตนแทนหากมีสวิตช์หรือ if / else

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

บางทีคุณอาจต้องตรวจสอบประเภทปมด้วย:

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
  }
}

แก้ไข: แก้ไข nodeType-value

roenving ถูกต้อง แต่คุณต้องเปลี่ยนการทดสอบเป็น:

ถ้า (element.nodeType == 1) {
//รหัส
}

เนื่องจาก nodeType ของ 3 เป็นโหนดข้อความและ nodeType ของ 1 เป็นองค์ประกอบ HTML ดูhttp://www.w3schools.com/Dom/dom_nodetype.asp

ฉันมักจะได้รับจากค่าส่งคืน toString () ทำงานในองค์ประกอบ DOM ที่เข้าถึงต่างกัน:

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]"

จากนั้นชิ้นส่วนที่เกี่ยวข้อง:

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

ทำงานใน Chrome, FF, Opera, Edge, IE9 + (ใน IE รุ่นเก่าจะส่งคืน "[object Object]")

แม้ว่าคำตอบก่อนหน้านี้จะทำงานได้อย่างสมบูรณ์ แต่ฉันจะเพิ่มวิธีอื่นในการจัดประเภทองค์ประกอบโดยใช้อินเทอร์เฟซที่พวกเขานำไปใช้

อ้างถึงW3 Org สำหรับอินเทอร์เฟซที่พร้อมใช้งาน

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">

การตรวจสอบอินเทอร์เฟซสามารถทำได้ 2 วิธีelem instanceof HTMLAnchorElementหรือelem.constructor.name == "HTMLAnchorElement"ทั้งส่งคืนtrue

ฉันมีวิธีอื่นในการทดสอบเหมือนกัน

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
}