यदि कोई तत्व दृश्यमान DOM में मौजूद है तो मैं कैसे जांच सकता हूं?


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 से हटा दिया जाता है। भले ही तत्व को DOM से हटा दिया गया हो, लेकिन वैरिएबल उस तत्व को बरकरार रखता है जैसा पहले घोषित किया गया था। दूसरे शब्दों में, यह स्वयं तत्व का एक जीवित संदर्भ नहीं है, बल्कि एक प्रतिकृति है। परिणामस्वरूप, अस्तित्व के लिए चर के मूल्य (तत्व) की जांच एक अप्रत्याशित परिणाम प्रदान करेगी।

isNullसमारोह में एक चर से एक तत्व होने की जाँच करने के लिए अपने प्रयास है, और यह काम करता है, लेकिन मैं अगर वहाँ एक आसान तरीका एक ही परिणाम हासिल करने के लिए है पता करने के लिए करना चाहते हैं।

PS: मुझे इस बात में भी दिलचस्पी है कि जावास्क्रिप्ट चर इस तरह से व्यवहार करते हैं अगर किसी को विषय से संबंधित कुछ अच्छे लेखों का पता हो।


18
वास्तव में यह स्वयं तत्व का एक जीवंत संदर्भ है, यह सिर्फ किसी भी दस्तावेज़ में नहीं है। उस कार्यक्षमता की आवश्यकता होती है क्योंकि आप वास्तव में एक तत्व को DOM से बाहर खींच सकते हैं और फिर इसे बाद में सभी इवेंट हैंडलर / आदि के साथ जोड़ सकते हैं। क्यों जेएस चर की तरह काम करते हैं? क्योंकि यह अविश्वसनीय रूप से कष्टप्रद होगा यदि वे नहीं करते। जेएस केवल चर हटाता है जब आपके पास अब उनके लिए कोई संदर्भ नहीं है। भाषा को यह जानने का कोई तरीका नहीं है कि आप किस संदर्भ को महत्वपूर्ण मानते हैं और जो आपको लगता है कि बेकार हैं।
मार्क कहन

@cwolves दिलचस्प। मैंने पहले भी कई बार इसका सामना किया है और वास्तव में इसके बारे में कभी नहीं सोचा था। वास्तव में, मेरी वर्तमान परियोजना में, मैं किसी भी परिवर्तन करने से पहले एक सरणी में तत्वों को बचा रहा हूं, बस अगर मैं बदलावों को वापस करना चाहता हूं।
जस्टिन बुल

1
कचरा संग्रह समय-समय पर चलता रहता है और वह सब कुछ हटा देता है जो उसे लगता है कि वह कर सकता है। यह अधिकांश ब्राउज़रों में बहुत घटिया लगता है, लेकिन डेवलपर्स को यह एहसास हो रहा है कि कुछ ब्राउज़र पुनरारंभ होने के बीच दिनों या हफ्तों तक चलते हैं, इसलिए ब्राउज़र प्रदर्शन के लिए अच्छा कचरा संग्रह महत्वपूर्ण है। वेब डेवलपर संपत्तियों को हटाने में मदद कर सकते हैं (और इसलिए स्मृति में चीजों के संदर्भ) जो अब आवश्यक नहीं हैं।
RobG

2
@JustinBull तत्वों की प्रतियों को वापस लाने के लिए सावधान रहना चाहिए। किसी सरणी में DOM तत्व को संग्रहीत करते समय, DOM तत्व का संदर्भ संग्रहीत किया जाता है, प्रतिलिपि नहीं, इसलिए DOM के तत्व को संदर्भित करते समय DOM तत्व में किए गए परिवर्तन परिलक्षित होंगे। यह जावास्क्रिप्ट में सभी वस्तुओं के साथ मामला है (प्रकार 'वस्तु' के चर)।
एंथनी दीसांती

जवाबों:


545

ऐसा लगता है कि कुछ लोग यहां उतर रहे हैं, और बस यह जानना चाहते हैं कि क्या कोई तत्व मौजूद है (मूल प्रश्न से थोड़ा अलग)।

यह किसी भी ब्राउज़र के चयन विधि का उपयोग करने के रूप में सरल है, और इसे एक सत्य मूल्य (आमतौर पर) के लिए जांचना है ।

