দৃশ্যমান ডিওমে কোনও উপাদান উপস্থিত রয়েছে কিনা তা আমি কীভাবে পরীক্ষা করতে পারি?


421

getElementByIdপদ্ধতিটি ব্যবহার না করে আপনি অস্তিত্বের জন্য কোনও উপাদানকে কীভাবে পরীক্ষা করবেন ?

আমি রেফারেন্সের জন্য একটি লাইভ ডেমো সেট আপ করেছি । আমি এখানে কোডও প্রিন্ট করব:

<!DOCTYPE html>
<html>
<head>
    <script>
    var getRandomID = function (size) {
            var str = "",
                i = 0,
                chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
            while (i < size) {
                str += chars.substr(Math.floor(Math.random() * 62), 1);
                i++;
            }
            return str;
        },
        isNull = function (element) {
            var randomID = getRandomID(12),
                savedID = (element.id)? element.id : null;
            element.id = randomID;
            var foundElm = document.getElementById(randomID);
            element.removeAttribute('id');
            if (savedID !== null) {
                element.id = savedID;
            }
            return (foundElm) ? false : true;
        };
    window.onload = function () {
        var image = document.getElementById("demo");
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false
        console.log('null', (image === null) ? true : false); // false
        console.log('find-by-id', isNull(image)); // false
        image.parentNode.removeChild(image);
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
        console.log('null', (image === null) ? true : false); // false ~ should be true?
        console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
    };
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

মূলত উপরের কোডটি দেখায় যে কোনও উপাদান একটি ভেরিয়েবলের মধ্যে সংরক্ষণ করা হয় এবং তারপরে DOM থেকে সরানো হয়। তবুও উপাদানটি ডিওএম থেকে অপসারণ করা হলেও, ভেরিয়েবল উপাদানটিকে প্রথম হিসাবে ঘোষণার সময়টিকে ধরে রাখে। অন্য কথায়, এটি উপাদানটির নিজস্ব কোনও জীবন্ত রেফারেন্স নয়, বরং একটি প্রতিরূপ। ফলস্বরূপ, অস্তিত্বের জন্য ভেরিয়েবলের মান (উপাদান) পরীক্ষা করা একটি অপ্রত্যাশিত ফলাফল সরবরাহ করবে।

isNullফাংশন একটি পরিবর্তনশীল থেকে একটি উপাদান অস্তিত্বের চেক করার জন্য আমার প্রচেষ্টা, এবং এটি কাজ করে, কিন্তু আমি যদি সেখানে একটি সহজ উপায় একই ফলাফল সম্পন্ন করার জন্য জানি চাই।

PS: আমি জাভাস্ক্রিপ্টের ভেরিয়েবলগুলি কেন এমন আচরণ করে তা সম্পর্কে আগ্রহী যদি কেউ বিষয় সম্পর্কিত কিছু ভাল নিবন্ধ সম্পর্কে জানেন।


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

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

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

