একটি জাভাস্ক্রিপ্ট অবজেক্টটি কোনও ডোম অবজেক্ট কিনা তা আপনি কীভাবে পরীক্ষা করবেন?


247

আমি পাওয়ার চেষ্টা করছি:

document.createElement('div')  //=> true
{tagName: 'foobar something'}  //=> false

আমার নিজের স্ক্রিপ্টগুলিতে, আমি কেবল এটি ব্যবহার করতাম কারণ tagNameসম্পত্তি হিসাবে আমার কখনই প্রয়োজন হয় না :

if (!object.tagName) throw ...;

সুতরাং দ্বিতীয় অবজেক্টের জন্য, আমি দ্রুত সমাধান হিসাবে নিম্নলিখিতটি নিয়ে এসেছি - যা বেশিরভাগ কাজ করে। ;)

সমস্যাটি হ'ল, এটি কেবলমাত্র পঠনযোগ্য বৈশিষ্ট্য প্রয়োগকারী ব্রাউজারগুলির উপর নির্ভর করে, যা সমস্ত কিছু করে না।

function isDOM(obj) {
  var tag = obj.tagName;
  try {
    obj.tagName = '';  // Read-only for DOM, should throw exception
    obj.tagName = tag; // Restore for normal objects
    return false;
  } catch (e) {
    return true;
  }
}

একটি ভাল বিকল্প আছে?


3
আমি কি এই ভেবে অবাক হয়ে যাচ্ছি যে একটি "ডিওএম অবজেক্ট" কেবলমাত্র উপাদানগুলি নয়, সমস্ত নোডকেও (টেক্সট নোডস, বৈশিষ্ট্য ইত্যাদি) কভার করবে না? সমস্ত প্রশ্নের উত্তর এবং আপনি যেভাবে প্রশ্নটি উত্থাপন করেছেন সেগুলি এই উপাদানগুলির সম্পর্কে বিশেষভাবে পরামর্শ দেয় ...
মাইক রডেন্ট

উত্তর:


300

এটি আগ্রহী হতে পারে:

function isElement(obj) {
  try {
    //Using W3 DOM2 (works for FF, Opera and Chrome)
    return obj instanceof HTMLElement;
  }
  catch(e){
    //Browsers not supporting W3 DOM2 don't have HTMLElement and
    //an exception is thrown and we end up here. Testing some
    //properties that all elements have (works on IE7)
    return (typeof obj==="object") &&
      (obj.nodeType===1) && (typeof obj.style === "object") &&
      (typeof obj.ownerDocument ==="object");
  }
}

এটি ডোম, লেভেল 2 এর অংশ ।

আপডেট 2 : আমি এটি নিজের লাইব্রেরিতে এটিকে এভাবে প্রয়োগ করেছি: (পূর্ববর্তী কোডটি ক্রোমে কাজ করে নি, কারণ নোড এবং এইচটিএমলেমেন্ট প্রত্যাশিত বস্তুর পরিবর্তে ফাংশন। এই কোডটি এফএফ 3, আই 7, ক্রোম 1 এবং অপেরাতে পরীক্ষা করা হয়) 9)।

//Returns true if it is a DOM node
function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}

//Returns true if it is a DOM element    
function isElement(o){
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
    o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
);
}

11
এটি লক্ষণীয় যে এটি অন্যান্য উইন্ডো / ফ্রেমের সাথে সম্পর্কিত উপাদানগুলিতে কাজ করবে না। হাঁসের টাইপিং হ'ল প্রস্তাবিত পন্থা
অ্যান্ডি ই

2
আপনি এটি দিয়ে বোকা বানাতে পারেন:function Fake() {}; Fake.prototype=document.createElement("div"); alert(new Fake() instanceof HTMLElement);
কার্নেল জেমস

11
ডব্লিউটিএফ বিষয়: ফায়ারফক্স 5 এবং তার আগে রিটার্ন trueজন্য [] instanceof HTMLElement
রব ডাব্লু

6
বিটিডব্লিউ, HTMLElementসর্বদা একটি function, তাই typeofআপনাকে ট্র্যাক থেকে ফেলে দেবে এবং বিবৃতিটির দ্বিতীয় অংশটি কার্যকর করবে। আপনি চাইলে আপনি চেষ্টা করতে পারেন instanceof Object, কারণ ফাংশনটি উদাহরণ হিসাবে উপস্থিত হবে Object, বা কেবল স্পষ্টভাবে পরীক্ষা করে দেখুন typeof === "function", কারণ Nodeএবং HTMLElementউভয়ই দেশীয় অবজেক্ট ফাংশন।
রোল্যান্ড

2
আপনি যখন ফোন করেন isElement(0), এটি 0 ফেরত দেয়, মিথ্যা নয় ... কেন এটি হয় এবং আমি কীভাবে এটি প্রতিরোধ করতে পারি?
জেসিকা 20

68

নিম্নলিখিত আই 8 সামঞ্জস্যপূর্ণ, অতি-সহজ কোড পুরোপুরি কার্যকর করে।

গৃহীত উত্তর HTML উপাদানগুলি সব ধরনের শনাক্ত করতে পারেনি। উদাহরণস্বরূপ, এসভিজি উপাদানগুলি সমর্থিত নয়। বিপরীতে, এই উত্তরটি এসভিজির পাশাপাশি এইচটিএমএল জন্যও কাজ করে।