उदाहरण के लिए, यदि मेरे तत्व में से एक idहै "find-me", तो मैं बस उपयोग कर सकता है ...

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

यह या तो तत्व का संदर्भ देने के लिए निर्दिष्ट है या null। यदि आपके पास बूलियन मान होना चाहिए, तो !!विधि कॉल से पहले टॉस करें।

इसके अलावा, आप कई अन्य तरीकों का उपयोग कर सकते हैं जो तत्वों को खोजने के लिए मौजूद हैं, जैसे (सभी जीवित document):

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

इनमें से कुछ विधियां वापस आती हैं, इसलिए NodeListइसकी lengthसंपत्ति की जांच करना सुनिश्चित करें , क्योंकि एक NodeListवस्तु है, और इसलिए सत्य है


वास्तव में यह निर्धारित करने के लिए कि कोई तत्व दृश्यमान डोम के भाग के रूप में मौजूद है (जैसे कि मूल रूप से पूछा गया प्रश्न), कस्वल्ड्केट अपने स्वयं के रोल करने की तुलना में बेहतर समाधान प्रदान करता है (जैसा कि इस उत्तर में होता है)। है यही कारण है, उपयोग करने के लिए डोम तत्वों पर विधि।contains()

आप इसे इस तरह से उपयोग कर सकते हैं ...

document.body.contains(someReferenceToADomElement);

1
ठीक वही जो मेरे द्वारा खोजा जा रहा था! इतना स्पष्ट रूप से योग्य, मैंने ऐसा क्यों नहीं सोचा। इसके अलावा, क्या आप किसी भी अच्छे लेख के बारे में जानते हैं जो समझाता है कि चर इस तरह से क्यों काम करते हैं?
जस्टिन बुल

3
और भी छोटा:var elementInDom = function( el ) { while ( el = el.parentNode ) if ( el === document ) return true; return false; }
बेनेदिच

2
@ButtleButkus वास्तविक प्रश्न पढ़ें। आपके द्वारा उपयोग किया गया वह समाधान समझ में नहीं आता है क्योंकि getElementById() वह DOM तत्व का संदर्भ देगा या nullइसलिए, typeof(विशेषकर RHS पर) का उपयोग करना गलत है (यदि इसे परिभाषित नहीं किया गया था, तो LHS स्थिति फेंक देगी ReferenceError)।
एलेक्स

2
क्या नीचे दिए गए पोस्ट पर इस का उपयोग करने का कोई कारण है: document.body.contains()जो लगता है कि बहुत अच्छा ब्राउज़र समर्थन है?
क्रश करें

1
निकाला गया @Jonz वर्ष जवाब हिस्सा है, जाने के लिए और वोट बढ़ाने के लिए मत भूलना csuwldcat
एलेक्स

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) {}? जब तत्व अपरिभाषित या अशक्त है तो यह अभिव्यक्ति झूठी है। यदि तत्व एक DOM तत्व है तो अभिव्यक्ति सत्य है।
कायहर

2
@kayahr यह बहुत जटिल है। यदि यह तत्व नहीं मिला तो getElementById()वापस लौटने का अनुमान है null, इसलिए एक सत्य लौटाए गए मूल्य के लिए जाँच करना आवश्यक है।
एलेक्स

5
मुझे लगता है कि यह सिर्फ सामान्य ज्ञान है।
कोन

8
getElementByIdकभी नहीं लौटना चाहिए undefined। किसी भी मामले में, element != nullचेक इसे उठाएगा।

191

Node.contains DOM API का उपयोग करके , आप पृष्ठ में किसी भी तत्व की उपस्थिति के लिए जाँच कर सकते हैं (वर्तमान में DOM में) बहुत आसानी से:

document.body.contains(YOUR_ELEMENT_HERE);

क्रॉस-ब्रॉसर नोट : documentइंटरनेट एक्सप्लोरर में ऑब्जेक्ट में एक contains()विधि नहीं है - क्रॉस-ब्राउज़र संगतता सुनिश्चित करने के लिए, document.body.contains()इसके बजाय उपयोग करें ।


4
ऐसा लगता है कि इस समस्या का अंतिम उत्तर ... और अगर एमडीएन की माने तो इसका समर्थन काफी अच्छा है।
क्रश