2
@ জাস্টিনবুল প্রত্যাবর্তনের জন্য উপাদানগুলির অনুলিপিগুলি সংরক্ষণ করার বিষয়ে সতর্ক হন। একটি অ্যারেতে একটি ডিওএম উপাদান সংরক্ষণ করার সময়, ডিওএম উপাদানটির একটি রেফারেন্স সংরক্ষণ করা হয়, অনুলিপি নয়, সুতরাং অ্যারের উপাদানটি উল্লেখ করার সাথে সাথে ডম উপাদানটিতে করা পরিবর্তনগুলি প্রতিফলিত হবে। জাভাস্ক্রিপ্টের সমস্ত বস্তুর ক্ষেত্রে এটিই ('অবজেক্টের ধরণের ভেরিয়েবল)'।
অ্যান্টনি ডিসন্তি

উত্তর:


545

দেখে মনে হচ্ছে কিছু লোক এখানে অবতরণ করছে, এবং কোনও উপাদান উপস্থিত রয়েছে কিনা তা কেবল জানতে চান (মূল প্রশ্নের চেয়ে কিছুটা আলাদা)।

এটি ব্রাউজারের যে কোনও নির্বাচন পদ্ধতি ব্যবহার করে এবং সত্যবাদী মানের জন্য পরীক্ষা করা (সাধারণভাবে) যতটা সহজ ।

উদাহরণস্বরূপ, যদি আমার উপাদান একটি ছিল idএর "find-me", আমি কেবল ব্যবহার করতে পারে ...

var elementExists = document.getElementById("find-me");

এটি হয় উপাদানটির একটি রেফারেন্স প্রদান করতে নির্দিষ্ট করা হয় বা null। আপনার যদি অবশ্যই বুলিয়ান মান থাকে !!তবে পদ্ধতি কল করার আগে কেবল টস করুন।

তদতিরিক্ত, আপনি উপাদান অনুসন্ধানের জন্য বিদ্যমান অন্যান্য অনেকগুলি পদ্ধতি ব্যবহার করতে পারেন, যেমন (সমস্ত জীবিত document):

  • querySelector()/querySelectorAll()
  • getElementsByClassName()
  • getElementsByName()

এর মধ্যে কয়েকটি পদ্ধতি একটি ফেরত দেয় NodeList, সুতরাং এর lengthসম্পত্তিটি পরীক্ষা করে নেওয়ার বিষয়টি নিশ্চিত হন , কারণ একটি NodeListএকটি বস্তু এবং তাই সত্য


দৃশ্যমান ডিওমের অংশ হিসাবে কোনও উপাদান উপস্থিত রয়েছে কিনা তা প্রকৃতপক্ষে নির্ধারণের জন্য (মূলত জিজ্ঞাসিত প্রশ্নটির মতো), সসুয়েলডক্যাট আপনার নিজের ঘূর্ণায়নের চেয়ে আরও ভাল সমাধান সরবরাহ করে (যেমন এই উত্তরটি ব্যবহার করে)। অর্থাৎ, ব্যবহার করা DOM উপাদানে পদ্ধতি।contains()

আপনি এটি এর মতো ব্যবহার করতে পারেন ...

document.body.contains(someReferenceToADomElement);

1
ঠিক আমি খুঁজছেন ছিল কি! তাই স্পষ্টতই হ্যাঁ, আমি কেন এটি ভাবিনি। এছাড়াও, আপনি কোনও ভাল নিবন্ধ সম্পর্কে জানেন যা ভেরিয়েবলগুলি কেন এই জাতীয় আচরণ করে তা ব্যাখ্যা করে?
জাস্টিন বুল

3
এমনকি আরও ছোট:var elementInDom = function( el ) { while ( el = el.parentNode ) if ( el === document ) return true; return false; }
বেনিডিচ

2
@ বাটলবাটকাস আসল প্রশ্নটি পড়ুন। যে সমাধান আপনি অর্থে দেখা যায় না ব্যবহার করা যেমন getElementById() হবে বা DOM উপাদান একটি রেফারেন্স আসতে nullতাই ব্যবহার typeof(বিশেষ করে RHS দিকে) (যদি এটি সংজ্ঞায়িত করা হয় নি, LHS শর্ত একটি নিক্ষেপ করা হবে ভুল ReferenceError)।
অ্যালেক্স

2
নীচে পোস্ট করা হয়েছে কি এটি ব্যবহার করার কোন কারণ আছে: document.body.contains()যা মনে হয় খুব ভাল ব্রাউজার সমর্থন আছে?
ক্রাশ করুন

1
@ জোনজ পুরানো উত্তরের অংশটি সরিয়ে দিয়েছেন, গিয়ে সিসওয়েলডক্যাটকে
এলেক্স

310

getElementById()এটি উপলব্ধ থাকলে ব্যবহার করুন ।

এছাড়াও, jQuery দিয়ে এটি করার একটি সহজ উপায়:

if ($('#elementId').length > 0) {
  // Exists.
}

এবং যদি আপনি তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করতে না পারেন তবে কেবল জাভাস্ক্রিপ্টের ভিত্তিতে থাকুন:

var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
  // Exists.
}