এটি এখানে কর্মে দেখুন: https://jsfiddle.net/eLuhbu6r/

function isElement(element) {
    return element instanceof Element || element instanceof HTMLDocument;  
}

3
'এলিমেন্ট' আইই 7
ড্যান

49
আমি এই মতামতটি করছি যে এখনও আই 7 ব্যবহার করে যে কেউ আমাদের সাথে সময় বা সপ্তাহের অস্বীকারের জন্য কাজ করতে দিন বা সপ্তাহের জন্য বিনিয়োগ করার পরিবর্তে আরও ভাল ব্রাউজার ডাউনলোড করতে পাঁচ সেকেন্ড ব্যয় করতে পারে।
মোপ্যাসিড

1
আমি @ এমপ্যাসিডের সাথে একমত নই, তবে উত্তরের লেখক বলেছেন যে এটি আই 7-তে কাজ করে, যা সঠিকতার জন্য আপডেট করার প্রয়োজন হতে পারে।
লাজোস মেসারোস

1
আইই 9 বলে আপডেট হয়েছে। আইই 8 এটি সমর্থন করে কিনা আমি নিশ্চিত নই।
রাজা ওয়াডিয়া

1
@ মনার্চওয়াদিয়া হ্যাঁ এটি আইই 8 তে সমর্থিত। তবে মনে রাখবেন যে এটি documentউপাদানটির জন্য (সমস্ত ব্রাউজারে) সত্য হয় না । আপনার যদি এটির প্রয়োজন হয়, আপনার চেষ্টা করা উচিত:x instanceof Element || x instanceof HTMLDocument
এস.সর্পুশন

11

উপরের এবং নীচের সমস্ত সমাধান (সহ আমার সমাধান) ভুল হওয়ার সম্ভাবনা থেকে ভোগেন, বিশেষত আইই-তে - পরীক্ষাটি অবৈধভাবে রেকর্ডিং করে কোনও ডিওএম নোডের নকল করার জন্য কিছু জিনিস / পদ্ধতি / বৈশিষ্ট্য সংজ্ঞায়িত করা (পুনরায়) যথেষ্ট সম্ভব।

তাই সাধারণত আমি হাঁসের-টাইপিং-শৈলীর পরীক্ষার ব্যবহার করি: আমি বিশেষভাবে আমার ব্যবহৃত জিনিসগুলির জন্য পরীক্ষা করি test উদাহরণস্বরূপ, আমি যদি কোনও নোড ক্লোন করতে চাই তবে আমি এটির মতো এটি পরীক্ষা করি:

if(typeof node == "object" && "nodeType" in node &&
   node.nodeType === 1 && node.cloneNode){
  // most probably this is a DOM node, we can clone it safely
  clonedNode = node.cloneNode(false);
}

মূলত এটি সামান্য বিচক্ষণতা যাচাই করা + আমি যে পদ্ধতিতে (বা কোনও সম্পত্তি) ব্যবহার করার পরিকল্পনা করছি তার সরাসরি পরীক্ষা।

ঘটনাচক্রে উপরোক্ত পরীক্ষাটি সমস্ত ব্রাউজারের ডিওএম নোডের জন্য একটি ভাল পরীক্ষা। তবে আপনি যদি নিরাপদে থাকতে চান তবে সর্বদা পদ্ধতি এবং বৈশিষ্ট্যের উপস্থিতি যাচাই করুন এবং তাদের ধরণের যাচাই করুন।

সম্পাদনা: IE নোড উপস্থাপন করতে অ্যাক্টিভএক্স অবজেক্ট ব্যবহার করে, সুতরাং তাদের বৈশিষ্ট্যগুলি সত্য জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে আচরণ করে না, উদাহরণস্বরূপ:

console.log(typeof node.cloneNode);              // object
console.log(node.cloneNode instanceof Function); // false

এটি trueযথাক্রমে "ফাংশন" এবং ফেরত আসা উচিত । পরীক্ষার পদ্ধতিগুলির একমাত্র উপায় হ'ল এটি সংজ্ঞায়িত করা হয়েছে কিনা।


"typof document.body.cloneNode" আমার IE- এ "অবজেক্ট" ফিরিয়ে দেয়
ডেনিস সি

এটি দেখতে একটি শালীন উত্তরের মতো। নীচে আমার উত্তর দেখুন যদিও, stackoverflow.com/a/36894871/1204556
রাজা Wadia

8

আপনি এটিকে একটি আসল ডোম নোডে যুক্ত করার চেষ্টা করতে পারেন ...

function isDom(obj)
{
    var elm = document.createElement('div');
    try
    {
        elm.appendChild(obj);
    }
    catch (e)
    {
        return false;
    }

    return true;
}

11
এটা কি কাজ করে? এটি এখনও একটি সমাধান। যে একটি সৃজনশীল।
জাস্টিন মায়ার

3
এই অফারটি সৃজনশীলতার জন্য এবং নিশ্চিততার জন্য +1। তবে, যদি নোডটি ইতিমধ্যে ডোমের অংশ হয়ে যায়, আপনি কেবল এটি সরিয়ে ফেলেছেন! সুতরাং ... প্রয়োজনে DOM এ পুনরায় যুক্ত করার কাজটি না করে এই উত্তরটি অসম্পূর্ণ।
এসভিডজেন