2
यह सबसे अच्छा जवाब है। ध्यान दें कि बस जाँच document.contains()पर्याप्त होनी चाहिए।
एलेक्स

@csuwldcat इसने मेरे लिए काम किया, कम से कम क्रोम में document.contains(document.documentElement)documentहै Nodeअपने प्रोटोटाइप श्रृंखला पर, जहाँ तक मैं बता सकता है ( document-> HTMLDocument-> Document-> Node)
एलेक्स

4
यह वास्तव में सबसे अच्छा उत्तर है: - यह एक वेब मानक है - यह बहुत अच्छी तरह से समर्थित है (कुछ आश्चर्यजनक रूप से यह फ़ायरफ़ॉक्स में संस्करण 9 तक प्रकट नहीं होता है, मैं अनुमान लगा रहा हूं क्योंकि यह IE में आविष्कार किया गया एक गैर-मानक फ़ंक्शन था जो कि नहीं था बाद में मानकीकृत) - यह सबसे तेज होना चाहिए क्योंकि यह एक देशी एपीआई के लिए एक कॉल का उपयोग करता है
जॉन जेड

2
@LeeSaxon वाक्य-विन्यास है 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
हालांकि इसका मूल प्रश्न से कोई लेना-देना नहीं है। OP जानना चाहता है कि DOM तत्व का संदर्भ दृश्यमान DOM का हिस्सा है या नहीं।
एलेक्स

16
हालांकि मेरी मदद की। मैं तत्व अस्तित्व के सरल परीक्षण की तलाश में था; यह काम किया। धन्यवाद।
कावेरीम

1
यह उत्तर अच्छी तरह से काम करता है, लेकिन केवल जब तत्व में ए id। बेहतर समाधान जो सवाल का जवाब देता है कि जांच कैसे करें कि क्या तत्व दृश्यमान डोम में मौजूद है? किसी भी तत्व के साथ, बिना भी तत्वों idको करना है document.body.contains(element)
एडवर्ड

@Edward यह कुछ करने के लिए पूरी तरह से अलग हैcontains()
एलेक्स

मै समझ गया। मैं सिर्फ अपनी टिप्पणी में सुझाव दे रहा था कि अन्य उत्तर बेहतर और प्रश्न के अधिक अनुकूल हैं।
एडवर्ड २

11

आप केवल यह देखने के लिए देख सकते हैं कि क्या पैरेंटनोड प्रॉपर्टी अशक्त है।

अर्थात्,

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

मुझे पता है कि यह एक पुराना प्रश्न है लेकिन यह उत्तर बिल्कुल उसी तरह का सरल सरल समाधान है जिस प्रश्न की मुझे तलाश थी।
पोबी

11
@ पॉबी: यह सुरुचिपूर्ण लग सकता है लेकिन यह वास्तव में वह नहीं कर रहा है जो अनुरोध किया गया था। यह केवल जाँचता है कि तत्व में मूल तत्व है या नहीं। इसका मतलब यह नहीं है कि तत्व दृश्यमान DOM में है क्योंकि शायद मूल तत्व इससे जुड़ा नहीं है।
कयाहर

अंतिम एक दस्तावेज है या नहीं यह जानने के लिए माता-पिता के सभी माता-पिता के माध्यम से जाना होगा। दूसरी समस्या यह है कि यह अभी भी दृश्य रेंज के बाहर हो सकता है या कई अन्य कारणों के कारण कवर या दिखाई नहीं दे सकता है।
एर बाल

एक तत्व के पास एक पेरेंटेनोड भी हो सकता है, जो केवल एक दस्तावेज़ के टुकड़े में जोड़ा गया है।

11

से मोज़िला डेवलपर नेटवर्क :

यह फ़ंक्शन यह देखने के लिए जांचता है कि पृष्ठ के शरीर में कोई तत्व है या नहीं। जैसा कि इसमें शामिल है () समावेशी है और यह निर्धारित करता है कि यदि निकाय में ही isInPage का इरादा नहीं है, तो यह मामला स्पष्ट रूप से गलत है।

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

नोड वह नोड है जिसे हम <body> में जांचना चाहते हैं।