2
যে প্রকল্পে আমি কাজ করছি তার জন্য আমি কোনও লাইব্রেরি ব্যবহার করতে পারছি না। ভাল-ওল 'ফ্যাশন কাঁচা কোড শুধুমাত্র। আমি সেই jQuery পদ্ধতি সম্পর্কে সচেতন, তবে এটি jQuery ধারক মধ্যে আবৃত না থাকা উপাদানগুলিতে কাজ করে না। উদাহরণস্বরূপ, $('#elementId')[0].lengthএকই ফলাফল উত্পাদন করবে না।
জাস্টিন বুল

8
দ্বিতীয় কোডের উদাহরণে যদি বিবৃতি দেওয়া হয় তবে এরকম জটিল হওয়ার কোনও ভাল কারণ আছে? কেন সহজভাবে নয় if (element) {}? যখন উপাদানটি অপরিজ্ঞাত বা নাল হয় তখন এই অভিব্যক্তিটি মিথ্যা। যদি উপাদানটি কোনও ডোম উপাদান হয় তবে এক্সপ্রেশনটি সত্য।
কায়াহর

2
@ কায়াহর এটি অনেক জটিল। getElementById()এটি উপাদানটি nullনা পেলে প্রত্যাবর্তনের জন্য বিশেষত , সুতরাং সত্যবাদী প্রত্যাবর্তন মূল্যের জন্য যাচাই করা দরকার যা প্রয়োজন তা-ই।
অ্যালেক্স

5
আমি মনে করি এটি কেবল সাধারণ জ্ঞান।
কন

8
getElementByIdকখনও ফিরে আসা উচিত নয় undefined। যাই হোক না কেন, element != nullচেকটি এটিকে বেছে নেবে।

191

নোড.কন্টেনস ডোম এপিআই ব্যবহার করে আপনি পৃষ্ঠায় যে কোনও উপাদান উপস্থিত থাকতে পারবেন (বর্তমানে ডমটিতে রয়েছে ) খুব সহজেই:

document.body.contains(YOUR_ELEMENT_HERE);

ক্রস-ব্রাউজার দ্রষ্টব্য : documentইন্টারনেট এক্সপ্লোরারে থাকা সামগ্রীর কোনও contains()পদ্ধতি নেই - ক্রস ব্রাউজারের সামঞ্জস্যতা নিশ্চিত করতে, document.body.contains()পরিবর্তে ব্যবহার করুন।


4
এটি এই সমস্যার চূড়ান্ত উত্তর বলে মনে হচ্ছে ... এবং এর সমর্থন, যদি MDN বিশ্বাস করা যায় তবে এটি বেশ ভাল।
পিষ্ট করুন

2
এটি সেরা উত্তর। মনে রাখবেন যে কেবলমাত্র চেক document.contains()করা যথেষ্ট।
অ্যালেক্স

@csuwldcat এটি কমপক্ষে ক্রমে আমার জন্য কাজ করেছে document.contains(document.documentElement)documentআছে Nodeতার প্রোটোটাইপ চেইনের, যতটা আমি বলতে পারেন ( document-> HTMLDocument-> Document-> Node)
Alex

4
এটি প্রকৃতপক্ষে সেরা উত্তর: - এটি একটি ওয়েব স্ট্যান্ডার্ড - এটি খুব ভাল সমর্থিত (কিছুটা আশ্চর্যরূপে এটি ফায়ারফক্সে 9 ম সংস্করণ পর্যন্ত উপস্থিত হবে না, আমি অনুমান করছি কারণ এটি IE- তে উদ্ভাবিত একটি অ-স্ট্যান্ডার্ড ফাংশন ছিল যা ছিল না পরবর্তীকালে মানকৃত) - এটি অবশ্যই দ্রুত হওয়া উচিত কারণ এটি একটি স্থানীয় এপিআইতে একক কল ব্যবহার করে
Jon z

