टैग द्वारा जावास्क्रिप्ट खोज। जावास्क्रिप्ट और jquery वर्ग (वर्ग विशेषता) द्वारा एक तत्व का चयन करना। इसलिए हम स्क्रैच से स्क्रिप्ट लिखते हैं

दस्तावेज़ के भीतर जो निर्दिष्ट चयनकर्ता, या चयनकर्ताओं के समूह से मेल खाता है। यदि कोई मिलान नहीं मिलता है, तो शून्य लौटा दिया जाता है।

नोट: मिलान दस्तावेज़ के नोड्स के गहराई-प्रथम प्री-ऑर्डर ट्रैवर्सल का उपयोग करके किया जाता है, जो दस्तावेज़ के मार्कअप में पहले तत्व से शुरू होता है और चाइल्ड नोड्स की संख्या के क्रम में अनुक्रमिक नोड्स के माध्यम से पुनरावृत्त होता है।

ध्यान दें: जो वर्ण मानक सीएसएस सिंटैक्स का हिस्सा नहीं हैं, उन्हें बैकस्लैश वर्ण का उपयोग करके बचा जाना चाहिए। चूंकि जावास्क्रिप्ट भी बैकस्लैश एस्केपिंग का उपयोग करता है, इसलिए इन वर्णों का उपयोग करके स्ट्रिंग अक्षर लिखते समय विशेष रूप से सावधान रहें। अधिक जानकारी के लिए देखें.

यदि निर्दिष्ट चयनकर्ता उस आईडी से मेल खाता है जिसे दस्तावेज़ में एक से अधिक बार गलत तरीके से उपयोग किया गया है, तो उस आईडी वाला पहला तत्व वापस कर दिया जाता है।