4
আমি এটি প্রায় 5 বছর পরে পড়ছি, এবং আমি মনে করি এটি দুর্দান্ততমগুলির মধ্যে একটি। এটি শুধু পরিমার্জন করা প্রয়োজন। উদাহরণস্বরূপ, আপনি নোডের ক্লোনটি একটি পৃথক উপাদানের সাথে যুক্ত করার চেষ্টা করতে পারেন । যদি এটি কোনও ডোম অবজেক্ট না হয়। কিছু অবশ্যই ভুল হবে। এখনও বেশ ব্যয়বহুল সমাধান।
ম্যাক্সআর্ট

অথবা এর পরিবর্তে সংযোজন করতে চেষ্টা ক্লোন , উপাদান মাত্র ক্লোন করতে এটা চেষ্টা যথেষ্ট হওয়া উচিত: obj.cloneNode(false)এবং এর কোনও পার্শ্ব প্রতিক্রিয়া নেই।
mauroc8

1
এটি সত্যই ব্যয়বহুল এবং অযথা জটিল। নীচে আমার উত্তর দেখুন, stackoverflow.com/a/36894871/1204556
রাজা Wadia


6

লো-ড্যাশ_.isElement সম্পর্কে কীভাবে ?

$ npm install lodash.iselement

এবং কোডে:

var isElement = require("lodash.iselement");
isElement(document.body);

1
আমি এই সমাধানটি পছন্দ করি। এটি সহজ, এবং এটি এজ ও আই-তে কাজ করে এমনকি পৃথক আইফ্রেমে উপাদানগুলির জন্যও, এখানে সর্বাধিক ভোট প্রাপ্ত সমাধানগুলির চেয়ে পৃথক।
ইলিয়াস জামারিয়া

এই উত্তরটি সহায়ক, যদিও ব্রাউজারে এনপিএম মডিউল চালানোর জন্য ওয়েবপ্যাকের প্রয়োজন হবে।
এডউইন প্র্যাট

5

এটি সুদৃশ্য জাভাস্ক্রিপ্ট লাইব্রেরি MooTools থেকে এসেছে :

if (obj.nodeName){
    switch (obj.nodeType){
    case 1: return 'element';
    case 3: return (/\S/).test(obj.nodeValue) ? 'textnode' : 'whitespace';
    }
}

12
এই কোডটি জোর দেয় না যে বস্তুটি একটি ডিওএম উপাদান; এটি দেখতে এটির মতো কিছুটা লাগে। যে কোনও বস্তুকে নোডনাম এবং নোডটাইপ সম্পত্তি দেওয়া যেতে পারে এবং এই কোডটি সন্তুষ্ট করা যায়।
থোমাসরুটটার

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

সমস্ত উপাদানগুলিতে সত্যই কাজ করে না, উদাহরণস্বরূপ এসভিজি। নীচে আমার উত্তর দেখুন, stackoverflow.com/a/36894871/1204556
রাজা Wadia

4

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

function isInAnyDOM(o) { 
  return (o !== null) && !!(o.ownerDocument && (o.ownerDocument.defaultView || o.ownerDocument.parentWindow).alert); // true|false
}

অবজেক্টটি বর্তমান উইন্ডোটি কিনা আরও সহজ তা নির্ধারণ করতে:

function isInCurrentDOM(o) { 
  return (o !== null) && !!o.ownerDocument && (window === (o.ownerDocument.defaultView || o.ownerDocument.parentWindow)); // true|false
}

এটি খোলার থ্রেডে চেষ্টা / ধরা সমাধানের চেয়ে কম ব্যয়বহুল বলে মনে হচ্ছে।

ডন পি