2
@LeeSaxon syntaxis হয় document.body.contains([selector]), অর্থাত্document.body.contains(document.getElementById('div')
iglesiasedd

67

আমি কেবল:

if(document.getElementById("myElementId")){
    alert("Element exists");
} else {
    alert("Element does not exist");
}

এটি আমার পক্ষে কাজ করে এবং এটি নিয়ে এখনও কোনও সমস্যা নেই ...


1
যদিও এর মূল প্রশ্নের সাথে কোনও সম্পর্ক নেই। ওপি জানতে চায় যে কোনও ডিওএম উপাদানটির রেফারেন্স দৃশ্যমান ডিওএম এর অংশ কিনা is
অ্যালেক্স

16
আমাকে সাহায্য করেছেন যদিও। আমি উপাদান অস্তিত্বের সহজ পরীক্ষা খুঁজছিলাম; এই কাজ। ধন্যবাদ।
খভেরিম

1
এই উত্তরটি ভাল কাজ করে তবে কেবল যখন উপাদানটির একটি থাকে id। আরও ভাল সমাধান যা প্রশ্নের উত্তর দেয় যে দৃশ্যমান ডিওমে উপাদান উপস্থিত রয়েছে কিনা তা কীভাবে পরীক্ষা করবেন? যে কোনও উপাদান সহ, idএস ছাড়া উপাদানগুলিও করণীয় document.body.contains(element)
এডওয়ার্ড

@ অ্যাডওয়ার্ড এটি থেকে সম্পূর্ণ আলাদা কিছুcontains()
এলেক্স ২

আমি তা পেয়েছি আমি কেবল আমার মন্তব্যেই পরামর্শ দিচ্ছিলাম যে অন্যান্য উত্তরগুলি প্রশ্নের চেয়ে আরও ভাল এবং আরও উপযুক্ত।
এডওয়ার্ড

11

আপনি কেবল প্যারেন্ট নোড সম্পত্তিটি নাল কিনা তা পরীক্ষা করে দেখতে পারেন।

এটাই,

if(!myElement.parentNode)
{
    // The node is NOT in the DOM
}
else
{
    // The element is in the DOM
}

আমি জানি এটি একটি পুরানো প্রশ্ন তবে এই উত্তরটি হ'ল আমি যে প্রশ্নটি খুঁজছিলাম তার মার্জিত সহজ সমাধানের ধরণ।
poby

11
@ পবি: এটি মার্জিত বলে মনে হতে পারে তবে অনুরোধ করা সত্যই তা করছে না। এটি কেবলমাত্র উপাদানটির পিতামুক্ত উপাদান রয়েছে কিনা তা যাচাই করে। এটি বোঝায় না যে উপাদানটি দৃশ্যমান ডিওমে রয়েছে কারণ সম্ভবত পিতামণ্ডল উপাদান এটির সাথে সংযুক্ত নেই।
কায়াহর

শেষের কোনওটি নথি কিনা তা জানতে একজনকে সমস্ত পিতামাতার সাথে যেতে হবে। অন্য সমস্যাটি হ'ল এটি এখনও দৃশ্যমান পরিসরের বাইরে থাকতে পারে বা আচ্ছাদিত হতে পারে বা অন্য অনেক কারণে এটি দৃশ্যমান হতে পারে না।
আরেক বাল

কোনও ডকুমেন্টের খণ্ডে যুক্ত হওয়ার কারণে কোনও উপাদানটির প্যারেন্ট নোড থাকতে পারে।

11

থেকে মজিলা ডেভেলপার নেটওয়ার্ক :

এই ফাংশনটি পৃষ্ঠার শরীরে কোনও উপাদান রয়েছে কিনা তা পরীক্ষা করে। () অন্তর্ভুক্ত হিসাবে অন্তর্ভুক্ত এবং শরীরে নিজেই রয়েছে কিনা তা নির্ধারণ করে আইসপেজের উদ্দেশ্য নয়, এই ক্ষেত্রে স্পষ্টতই মিথ্যা প্রত্যাবর্তন ঘটে।

function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}

নোড হ'ল নোড আমরা <body> তে যাচাই করতে চাই।