किसी आईडी या चयनकर्ताओं से मिलान करने के लिए जो मानक सीएसएस सिंटैक्स का पालन नहीं करते हैं (उदाहरण के लिए, कोलन या स्पेस का अनुचित तरीके से उपयोग करके), आपको बैकस्लैश ("\") के साथ चरित्र से बचना होगा। चूंकि बैकस्लैश भी जावास्क्रिप्ट में एक एस्केप कैरेक्टर है, यदि आप एक शाब्दिक स्ट्रिंग में प्रवेश कर रहे हैं, तो आपको इससे बचना होगा दो बार(एक बार जावास्क्रिप्ट स्ट्रिंग के लिए, और दूसरी बार querySelector() के लिए):

कंसोल.लॉग('#foo\bar'); // "#fooar" (\b बैकस्पेस कंट्रोल कैरेक्टर है) document.querySelector("#foo\bar"); // किसी भी चीज़ से मेल नहीं खाता कंसोल.लॉग("#foo\\bar"); // "#foo\bar" कंसोल.लॉग("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // पहले div से मिलान करें document.querySelector("#foo:bar"); // किसी भी चीज़ से मेल नहीं खाता document.querySelector("#foo\\:bar"); // दूसरे div से मिलान करें

इस उदाहरण में, " myclass " वर्ग वाले दस्तावेज़ में पहला तत्व लौटाया गया है:

वर एल = document.querySelector('myclass');

चयनकर्ता भी वास्तव में शक्तिशाली हो सकते हैं, जैसा कि निम्नलिखित उदाहरण में दिखाया गया है। यहां, दस्तावेज़ में "उपयोगकर्ता-पैनल मुख्य" () वर्ग के अंदर स्थित "लॉगिन" () नाम वाला पहला तत्व लौटाया गया है:

वर एल = document.querySelector('div.user-panel.main इनपुट');

इस पृष्ठ पर संगतता तालिका संरचित डेटा से तैयार की गई है। यदि आप डेटा में योगदान देना चाहते हैं, तो कृपया https://github.com/mdn/browser-compat-data देखें और हमें एक पुल अनुरोध भेजें।

GitHub पर संगतता डेटा अपडेट करें

इस तथ्य के अलावा कि हम वेब पेजों पर तत्वों को उनकी आईडी के आधार पर चुन सकते हैं, हम तत्वों को उनके वर्ग विशेषता के आधार पर भी चुन सकते हैं।

काम भी बहुत सामान्य है. जब मैं अपनी स्क्रिप्ट लिखता हूं, तो मुझे अक्सर इस चयनकर्ता का उपयोग करना पड़ता है।

आइए मान लें कि हमारे पास पृष्ठ पर निम्नलिखित कोड है।

कार्य सरल है, आपको वर्ग class='elem' के साथ एक तत्व का चयन करना होगा और जावास्क्रिप्ट का उपयोग करके इसके साथ कुछ क्रियाएं करनी होंगी।

आइए इसे कैसे करें इसके कई विकल्पों पर गौर करें।

विकल्प 1. उपयोग करें जावास्क्रिप्ट विधि getElementsByClassName.

यदि आप किसी अतिरिक्त लाइब्रेरी का उपयोग नहीं करते हैं, तो आप getElementsByClassName(“class_name”) विधि का उपयोग करके किसी तत्व तक पहुंच सकते हैं।

उदाहरण के लिए, के संबंध में सोर्स कोड, आप कोड की निम्नलिखित पंक्तियाँ जोड़ सकते हैं।

सामग्री को ब्लॉक करें. चेतावनी(document.getElementsByClassName("elem").innerHTML);

परिणामस्वरूप, यदि सब कुछ सही ढंग से काम करता है, तो हमें एक पॉप-अप विंडो मिलेगी जिसमें डिव ब्लॉक के अंदर मौजूद टेक्स्ट प्रदर्शित होगा।

कृपया ध्यान दें कि getElementsByClassName विधि को निष्पादित करने का परिणाम तत्वों की एक सरणी होगी एक पृष्ठ पर एक ही कक्षा के कई तत्व हो सकते हैं।

इसीलिए document.getElementsByClassName("elem") निर्माण के अंत में आपको यह इंगित करना होगा कि सरणी () का शून्य तत्व प्रदर्शित है। जावास्क्रिप्ट में गिनती एक से नहीं बल्कि शून्य से शुरू होती है।

लेकिन getElementsByClassName विधि का उपयोग करने में समस्या यह है कि यह विधि ब्राउज़र के पुराने संस्करणों में समर्थित नहीं है।

इससे बचने के लिए कुछ तरकीबें हैं, लेकिन यह अनावश्यक कोड है। उदाहरण के लिए, आप रेगुलर एक्सप्रेशन का उपयोग कर सकते हैं:

यदि(document.getElementsByClassName == अपरिभाषित) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); के लिए (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

यह समस्या को हल करने का एक तरीका है. लेकिन, ईमानदारी से कहूं तो, अनावश्यक कोड वाले पेज को अव्यवस्थित करना मेरे लिए बहुत स्वीकार्य नहीं है, इसलिए अक्सर मैं समस्या को हल करने के लिए दूसरे विकल्प का उपयोग करता हूं।

विकल्प 2. Jquery लाइब्रेरी का उपयोग करना।

Jquery लाइब्रेरी का उपयोग करने से तत्वों को उनके वर्ग विशेषता द्वारा चुनने की समस्या को हल करना बहुत आसान हो जाता है। आपको निम्नलिखित निर्माण का उपयोग करने की आवश्यकता है:

यहाँ elem तत्व को दिया गया वर्ग नाम है।

आपको यह याद रखना होगा कि इसे काम करने के लिए, सबसे पहले Jquery लाइब्रेरी को शामिल करना होगा। इसे अनुभाग में जोड़ा जाता है, ऐसा करने का एक तरीका जोड़ना है अगली पंक्तिकोड:

लाइब्रेरी को लोड करने के लिए इंटरनेट कनेक्शन होना चाहिए।

आइए एक उदाहरण से देखें कि यह कैसे काम करता है।

स्क्रिप्ट, पिछले उदाहरण की तरह, उस तत्व के कोड के नीचे स्थित होनी चाहिए जिसके साथ आप इंटरैक्ट करना चाहते हैं।

तो यहां दो तरीके हैं जिनसे आप उन तत्वों के साथ इंटरैक्ट कर सकते हैं जिनमें क्लास विशेषता सेट है। वह चुनें जो आपके लिए सबसे उपयुक्त हो और उसे अभ्यास में लाएँ।

स्क्रिप्ट को किसी भी पेज तत्व के साथ काम करने के लिए, पहले इस तत्व को ढूंढना होगा। जावास्क्रिप्ट में ऐसा करने के कई तरीके हैं। पाया गया तत्व आमतौर पर एक वेरिएबल को सौंपा जाता है, और बाद में, इस वेरिएबल के माध्यम से, स्क्रिप्ट तत्व तक पहुंचती है और इसके साथ कुछ क्रियाएं करती है।

यदि किसी तत्व को पेज कोड में एक आईडी विशेषता दी गई है, तो तत्व को आईडी द्वारा पाया जा सकता है। ये सबसे आसान तरीका है. तत्व को वैश्विक दस्तावेज़ ऑब्जेक्ट की getElementById() विधि का उपयोग करके खोजा जाता है।

document.getElementById(id)

विकल्प:

आईडी - पाए जाने वाले तत्व की आईडी। आईडी एक स्ट्रिंग है, इसलिए यह उद्धरण चिह्नों में होनी चाहिए।

आइए एक पेज बनाएं, इसमें एक तत्व जोड़ें और इसे एक आईडी दें, और इस तत्व को स्क्रिप्ट में ढूंढें:

HTML कोड:

जावास्क्रिप्ट:

हमने पाए गए तत्व को ब्लॉक वेरिएबल में असाइन किया और वेरिएबल को कंसोल पर आउटपुट किया। अपना ब्राउज़र कंसोल खोलें, तत्व वहां सूचीबद्ध होना चाहिए।

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

GetElementsByClassName() विधि आपको किसी विशेष वर्ग से संबंधित सभी तत्वों को ढूंढने की अनुमति देती है।

दस्तावेज़.getElementsByClassName(वर्ग)

विकल्प:

वर्ग - पाए जाने वाले तत्वों का वर्ग

विधि पाए गए तत्वों से युक्त एक छद्म सरणी लौटाती है। इसे छद्म-सरणी कहा जाता है क्योंकि कई सरणी विधियाँ इसके लिए काम नहीं करती हैं। लेकिन मुख्य संपत्ति बनी हुई है - आप सरणी के किसी भी तत्व तक पहुंच सकते हैं। भले ही केवल एक तत्व पाया जाता है, फिर भी वह सरणी में है।

आइए पेज में तत्व जोड़ें और उन्हें एक क्लास दें। हम कुछ तत्वों को उस ब्लॉक के अंदर रखेंगे जो हमने पहले बनाया था। हम ब्लॉक के बाहर दूसरा भाग बनाएंगे। इसका मतलब थोड़ी देर बाद स्पष्ट हो जाएगा. अब पेज इस तरह दिखेगा:

HTML कोड:

जावास्क्रिप्ट:

अब केवल वही तत्व पाए जाते हैं जो ब्लॉक में स्थित हैं।

GetElementsByTagName() विधि एक विशिष्ट टैग वाले सभी तत्वों को ढूंढती है। यह पाए गए तत्वों के साथ एक छद्म सरणी भी लौटाता है।

document.getElementsByTagName(टैग)

विकल्प:

टैग - तत्व टैगजिसे खोजने की जरूरत है

आइए पृष्ठ पर मौजूद सभी पी टैग ढूंढें:

यह विधि संपूर्ण दस्तावेज़ पर नहीं, बल्कि किसी विशिष्ट तत्व पर भी लागू की जा सकती है। ब्लॉक में सभी पी टैग ढूंढें।

querySelector() और querySelectorAll() विधियां हैं जो किसी विशिष्ट चयनकर्ता से मेल खाने वाले तत्वों को ढूंढती हैं। अर्थात्, ऐसे तत्व मिलेंगे जिन पर शैली लागू होगी यदि इसे ऐसे चयनकर्ता को निर्दिष्ट किया गया हो। वहीं, पेज स्टाइल में ऐसे चयनकर्ता की मौजूदगी बिल्कुल भी जरूरी नहीं है। इन विधियों का सीएसएस से कोई लेना-देना नहीं है। querySelectorAll() विधि चयनकर्ता से मेल खाने वाले सभी तत्वों को ढूंढती है। और querySelector() विधि एक तत्व ढूंढती है, जो पेज कोड में पहला है। ये विधियां पहले चर्चा किए गए तत्वों की खोज के सभी तरीकों को प्रतिस्थापित कर सकती हैं, क्योंकि आईडी द्वारा एक चयनकर्ता, टैग द्वारा एक चयनकर्ता और कई अन्य हैं।

दस्तावेज़.querySelector(चयनकर्ता)

दस्तावेज़.querySelectorAll(चयनकर्ता)

चयनकर्ता बिल्कुल CSS की तरह ही लिखे गए हैं, बस उद्धरण चिह्न लगाना न भूलें।

आइए पृष्ठ पर एक सूची जोड़ें और चयनकर्ता का उपयोग करके इसे ढूंढें। हम केवल एक तत्व की तलाश कर रहे हैं और हम निश्चित रूप से जानते हैं कि यह पहला तत्व होगा, क्योंकि पृष्ठ पर केवल एक ही है। इसलिए, इस मामले में querySelector() विधि का उपयोग करना अधिक सुविधाजनक है। लेकिन इस पद्धति का उपयोग करते समय, आपको यह ध्यान रखना होगा कि भविष्य में वही तत्व पृष्ठ में जोड़े जा सकते हैं। हालाँकि, यह अधिकांश विधियों पर लागू होता है।

HTML कोड:

ये विधियाँ संपूर्ण दस्तावेज़ में नहीं, बल्कि एक विशिष्ट तत्व के भीतर भी तत्वों की खोज कर सकती हैं।

उदाहरण में, हमने केवल टैग चयनकर्ताओं का उपयोग किया। अन्य चयनकर्ताओं का उपयोग करके पृष्ठ तत्व ढूंढने का प्रयास करें।

आप पाए गए तत्व के लिए पड़ोसी ढूंढ सकते हैं। प्रत्येक तत्व एक वस्तु है, और पड़ोसी तत्वों तक उस वस्तु के गुणों के माध्यम से पहुंचा जा सकता है। पिछली एलिमेंटसिबलिंग प्रॉपर्टी में पिछला तत्व होता है, और अगली एलिमेंटसिबलिंग प्रॉपर्टी में अगला तत्व होता है।

तत्व.पिछलातत्वसिबलिंग

एलिमेंट.नेक्स्टएलिमेंटसिबलिंग

आइए ब्लॉक के बाद तत्व खोजें:

बच्चों की संपत्ति में बच्चों की एक श्रृंखला होती है।

तत्व.बच्चे

पता लगाते हैं बाल तत्वअवरोध पैदा करना।

DOM मानक किसी तत्व को खोजने के कई साधन प्रदान करता है। ये विधियाँ हैं getElementById, getElementsByTagName और getElementsByName।

जावास्क्रिप्ट लाइब्रेरीज़ अधिक शक्तिशाली खोज विधियाँ प्रदान करती हैं।

DOM में किसी तत्व को खोजने का सबसे सुविधाजनक तरीका इसे आईडी द्वारा प्राप्त करना है। ऐसा करने के लिए, कॉल document.getElementById(id) का उपयोग करें

उदाहरण के लिए, निम्न कोड div "e c id="dataKeeper" में टेक्स्ट का रंग नीला में बदल देगा:

Document.getElementById("dataKeeper").style.color = "नीला"

अगला तरीका यह है कि सभी तत्वों को एक निश्चित टैग के साथ प्राप्त करें, और उनमें से वह ढूंढें जिसकी आपको आवश्यकता है। इसके लिए Document.getElementsByTagName(tag) का उपयोग किया जाता है। यह उन तत्वों की एक श्रृंखला लौटाता है जिनमें वह टैग है।

उदाहरण के लिए, आप ली टैग के साथ दूसरा तत्व (सरणी में क्रमांकन शून्य से शुरू होता है) प्राप्त कर सकते हैं:

Document.getElementsByTagName("LI")

दिलचस्प बात यह है कि getElementsByTagName को न केवल दस्तावेज़ के लिए, बल्कि आम तौर पर किसी भी तत्व के लिए बुलाया जा सकता है जिसमें टैग (टेक्स्ट नहीं) है।

इस स्थिति में, केवल वे वस्तुएँ ही मिलेंगी जो इस तत्व के अंतर्गत स्थित हैं।

उदाहरण के लिए, निम्न कॉल में LI तत्वों की सूची मिलती है जो पहले div टैग के अंदर हैं:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

elem.getElementsByTagName("*") को कॉल करने से नोड elem के सभी बच्चों की एक सूची वापस आ जाएगी जिस क्रम में उन्हें चलाया जाता है.

उदाहरण के लिए, इस DOM पर:

यह कोड:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i