আমি এটি সর্বশেষতম ক্রোম এবং এফএফ এবং আইই ১১ এ পরীক্ষা করেছি এবং এটি সর্বত্র কাজ করে, টেক্সট নোড এবং বস্তুর জন্যও তৈরি হয় তবে ডিওমে sertedোকানো হয় document.createElement()না। আশ্চর্যজনক (: আপনাকে ধন্যবাদ
জেরাদ্লাস_আরইউ

এটি শালীন উত্তরের মতো দেখায়, যদিও আমার একই জিনিসগুলি প্রচুর পরিমাণে করে এবং কম জটিল। stackoverflow.com/a/36894871/1204556
রাজা ওয়াদিয়া

4

পুরানো থ্রেড, তবে এখানে ie8 এবং ff3.5 ব্যবহারকারীদের জন্য একটি আপডেট সম্ভাবনা রয়েছে :

function isHTMLElement(o) {
    return (o.constructor.toString().search(/\object HTML.+Element/) > -1);
}

4

আমি যদি ভেরিয়েবলটি কোনও ডিওএম উপাদান হয় তবে পরীক্ষার জন্য একটি সহজ উপায় প্রস্তাব করি

function isDomEntity(entity) {
  if(typeof entity  === 'object' && entity.nodeType !== undefined){
     return true;
  }
  else{
     return false;
  }
}

বা এইচটিএমএল গুয়ের পরামর্শ অনুসারে:

const isDomEntity = entity => {
  return typeof entity   === 'object' && entity.nodeType !== undefined
}

1
ওয়ে খুব ভার্জোজ। তুলনাটি ইতিমধ্যে একটি বুলিয়ান ফিরিয়ে দেবে:return typeof entity === 'object' && typeof entity.nodeType !== undefined;
এইচটিএমএলগুই

1
খুব আকর্ষণীয়! কখনও কখনও, আপনার নিজের objectএবং / বা প্যাপার্টিগুলিতে আপনার টাইপগুলির উপর নির্ভর করে এটি খুব সহজ হতে পারে! টিএক্স, @ রোমন
পেড্রো

3
var IsPlainObject = function ( obj ) { return obj instanceof Object && ! ( obj instanceof Function || obj.toString( ) !== '[object Object]' || obj.constructor.name !== 'Object' ); },
    IsDOMObject = function ( obj ) { return obj instanceof EventTarget; },
    IsDOMElement = function ( obj ) { return obj instanceof Node; },
    IsListObject = function ( obj ) { return obj instanceof Array || obj instanceof NodeList; },

// আসলে আমি এই ইনলাইনটি বেশি ব্যবহার করতে চাই না তবে কখনও কখনও সেটআপ কোডের জন্য এই শর্টকাটগুলি রাখা ভাল


জেজ কন্ট্রাক্টর.নাম আইই তে কাজ করে না, কারণ আইই তে ফাংশনগুলির নামের সম্পত্তি নেই। অবজেক্ট কনস্ট্রাক্টর দ্বারা প্রতিস্থাপন করুন! = অবজেক্ট।
mathheadinclouds

3

এটি সহায়ক হতে পারে: isDOM

//-----------------------------------
// Determines if the @obj parameter is a DOM element
function isDOM (obj) {
    // DOM, Level2
    if ("HTMLElement" in window) {
        return (obj && obj instanceof HTMLElement);
    }
    // Older browsers
    return !!(obj && typeof obj === "object" && obj.nodeType === 1 && obj.nodeName);
}

উপরের কোডে, আমরা দ্বিগুণ স্বীকৃতি অপারেটরটি অবজেক্টের বুলেটিন মানটি আর্গুমেন্ট হিসাবে পাস করার জন্য ব্যবহার করি , এইভাবে আমরা নিশ্চিত করি যে শর্তাধীন বিবৃতিতে মূল্যায়িত প্রতিটি এক্সপ্রেশনটি শর্ট সার্কিট মূল্যায়নের সুবিধা গ্রহণ করে , সুতরাং ফাংশনটি রিটার্ন trueবাfalse


যে কোনও জালিয়াতিতে আপনার বুলিয়ান শর্ট সার্কিট করা উচিত। উদাহরণস্বরূপ, undefined && window.spam("should bork")জাল spamফাংশন কখনই মূল্যায়ন করে না । সুতরাং !!দরকার নেই, আমি বিশ্বাস করি না। এটি, আপনি কি এমন একটি [অ-একাডেমিক] প্রান্তের কেস সরবরাহ করতে পারেন যেখানে এটির ব্যবহারের বিষয়টি গুরুত্বপূর্ণ?
ruffin

আপনার বিবরণ জন্য আপনাকে ধন্যবাদ। আমি সত্যই বা মিথ্যা নয়, সমস্ত অভিব্যক্তি বুলিয়ান মান রূপান্তর করতে * !! * দ্বিগুণ ত্রুটি ব্যবহার করেছি।
ঝেরাক্স

ঠিক আছে, তবে এটি করার কোন ব্যবহারিক কারণ নেই, আমি মনে করি না - এখানে দেখুন । এবং এখানে অবশ্যই শর্ট-কাট ইভালটির সুবিধা নেওয়ার প্রয়োজন নেই। এমনকি যদি আপনি " !!কখনই প্রয়োজন হয় না" যুক্তিটি কিনেছিলেন না ( এবং যদি আপনি না করেন তবে আমি কেন আগ্রহী না কেন ), আপনি সেই লাইনটি সম্পাদনা করতে return !!(obj && typeof obj === "object" && obj.nodeType === 1 && obj.nodeName);এবং এটি একইরূপে পরিচালনা করতে পারেন।
ruffin

এটি আমিই করেছি;) আরও পরিষ্কার এবং একই প্রভাব। ধন্যবাদ.
ঝেরাক্স

2

আপনি দেখতে পাচ্ছেন যে প্রশ্নে থাকা অবজেক্ট বা নোড একটি স্ট্রিং টাইপ দেয় কিনা।

typeof (array).innerHTML === "string" => false
typeof (object).innerHTML === "string" => false
typeof (number).innerHTML === "string" => false
typeof (text).innerHTML === "string" => false

//any DOM element will test as true
typeof (HTML object).innerHTML === "string" => true
typeof (document.createElement('anything')).innerHTML === "string" => true

3
typeof ({innerHTML: ""}).innerHTML === "string"
Qtax

গরম! এই প্রতিক্রিয়াটি খেলোয়াড়ের হওয়া উচিত। যদি (typof obj.innerHTML! == 'স্ট্রিং') // কোনও ডোম উপাদান নয়।
ব্যবহারকারী3751385

