জাভাস্ক্রিপ্টে একটি ডিওএম উপাদান ধরণের পরীক্ষা করা

Question

জাভাস্ক্রিপ্টে কোনও উপাদানটির ধরণ পরীক্ষা করার কোনও উপায় আছে কি?

উত্তরটির জন্য প্রোটোটাইপ লাইব্রেরির প্রয়োজন হতে পারে বা প্রয়োজন হতে পারে, তবে নিম্নলিখিত সেটআপটি লাইব্রেরিটি ব্যবহার করে না।

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

Answer 1

আপনি typeof(N)আসল অবজেক্টের ধরণটি পেতে ব্যবহার করতে পারেন তবে আপনি যা করতে চান তা ট্যাগটি পরীক্ষা করা হয়, ডোম উপাদানটির ধরণ নয়।

সেক্ষেত্রে সম্পত্তি 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'ইত্যাদি

— Robusto

@ রোবস্তো ভুল। যদি দস্তাবেজটি এইচটিএমএল হয় এবং ডিওএম প্রয়োগটি সঠিক হয়, তবে এটি সর্বদা বড় হবে। অনুসারে: w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 " ট্যাগনাম " বিভাগের অধীনে (উপাদান নোডনাম == ট্যাগনামের জন্য) "এইচটিএমএল ডিওএম একটি HTML উপাদানটির ট্যাগনামটি প্রদান করে উত্স এইচটিএমএল ডকুমেন্টের ক্ষেত্রে নির্বিশেষে ক্যানোনিকাল বড় হাতের ফর্ম ""

— ববউইনহোল্ট

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 পৃষ্ঠায় আসবে; একটি এক্সএইচটিএমএল পৃষ্ঠায় ট্যাগটির কেস সংরক্ষিত আছে (সুতরাং "ক" এইচটিএমএল পৃষ্ঠাগুলিতে "এ" হবে এবং এক্সএইচটিএমএল পৃষ্ঠাগুলিতে "একটি" থাকবে): w3.org/TR/2000/REC-DOM-Level-2- কোর-20001113 /… (ধরে নিচ্ছেন এক্সএইচটিএমএল পৃষ্ঠাটি সঠিকভাবে পরিবেশন করা হয়েছে এবং হিসাবে পরিবেশন করা হয়নি text/html।)

— টিজে ক্রাউডার

@ টিজে ক্রাউডার তাই দেখে মনে হচ্ছে সেরা বিকল্পটি হচ্ছেelement.tagName.toLowerCase() === 'a'

— পি

@ পেড: হ্যাঁ, বা element.nodeName.toLowerCase()যদি এটি সম্ভব হয় তবে এটি elementআসলে কোনও উপাদান হবে না (উদাহরণস্বরূপ, যদি আপনি nodeType == 1উপরে তালিকাবদ্ধ চেকটি না করেন )। Nodeইন্টারফেস আছে nodeName। জন্য Elementদৃষ্টান্ত, এটি হিসাবে একই tagName। নোড অন্য ধরনের জন্য, এটি এর কিছু পছন্দ "#text"বা "#document"। nodeTypeযদিও আমি মনে করি আমি সবসময় চেকটি ব্যবহার করতাম ।

— টিজে ক্রাউডার

2019 আপডেট: কমপক্ষে আধুনিক ক্রোমিয়ামে (v79.0.3945.79) ট্যাগ নামের স্ট্রিং বড় হাতের অক্ষর। "এইচটিএমএল ডকুমেন্টের প্রতিনিধিত্বকারী ডিওএম গাছগুলির জন্য, ফিরে আসা ট্যাগের নামটি সর্বদা ক্যানোনিকাল আপার-কেস আকারে থাকে For উদাহরণস্বরূপ, <div> উপাদানকে ডাকা ট্যাগনাম" ডিআইভি " https://developer.mozilla.org/en- প্রদান করে মার্কিন / ডকস / ওয়েব / এপিআই / এলিমেন্ট /node.tagName == 'DIV'

— ট্যাগনামের

Answer 4

রোভিং সঠিক তবে আপনাকে পরীক্ষাটি এখানে পরিবর্তন করতে হবে:

যদি (এলিমেন্ট.নোডটাইপ == 1) {
// কোড
}

কারণ 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);

এটি ক্রোম, এফএফ, অপেরা, এজ, আইই 9 + এ কাজ করে (পুরানো আইআইতে এটি "[অবজেক্ট অবজেক্ট]" ফিরিয়ে দেয়)।

Answer 6

যদিও পূর্ববর্তী উত্তরগুলি পুরোপুরি কার্যকরভাবে কাজ করে, আমি কেবলমাত্র একটি অন্য উপায় যুক্ত করব যেখানে উপাদানগুলি তাদের প্রয়োগ করা ইন্টারফেস ব্যবহার করে শ্রেণিবদ্ধ করা যায়।

পড়ুন প্রাপ্তিসাধ্য ইন্টারফেসের জন্য W3 অর্গ

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

ইন্টারফেস চেকটি দুটি উপায়ে হিসাবে 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
}