+1, এটি (স্বেচ্ছাসেবী) পাঠ্য নোডগুলির জন্যও (বা মন্তব্য নোডগুলি) কাজ করে?
নিকস এম।

@NikosM। এটি যে কোনও এইচটিএমএল ট্যাগে কাজ করা উচিত তবে আমি এটি পরীক্ষা করি নি।
একরামুল হক

4
না করা উচিত falseহবে true?
মার্ক-আন্দ্রে লাফোর্টুন

তাহলে nodeIS document.bodyনিশ্চয় পদ্ধতি ফিরে যাওয়া উচিত true? অর্থাত,return (node === document.body) || document.body.contains(node);
ডাইসকগ

7

সবচেয়ে সহজ সমাধানটি বেসুরির সম্পত্তিটি যাচাই করা হয় , যা কেবলমাত্র ডিওমে উপাদানটি সন্নিবেশ করা হলে সেট করা হয় এবং এটি সরিয়ে ফেলা হলে এটি খালি স্ট্রিংয়ে ফিরে আসে।

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

// "div" is in the DOM, so should print a string
console.log(div.baseURI);

// Remove "div" from the DOM
document.body.removeChild(div);

// Should print an empty string
console.log(div.baseURI);
<div></div>


5
এমনকি আমি জানতাম না ডোম নোডগুলিতে বেসুরি সম্পত্তি রয়েছে। এই পদ্ধতির সম্পর্কে আমি যা পছন্দ করি তা হ'ল এটি নিজেই উপাদানটির একটি সম্পত্তি ব্যবহার করে, যার সম্ভবত এটির অর্থ এটি উপাদানটি কোনও ভিন্ন নথিতে (যেমন একটি আইফ্রেমে) থাকলেও কাজ করবে। আমি এটি সম্পর্কে যা পছন্দ করি না তা হ'ল এটি ওয়েবকিটের বাইরে কাজ করে না বলে মনে হয়।
ডক্টরডেস্ট্রাকটো

এই সাবধান নিম্নলিখিত ত্রুটির নিক্ষেপ করা হবে যদি উপাদান নথিতে নয়: Cannot read property 'baseURI' of null। উদাহরণ:console.log(document.querySelector('aside').baseURI)
ইয়ান ডেভিস

এই পদ্ধতিটি ব্যবহার করা যাবে না কারণ এটি সর্বদা এখনকার মতো একই স্ট্রিংটি প্রিন্ট করে।
কাগামী স্যাসা রোজলাইট

4

jQuery সমাধান:

if ($('#elementId').length) {
    // element exists, do something...
}

এটি jQuery ব্যবহার করে আমার জন্য কাজ করেছে এবং এটি ব্যবহারের প্রয়োজন নেই $('#elementId')[0]


কেন $('#elementId')[0]কিছু এড়ানো যায়?
অলেক্স

আমি দীর্ঘ দিন এর জবাব দিয়েছি, সুতরাং, $ ('# এলিমেন্টআইডি') ব্যবহার করে [0] আমি বিশ্বাস করি আপনি সর্বদা ইঙ্গিত দিচ্ছেন যে মানটি 0 তম সূচককে হবে। এইভাবে আপনি সর্বদা 1 ম সংঘটিত উপাদানটির জন্য চেক করছেন। একই নামের একাধিক চেকবাক্সগুলি কী ছিল তাই রেডিও বোতামের মতো। এই সময়। দৈর্ঘ্য সহায়ক হবে।
কোড বুস্টার

3

সিএসওয়ালডাক্টের সমাধানটি গুচ্ছের সেরা বলে মনে হচ্ছে, তবে জাভাস্ক্রিপ্ট কোড যে আইফ্রেমে চলছে তার চেয়ে আলাদা কোনও নথিতে রয়েছে এমন একটি উপাদান দিয়ে এটি সঠিকভাবে কাজ করার জন্য সামান্য পরিবর্তন প্রয়োজন ification

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

ownerDocumentকেবল সরল পুরাতন document(যা উপাদানটির মালিকের নথিকে উল্লেখ করতে পারে বা নাও পারে) এর বিপরীতে উপাদানটির সম্পত্তির ব্যবহারটি নোট করুন ।

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