1
আমি পূর্ববর্তী উত্তর সম্পর্কে @ কুইট্যাক্স এবং থোমস্রুটারের সমালোচনার বিরুদ্ধে প্রথমে প্রতিক্রিয়া জানিয়েছিলাম , তবে আমি এটি কিনতে শুরু করছি। যদিও আমি ঠিক ঠিক আগের মতো হাঁসের মতো দৌড়াদৌড়ে কুকুরের মধ্যে দৌড়াতে পারি নি, আমি দেখতে পাচ্ছি যে কেউ কোনও নোড, চলছে কিনা তা পরীক্ষা করে দেখছে না notANode.innerHTML = "<b>Whoops</b>";, পরে সেই কোডটি এই কোডটির দূষিত আপত্তিটি পাস করার পরে । ডিফেন্সিভ কোড === আরও ভাল কোড, অন্যান্য সমস্ত জিনিস সমান এবং এটি শেষ পর্যন্ত রক্ষণাত্মক নয়।
ruffin

2

কৌণিক ব্যবহারকারীদের জন্য:

angular.isElement

https://docs.angularjs.org/api/ng/function/angular.isElement


অ্যাংুলারের কোড অন্তর্ভুক্ত করার জন্য আরও দরকারী : @ ফিনপিংভিনেরfunction isElement(node) { return !!(node && (node.nodeName || (node.prop && node.attr && node.find))); } মতো দেখতে কিছুটা ভালো লাগে । নোট করুন যে এটি নির্ধারণ করছে " যদি রেফারেন্সটি কোনও
ডিওএম

2

আমি মনে করি প্রোটোটাইপিং খুব ভাল সমাধান নয় তবে সম্ভবত এটি সবচেয়ে দ্রুততম: এই কোড ব্লকটি সংজ্ঞায়িত করুন;

Element.prototype.isDomElement = true;
HTMLElement.prototype.isDomElement = true;

আপনার অবজেক্টগুলি পরীক্ষা করার চেয়ে ডোমএলেমেন্ট সম্পত্তি:

if(a.isDomElement){}

আশা করি এটা কাজে লাগবে.


1
1) নিজের মালিকানাযুক্ত অবজেক্টগুলি পরিবর্তন করার পরামর্শ দেওয়া হয় না। 2) এটি একই নথির অংশ নয় এমন উপাদানগুলি সনাক্ত করে না।
fregante

2

এমডিএন অনুসারে

Elementসর্বাধিক সাধারণ বেস শ্রেণি যা থেকে Documentউত্তরাধিকার সূত্রে সমস্ত বস্তু । এটিতে কেবল সমস্ত ধরণের উপাদানগুলির জন্য সাধারণ পদ্ধতি এবং বৈশিষ্ট্য রয়েছে।

আমরা isElementপ্রোটোটাইপ দ্বারা প্রয়োগ করতে পারি । আমার পরামর্শটি এখানে:

/**
 * @description detect if obj is an element
 * @param {*} obj
 * @returns {Boolean}
 * @example
 * see below
 */
function isElement(obj) {
  if (typeof obj !== 'object') {
    return false
  }
  let prototypeStr, prototype
  do {
    prototype = Object.getPrototypeOf(obj)
    // to work in iframe
    prototypeStr = Object.prototype.toString.call(prototype)
    // '[object Document]' is used to detect document
    if (
      prototypeStr === '[object Element]' ||
      prototypeStr === '[object Document]'
    ) {
      return true
    }
    obj = prototype
    // null is the terminal of object
  } while (prototype !== null)
  return false
}
console.log(isElement(document)) // true
console.log(isElement(document.documentElement)) // true
console.log(isElement(document.body)) // true
console.log(isElement(document.getElementsByTagName('svg')[0])) // true or false, decided by whether there is svg element
console.log(isElement(document.getElementsByTagName('svg'))) // false
console.log(isElement(document.createDocumentFragment())) // false


1

আমি মনে করি যে আপনাকে যা করতে হবে তা হ'ল কিছু বৈশিষ্ট্য যা সর্বদা একটি ডোম উপাদানতে থাকবে তার বিশদ চেক করা, তবে তাদের সংমিশ্রণ সম্ভবত অন্য কোনও বস্তুর মধ্যে থাকবে না , যেমন:

var isDom = function (inp) {
    return inp && inp.tagName && inp.nodeName && inp.ownerDocument && inp.removeAttribute;
};

1

ফায়ারফক্সে, আপনি এটি ব্যবহার করতে পারেন instanceof Node। এটি ডিওএম 1 এNode সংজ্ঞায়িত করা হয়েছে

তবে আইই তেমন সহজ নয়।

  1. "উদাহরণস্বরূপ অ্যাক্টিভএক্সঅজেক্ট" কেবল এটি বলতে পারে যে এটি একটি নেটিভ অবজেক্ট।
  2. "typof document.body.appendChild == 'অবজেক্ট'" বলুন এটি ডিওএম অবজেক্ট হতে পারে তবে অন্য কোনও জিনিস একইরকম হতে পারে।

আপনি কেবল এটি ডিওএম ফাংশন ব্যবহার করে ডিওএম উপাদান নিশ্চিত করতে পারেন এবং কোনও ব্যতিক্রম হলে তা ধরতে পারেন। তবে এর পার্শ্ব প্রতিক্রিয়া হতে পারে (উদাঙ্কিত বস্তুর অভ্যন্তরীণ অবস্থা / পারফরম্যান্স / মেমরি ফাঁস)


