जावास्क्रिप्ट में DOM तत्व के प्रकार का परीक्षण करना

Question

क्या जावास्क्रिप्ट में एक तत्व के प्रकार का परीक्षण करने का एक तरीका है?

उत्तर में प्रोटोटाइप लाइब्रेरी की आवश्यकता हो सकती है या नहीं भी हो सकती है, हालाँकि निम्न सेटअप लाइब्रेरी का उपयोग करता है।

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

Answer 1

आप typeof(N)वास्तविक ऑब्जेक्ट प्रकार प्राप्त करने के लिए उपयोग कर सकते हैं , लेकिन आप जो करना चाहते हैं वह टैग की जांच करना है, न कि DOM तत्व का प्रकार।

उस स्थिति में, elem.tagNameया elem.nodeNameसंपत्ति का उपयोग करें ।

यदि आप वास्तव में रचनात्मक प्राप्त करना चाहते हैं, तो आप स्विच या यदि / के बजाय टैग्नेश और अनाम क्लोजर के शब्दकोश का उपयोग कर सकते हैं।

Answer 2

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

Comments

कई बार यह है। वैसे भी, आप हमेशा उपयोग कर सकते हैं element.nodeName.match(/\bTBODY\b/i)या element.nodeName.toLowerCase() == 'tbody'आदि

— रोबस्टा सिप

@ रोबो गलत है। यदि दस्तावेज़ HTML है और DOM कार्यान्वयन सही है, तो यह हमेशा अपरकेस रहेगा। "TagName" अनुभाग के अंतर्गत w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 के अनुसार (तत्वों के लिए नोडनेम == टैगनाम) "HTML DOM एक HTML तत्व का टैग नाम देता है स्रोत HTML दस्तावेज़ में मामले की परवाह किए बिना, विहित अपरकेस के रूप में। "

— bobwienholt

Answer 3

शायद आपको नोडटाइप भी जांचना होगा:

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

संपादित करें: नोड टाइप-मान को ठीक किया

Comments

टैगनाम के मामले से सावधान रहें।

— पलकहीनता

@ कैसी: यह एक HTML पेज में होगा; XHTML पृष्ठ में टैग का मामला संरक्षित है (इसलिए HTML पृष्ठों में "a" "A" होगा, और "a" XHTML पृष्ठों में): w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /… (एक्सएचटीएमएल पेज को सही तरीके से परोसने और जैसा नहीं परोसा गया है text/html।)

— TJ Crowder

@TJCrowder तो ऐसा लगता है कि सबसे अच्छा विकल्प हैelement.tagName.toLowerCase() === 'a'

— p3drosola

@Ped: हाँ, या element.nodeName.toLowerCase()यदि यह संभव है कि elementवास्तव में एक तत्व नहीं होगा (जैसे, यदि आपने nodeType == 1ऊपर सूचीबद्ध चेक नहीं किया है)। Nodeइंटरफ़ेस है nodeName। Elementउदाहरणों के लिए, यह उसी के समान है tagName। अन्य प्रकार के नोड्स के लिए, यह जैसी चीजें हैं "#text"या "#document"। मुझे लगता है कि मैं हमेशा nodeTypeचेक का उपयोग करूंगा , हालांकि।

— टीजे क्राउडर

2019 अपडेट: कम से कम आधुनिक क्रोमियम (v79.0.3945.79) पर तोड़े का स्ट्रिंग बड़ा है। "DOM पेड़ों के लिए, जो HTML दस्तावेज़ों का प्रतिनिधित्व करते हैं, लौटा हुआ टैग नाम हमेशा कैनोनिकल अपर-केस फॉर्म में होता है। उदाहरण के लिए, tagName को <div> तत्व रिटर्न" DIV " https://developer.mozilla.org/en- कहा जाता है। यूएस / डॉक्स / वेब / एपीआई / एलिमेंट / टैगनाम तुलना करने का सही तरीका होगाnode.tagName == 'DIV'

— 18'19

Answer 4

roenving सही है लेकिन आपको परीक्षण को बदलने की आवश्यकता है:

अगर (एलीमेंट.नोड टाइप == १) {
// कोड
}

क्योंकि 3 का नोड टाइप वास्तव में एक टेक्स्ट नोड है और 1 का नोड टाइप एक HTML तत्व है। Http://www.w3schools.com/Dom/dom_nodetype.asp देखें

Answer 5

मैं आमतौर पर इसे स्ट्रींग () रिटर्न मान से प्राप्त करता हूं। यह अलग-अलग एक्सेस डोम तत्वों में काम करता है:

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);

यह क्रोम, एफएफ, ओपेरा, एज, IE9 + (पुराने IE में यह "[ऑब्जेक्ट ऑब्जेक्ट]") में काम करता है।

Answer 6

यद्यपि पिछले उत्तर पूरी तरह से काम करते हैं, मैं सिर्फ एक और तरीका जोड़ूंगा जहां तत्वों को उनके द्वारा लागू किए गए इंटरफ़ेस का उपयोग करके भी वर्गीकृत किया जा सकता है।

उपलब्ध इंटरफेस के लिए डब्ल्यू 3 ऑर्ग का संदर्भ लें

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

Answer 7

मेरे पास उसी के परीक्षण का एक और तरीका है।

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
}