3

অভিভাবকদের পুনরাবৃত্তি করার পরিবর্তে, উপাদানটি ডিওএম থেকে বিচ্ছিন্ন হয়ে গেলে আপনি কেবল সীমাবদ্ধ আয়তক্ষেত্রটি পেতে পারেন যা সমস্ত শূন্য হয়:

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    return (rect.top || rect.left || rect.height || rect.width)?true:false;
}

আপনি যদি শূন্য শীর্ষ এবং শূন্য বামে শূন্য প্রস্থ এবং উচ্চতা উপাদানের প্রান্ত কেসটি পরিচালনা করতে চান তবে আপনি পিতামাতার পুনরাবৃত্তি করে দ্বিগুণ চেক করতে পারবেন document.body:

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    if (element.top || element.left || element.height || element.width)
        return true;
    while(element) {
        if (element == document.body)
            return true;
        element = element.parentNode;
    }
    return false;
}

এটি পুনঃ-লেআউটটির কারণ: gist.github.com/paulirish/5d52fb081b3570c81e3a#box-metics
স্টিভেন

3

কোনও উপাদান উপস্থিত রয়েছে কিনা তা যাচাই করার একটি সহজ উপায় jQuery এর এক-লাইন কোডের মাধ্যমে করা যেতে পারে।

নীচের কোডটি এখানে:

if ($('#elementId').length > 0) {
    // Do stuff here if the element exists
} else {
    // Do stuff here if the element does not exist
}


2

এই কোডটি আমার পক্ষে কাজ করে এবং এতে আমার কোনও সমস্যা নেই।


    if(document.getElementById("mySPAN")) {
        // If the element exists, execute this code
        alert("Element exists");
    }
    else {
        // If the element does not exist execute this code
        alert("Element does not exists");
    }

1

আপনি এটিও ব্যবহার করতে পারেন jQuery.contains, যা কোনও উপাদান অন্য উপাদানের বংশধর কিনা তা পরীক্ষা করে। আমি documentঅনুসন্ধান করতে পিতামাতার উপাদান হিসাবে পেরিয়েছি কারণ পৃষ্ঠা পৃষ্ঠায় ডোম বিদ্যমান যে কোনও উপাদান এর বংশধর document

jQuery.contains( document, YOUR_ELEMENT)

1

উপাদানগুলি এর <html>মাধ্যমে শিশু কিনা তা পরীক্ষা করুন Node::contains():

const div = document.createElement('div');
document.documentElement.contains(div); //-> false

document.body.appendChild(div);
document.documentElement.contains(div); //-> true

আমি এগুলি এবং আরও অনেক কিছুকে দ্বৈত-বিচ্ছিন্ন করে রেখেছি ।


1

JQuery সহ একটি সহজ সমাধান:

$('body').find(yourElement)[0] != null

2
... বা$(document).find(yourElement).length !== 0
গ্রিন

1
এটি এটি কাজে লাগায় null == undefined। আসল প্রত্যাবর্তিত মান হবে undefined। এর সাথে তুলনা করা nullকিছুটা অদ্ভুত।
অ্যালেক্স

1
// This will work prefectly in all :D
function basedInDocument(el) {

    // This function is used for checking if this element in the real DOM
    while (el.parentElement != null) {
        if (el.parentElement == document.body) {
            return true;
        }
        el = el.parentElement; // For checking the parent of.
    } // If the loop breaks, it will return false, meaning
      // the element is not in the real DOM.

    return false;
}

সব কি? সব মামলা?
পিটার মর্টেনসেন

1
  • যদি কোনও উপাদানটি থাকে তবে DOMএর পিতামাতারও মধ্যে থাকা উচিত
  • এবং শেষ পিতামহী হওয়া উচিত document

সুতরাং এটি পরীক্ষা করতে যে আমরা parentNodeশেষ দাদুর কাছে পৌঁছা না হওয়া পর্যন্ত আমরা কেবলমাত্র উপাদানটির গাছে লুপ করব