1

সম্ভবত এটি বিকল্প? অপেরা 11, ফায়ারফক্স 6, ইন্টারনেট এক্সপ্লোরার 8, সাফারি 5 এবং গুগল ক্রোমে 16 পরীক্ষিত।

function isDOMNode(v) {
  if ( v===null ) return false;
  if ( typeof v!=='object' ) return false;
  if ( !('nodeName' in v) ) return false; 

  var nn = v.nodeName;
  try {
    // DOM node property nodeName is readonly.
    // Most browsers throws an error...
    v.nodeName = 'is readonly?';
  } catch (e) {
    // ... indicating v is a DOM node ...
    return true;
  }
  // ...but others silently ignore the attempt to set the nodeName.
  if ( v.nodeName===nn ) return true;
  // Property nodeName set (and reset) - v is not a DOM node.
  v.nodeName = nn;

  return false;
}

উদাহরণস্বরূপ দ্বারা ফাংশন বোকা হবে না

isDOMNode( {'nodeName':'fake'} ); // returns false

2
ভাল চেষ্টা করুন, তবে ব্যতিক্রম হ্যান্ডলিং খুব ব্যয়বহুল যদি এটি এড়ানো যায় তবে। এছাড়াও, ইএস 5 আপনাকে বস্তুর জন্য কেবল পঠনযোগ্য বৈশিষ্ট্যগুলি সংজ্ঞায়িত করতে দেয় allows
অ্যান্ডি ই

1

এটি আমি বুঝতে পেরেছি:

var isHTMLElement = (function () {
    if ("HTMLElement" in window) {
        // Voilà. Quick and easy. And reliable.
        return function (el) {return el instanceof HTMLElement;};
    } else if ((document.createElement("a")).constructor) {
        // We can access an element's constructor. So, this is not IE7
        var ElementConstructors = {}, nodeName;
        return function (el) {
            return el && typeof el.nodeName === "string" &&
                 (el instanceof ((nodeName = el.nodeName.toLowerCase()) in ElementConstructors 
                    ? ElementConstructors[nodeName] 
                    : (ElementConstructors[nodeName] = (document.createElement(nodeName)).constructor)))
        }
    } else {
        // Not that reliable, but we don't seem to have another choice. Probably IE7
        return function (el) {
            return typeof el === "object" && el.nodeType === 1 && typeof el.nodeName === "string";
        }
    }
})();

কর্মক্ষমতা উন্নত করতে আমি একটি স্ব-আমন্ত্রণমূলক ফাংশন তৈরি করেছি যা কেবল একবার ব্রাউজারের ক্ষমতা পরীক্ষা করে এবং সেই অনুযায়ী উপযুক্ত ফাংশন বরাদ্দ করে।

প্রথম পরীক্ষাটি বেশিরভাগ আধুনিক ব্রাউজারে কাজ করা উচিত এবং ইতিমধ্যে এখানে আলোচনা করা হয়েছিল। উপাদানটির উদাহরণ হিসাবে এটি কেবল পরীক্ষা করেHTMLElement । খুব সোজা।

দ্বিতীয়টি সবচেয়ে আকর্ষণীয় একটি। এটি এর মূল কার্যকারিতা:

return el instanceof (document.createElement(el.nodeName)).constructor

এটি পরীক্ষা করে যে এল এটি নির্মাণকারীর একটি উদাহরণ কিনা তা এটি পরীক্ষা করে। এটি করার জন্য, আমাদের একটি উপাদানটির চালকের অ্যাক্সেস প্রয়োজন। এজন্য আমরা যদি এটি-বিবৃতিতে পরীক্ষা করি। উদাহরণস্বরূপ IE7 এই ব্যর্থ হয়, কারণ (document.createElement("a")).constructorহয় undefinedIE7 হবে।

এই পদ্ধতির সমস্যাটি document.createElementহ'ল সত্যই দ্রুততম কাজ নয় এবং যদি আপনি এর সাথে অনেকগুলি উপাদান পরীক্ষা করে থাকেন তবে সহজেই আপনার অ্যাপ্লিকেশনটি ধীর করতে পারে। এটি সমাধান করার জন্য, আমি নির্মাতাদের ক্যাশে করার সিদ্ধান্ত নিয়েছি। বস্তুElementConstructorsমানটির সাথে সম্পর্কিত কনস্ট্রাক্টরগুলির সাথে কীটিরূপে নোডনাম রয়েছে। যদি কোনও কনস্ট্রাক্টর ইতিমধ্যে ক্যাশে থাকে তবে এটি এটি ক্যাশে থেকে ব্যবহার করে, অন্যথায় এটি এলিমেন্ট তৈরি করে, ভবিষ্যতে অ্যাক্সেসের জন্য তার নির্মাতাকে ক্যাশে করে এবং তারপরে এটির বিরুদ্ধে পরীক্ষা করে।

তৃতীয় পরীক্ষাটি হ'ল অপ্রীতিকর ফ্যালব্যাক। এটি পরীক্ষা করে এল একটি কিনা object, এর জন্য একটি nodeTypeসম্পত্তি সেট আছে 1এবং একটি স্ট্রিং রয়েছে nodeName। এটি অবশ্যই খুব নির্ভরযোগ্য নয়, তবুও বেশিরভাগ ব্যবহারকারীর এতদূর পিছিয়ে পড়া উচিত নয়।