+1, क्या यह (मनमाने ढंग से) टेक्स्ट नोड्स (या टिप्पणी नोड्स) के लिए भी काम करता है?
निकोस एम।

@NikosM। यह किसी भी html टैग में काम करना चाहिए, लेकिन मैंने इसका परीक्षण नहीं किया।
इकरामुल हक

4
नहीं करना चाहिए falseहो true?
मार्क-एंड्रे लाफ्यून

यदि nodeआईएस 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
मुझे यह भी नहीं पता था कि डोम नोड्स पर आधार संपत्ति थी। इस दृष्टिकोण के बारे में मुझे जो पसंद है वह यह है कि यह स्वयं तत्व की एक संपत्ति का उपयोग करता है, जिसका अर्थ है कि यह तब भी काम करेगा जब तत्व एक अलग दस्तावेज़ (जैसे एक iframe) में हो। मुझे यह पसंद नहीं है कि यह वेबकिट के बाहर काम नहीं करता है।
डॉक्टरडॉस्ट्रक्टो

इस रूप में सावधान निम्न त्रुटि फेंक देंगे अगर तत्व दस्तावेज़ में नहीं है: 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]कुछ बचना क्यों है ?
एलेक्स

लंबे समय से मैंने इसका उत्तर दिया है, इसलिए, $ ('# elementId') का उपयोग करते हुए [0] मेरा मानना ​​है कि आप हमेशा संकेत दे रहे हैं कि मान 0 वें सूचकांक पर होगा। इस तरह से आप हमेशा 1 रोष तत्व के लिए जाँच कर रहे हैं। क्या एक ही नाम के साथ कई चेकबॉक्स थे, इसलिए एक रेडियो बटन की तरह। वह समय .length मददगार होगा।
कोड बस्टर

3

csuwldcat का समाधान गुच्छों में सबसे अच्छा लगता है, लेकिन इसे एक ऐसे तत्व के साथ सही ढंग से काम करने के लिए एक मामूली संशोधन की आवश्यकता होती है, जो जावास्क्रिप्ट कोड से अलग दस्तावेज़ में चल रहा हो, जैसे कि एक iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

तत्व की ownerDocumentसंपत्ति के उपयोग पर ध्यान दें , जैसा कि सिर्फ सादे पुराने के विपरीत हैdocument (जो तत्व के मालिक दस्तावेज़ को संदर्भित कर सकता है या नहीं कर सकता है) के ।

torazaburo ने एक और भी सरल तरीका पोस्ट किया, जो गैर-स्थानीय तत्वों के साथ भी काम करता है, लेकिन दुर्भाग्य से, यह 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-metrics
स्टीवन

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मूल तत्व के रूप में खोज करने के लिए पास हुआ क्योंकि DOM पर मौजूद कोई भी तत्व एक वंशज है 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
यह सबसे अच्छा जवाब हो सकता है क्योंकि यह DOM में किसी भी री-रेंडरिंग का कारण नहीं बनता है।
स्टीवन वचोन

एक स्पष्टीकरण क्रम में होगा ( अपने उत्तर को संपादित करके जवाब दें , यहां टिप्पणियों में नहीं)।
पीटर मोर्टेंसन

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
क्यों नहीं !!अगर आप एक बूलियन चाहते हैं?
एलेक्स

इसलिए, यदि तत्व में कोई आईडी नहीं है, तो इसे DOM में नहीं माना जाता है? मैं कहूंगा कि यह गलत है।
स्टीवन वॉन

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#getcomputedstyle
स्टीवन

0

सभी मौजूदा तत्वों में HTML तत्व को छोड़कर पेरेंटमेंट सेट है!

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

क्या यह हमेशा "HTML" है ? क्या यह "html" हो सकता है ?
पीटर मोर्टेंसन

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संपत्ति का उपयोग करना पसंद करता हूं ( एमडीएन पर जाएं )।

ध्यान दें: यह सच हो जाएगा अगर तत्व को शैडोराट के साथ जोड़ा जाता है, जो कि हर किसी को वांछित नहीं हो सकता है।

उदाहरण:

const element = document.createElement('div');
console.log(element.isConnected); // Returns false
document.body.append(element);
console.log(element.isConnected); // Returns true
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.