এটা ব্যবহার কর:

/**
 * @param {HTMLElement} element - The element to check
 * @param {boolean}     inBody  - Checks if the element is in the body
 * @return {boolean}
 */
var isInDOM = function(element, inBody) {
    var _ = element, last;

    while (_) {
        last = _;
        if (inBody && last === document.body) { break;}
        _ = _.parentNode;
    }

    return inBody ? last === document.body : last === document;
};

2
এটি সেরা উত্তর হতে পারে কারণ এটি ডিওমে কোনও পুনরায় রেন্ডারিংয়ের কারণ নয়।
স্টিভেন ওয়াচন

একটি ব্যাখ্যা ক্রমযুক্ত হবে ( আপনার উত্তর সম্পাদনা করে প্রতিক্রিয়া জানান , এখানে মন্তব্যে নয়)।
পিটার মর্টেনসেন

0

আমি এই পদ্ধতির পছন্দ:

var elem = document.getElementById('elementID');

if (elem)
    do this
else
    do that

এছাড়াও

var elem = ((document.getElementById('elemID')) ? true:false);

if (elem)
    do this
else
    do that

1
!!আপনি কেবল বুলিয়ান চান না কেন ?
অ্যালেক্স

সুতরাং, যদি উপাদানটির কোনও আইডি না থাকে, তবে এটি ডিওএম-তে নয় বলে বিবেচিত হবে? আমি বলব এটি ভুল।
স্টিভেন ওয়াচন

0

ব্যবহার করুন querySelectorAllসঙ্গে forEach,

document.querySelectorAll('.my-element').forEach((element) => {
  element.classList.add('new-class');
});

এর বিপরীত হিসাবে:

const myElement = document.querySelector('.my-element');
if (myElement) {
  element.classList.add('new-class');
}

0

নিম্নলিখিত চেষ্টা করুন। এটি সবচেয়ে নির্ভরযোগ্য সমাধান:

window.getComputedStyle(x).display == ""

উদাহরণ স্বরূপ,

var x = document.createElement("html")
var y = document.createElement("body")
var z = document.createElement("div")
x.appendChild(y);
y.appendChild(z);

z.style.display = "block";

console.log(z.closest("html") == null); // 'false'
console.log(z.style.display); // 'block'
console.log(window.getComputedStyle(z).display == ""); // 'true'

1
এটি সম্ভবত পুনঃ-লেআউটটির কারণ: gist.github.com/paulirish/5d52fb081b3570c81e3a#getcomputesstyle
স্টিভেন

0

সমস্ত বিদ্যমান উপাদানগুলির এইচটিএমএল উপাদান ব্যতীত প্যারেন্টইলমেন্ট সেট রয়েছে!

function elExists (e) { 
    return (e.nodeName === 'HTML' || e.parentElement !== null);
};

এটি কি সর্বদা "এইচটিএমএল" থাকে ? এটি "এইচটিএমএল" হতে পারে ?
পিটার মর্টেনসেন

x.tagName বা x.nodeName সর্বদা বড় হাতের অক্ষরে আপনি নিজের কোডটিতে কীভাবে লিখেন তা কোনও ম্যাটর নেই
জোনাহ

0

এই অবস্থা সব ক্ষেত্রে ছানা।

function del() {
//chick if dom has this element 
//if not true condition means null or undifind or false .

if (!document.querySelector("#ul_list ")===true){

// msg to user
    alert("click btn load ");

// if console chick for you and show null clear console.
    console.clear();

// the function will stop.
    return false;
}

// if its true function will log delet .
console.log("delet");

}


0

আমি node.isConnectedসম্পত্তি ব্যবহার পছন্দ করি ( MDN দেখুন )।

দ্রষ্টব্য: যদি উপাদানটি শ্যাডো রুটেও যুক্ত করা হয় তবে এটি সত্য হবে, যা পছন্দসই বেহেভিওর নাও হতে পারে।

উদাহরণ:

const element = document.createElement('div');
console.log(element.isConnected); // Returns false
document.body.append(element);
console.log(element.isConnected); // Returns true
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.