এটি এখনও সবচেয়ে নির্ভরযোগ্য পদ্ধতির সাথে আমি উপস্থিত হয়েছি যখন এখনও পারফরম্যান্সকে যথাসম্ভব উচ্চতর রেখেছি।


1

নোডobj থেকে উত্তরাধিকার সূত্রে পরীক্ষা করুন ।

if (obj instanceof Node){
    // obj is a DOM Object
}

নোড একটি প্রাথমিক ইন্টারফেস যা থেকে এইচটিএমলেমেন্ট এবং পাঠ্য উত্তরাধিকার সূত্রে প্রাপ্ত।


1

এইচটিএমলেলেট থেকে কোনও কাঁচা জেএস বস্তু আলাদা করুন

function isDOM (x){
     return /HTML/.test( {}.toString.call(x) );
 }

ব্যবহার করুন:

isDOM( {a:1} ) // false
isDOM( document.body ) // true

// OR

Object.defineProperty(Object.prototype, "is",
    {
        value: function (x) {
            return {}.toString.call(this).indexOf(x) >= 0;
        }
    });

ব্যবহার করুন:

o={}; o.is("HTML") // false o=document.body; o.is("HTML") // true


0

এখানে jQuery ব্যবহার করে একটি কৌশল

var obj = {};
var element = document.getElementById('myId'); // or simply $("#myId")

$(obj).html() == undefined // true
$(element).html() == undefined // false

সুতরাং এটি একটি ফাংশন স্থাপন:

function isElement(obj){

   return (typeOf obj === 'object' && !($(obj).html() == undefined));

}

2
jQuery অভ্যন্তরীণভাবে করছে elem.nodeType === 1তাইলে কেন কল ওভারহেড এবং jQuery নির্ভরতা সংরক্ষণ করবেন না এবং আপনার আইসমেট ফাংশনটি নিজেই করুন?
জোসেফ

এটি 2016, কেবল "না" বলুন।
থমাস ম্যাককেবে

0

ইএস 5-কমপ্লায়েন্ট ব্রাউজারগুলির জন্য এই বা অন্য কোনও কিছুর হাতুড়ি নয় কেবল কেন নয়:

function isDOM(e) {
  return (/HTML(?:.*)Element/).test(Object.prototype.toString.call(e).slice(8, -1));
}

টেক্সটনোডে কাজ করবে না এবং শেডো ডোম বা ডকুমেন্টফ্রেগমেন্টস ইত্যাদি সম্পর্কে নিশ্চিত হবে না তবে প্রায় সব HTML ট্যাগ উপাদানগুলিতে কাজ করবে


0

এটি প্রায় কোনও ব্রাউজারের জন্য কাজ করবে। (এখানে উপাদান এবং নোডের মধ্যে কোনও পার্থক্য নেই)

function dom_element_check(element){
    if (typeof element.nodeType !== 'undefined'){
        return true;
    }
    return false;
}

প্রথমত, আপনাকে সত্য বা মিথ্যা প্রত্যাবর্তনের দরকার নেই, কেবলমাত্র বিবৃতিটি ফিরিয়ে দিন। দ্বিতীয়ত, এটি {নোডটাইপের জন্য সত্য হবে: 1}
নীলজাইকে

0

একটি পরম সঠিক পদ্ধতি, চেক টার্গেটটি একটি আসল এইচটিএমএল উপাদান প্রাথমিক কোড:

    (function (scope) {
        if (!scope.window) {//May not run in window scope
            return;
        }
        var HTMLElement = window.HTMLElement || window.Element|| function() {};

        var tempDiv = document.createElement("div");
        var isChildOf = function(target, parent) {

            if (!target) {
                return false;
            }
            if (parent == null) {
                parent = document.body;
            }
            if (target === parent) {
                return true;
            }
            var newParent = target.parentNode || target.parentElement;
            if (!newParent) {
                return false;
            }
            return isChildOf(newParent, parent);
        }
        /**
         * The dom helper
         */
        var Dom = {
            /**
             * Detect if target element is child element of parent
             * @param {} target The target html node
             * @param {} parent The the parent to check
             * @returns {} 
             */
            IsChildOf: function (target, parent) {
                return isChildOf(target, parent);
            },
            /**
             * Detect target is html element
             * @param {} target The target to check
             * @returns {} True if target is html node
             */
            IsHtmlElement: function (target) {
                if (!X.Dom.IsHtmlNode(target)) {
                    return false;
                }
                return target.nodeType === 1;
            },
            /**
             * Detect target is html node
             * @param {} target The target to check
             * @returns {} True if target is html node
             */
            IsHtmlNode:function(target) {
                if (target instanceof HTMLElement) {
                    return true;
                }
                if (target != null) {
                    if (isChildOf(target, document.documentElement)) {
                        return true;
                    }
                    try {
                        tempDiv.appendChild(target.cloneNode(false));
                        if (tempDiv.childNodes.length > 0) {
                            tempDiv.innerHTML = "";
                            return true;
                        }
                    } catch (e) {

                    }
                }
                return false;
            }
        };
        X.Dom = Dom;
    })(this);

আইই 5 তে পরীক্ষা করুন


0

প্রতিটি ডোমিলমেন্ট.কমস্ট্রাক্টর এইচটিএমএল ... এলিমেন্ট () বা [অবজেক্ট এইচটিএমএল ... উপাদান] তাই ফেরত দেয় ...

function isDOM(getElem){
    if(getElem===null||typeof getElem==="undefined") return false;
    var c = getElem.constructor.toString();
    var html = c.search("HTML")!==-1;
    var element = c.search("Element")!==-1;
    return html&&element;
}

0

আমার এটি করার একটি বিশেষ উপায় আছে যা উত্তরে এখনও উল্লেখ করা হয়নি।

আমার সমাধান চারটি পরীক্ষার উপর ভিত্তি করে। যদি বস্তুটি চারটি পাস করে তবে এটি একটি উপাদান:

  1. বস্তুটি নাল নয়।

  2. অবজেক্টটির একটি পদ্ধতি রয়েছে "অ্যাপেন্ডচিল্ড"।

  3. "অ্যাপেন্ডচিল্ড" পদ্ধতিটি নোড শ্রেণীর কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়েছিল এবং এটি কেবল একটি ইমপোস্টার পদ্ধতি নয় (একটি ব্যবহারকারীর দ্বারা তৈরি একটি সম্পত্তি যা একটি অভিন্ন নাম সহ)।

  4. বস্তুটি নোড প্রকার 1 (উপাদান) এর। নোড শ্রেণি থেকে পদ্ধতিগুলির উত্তরাধিকারী অবজেক্টগুলি সর্বদা নোড হয় তবে প্রয়োজনীয় উপাদানগুলি হয় না not

প্রশ্ন: প্রদত্ত সম্পত্তি উত্তরাধিকার সূত্রে প্রাপ্ত কিনা এবং কীভাবে তা কেবল একজন চাপানো নয় তা আমি কীভাবে পরীক্ষা করব?

উত্তর: কোনও পদ্ধতিটি নোডের কাছ থেকে সত্যিকার অর্থে উত্তরাধিকার সূত্রে প্রাপ্ত কিনা তা দেখার জন্য প্রথমে সম্পত্তিটিতে "অবজেক্ট" বা "ফাংশন" রয়েছে কিনা তা যাচাই করা উচিত। এরপরে, সম্পত্তিটিকে একটি স্ট্রিংয়ে রূপান্তর করুন এবং ফলাফলটিতে "[নেটিভ কোড]" পাঠ্য রয়েছে কিনা তা পরীক্ষা করুন। ফলাফলটি যদি এমন কিছু দেখায়:

function appendChild(){
[Native Code]
}

তারপরে নোড অবজেক্ট থেকে পদ্ধতিটি উত্তরাধিকার সূত্রে প্রাপ্ত হয়েছে। Https://davidwalsh.name/detect-native-function দেখুন

এবং সবশেষে, সমস্ত পরীক্ষা একত্রিত করে, সমাধানটি হ'ল:

function ObjectIsElement(obj) {
    var IsElem = true;
    if (obj == null) {
        IsElem = false;
    } else if (typeof(obj.appendChild) != "object" && typeof(obj.appendChild) != "function") {
        //IE8 and below returns "object" when getting the type of a function, IE9+ returns "function"
        IsElem = false;
    } else if ((obj.appendChild + '').replace(/[\r\n\t\b\f\v\xC2\xA0\x00-\x1F\x7F-\x9F ]/ig, '').search(/\{\[NativeCode]}$/i) == -1) {
        IsElem = false;
    } else if (obj.nodeType != 1) {
        IsElem = false;
    }
    return IsElem;
}

0
(element instanceof $ && element.get(0) instanceof Element) || element instanceof Element

এটি jQuery বা জাভাস্ক্রিপ্ট DOM উপাদান হলেও এটি পরীক্ষা করবে


0

আপনি প্রকৃত HTMLEement যাচাই করে নেওয়ার একমাত্র উপায়, এবং কেবলমাত্র এইচটিএমএল এলিমেন্টের মতো একই বৈশিষ্ট্যযুক্ত কোনও বস্তু নয়, এটি জাভাস্ক্রিপ্টে নতুন নোড () তৈরি করা অসম্ভব হওয়ার কারণে এটি নোডের উত্তরাধিকার সূত্রে প্রাপ্ত কিনা তা নির্ধারণ করা। (যদি না দেশীয় নোড ফাংশনটি ওভাররাইট না করা হয় তবে তার পরে আপনার ভাগ্যের বাইরে)। তাই:

function isHTML(obj) {
    return obj instanceof Node;
}

console.log(
  isHTML(test),
  isHTML(ok),
  isHTML(p),
  isHTML(o),
  isHTML({
    constructor: {
      name: "HTML"
    }
  }),
  isHTML({
    __proto__: {
      __proto__: {
        __proto__: {
          __proto__: {
            constructor: {
              constructor: { 
                name: "Function"
                
              },
              name: "Node"
            }
          }
        }
      }
    }
  }),
)
<div id=test></div>
<blockquote id="ok"></blockquote>
<p id=p></p>
<br id=o>
<!--think of anything else you want--!>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.