जावास्क्रिप्ट - डोम: नोड्स खोजने के लिए तरीके। जावास्क्रिप्ट और Jquery चयनकर्ताओं। JavaScript में डॉक्यूमेंट ऑब्जेक्ट की आईडी प्रॉपर्टीज़ और विशेषताओं द्वारा एक तत्व का चयन करना

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

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

आईडी द्वारा खोजें

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

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

Document.getElementById ("dataKeeper")। Style.color \u003d "blue"

टैग द्वारा खोजें

अगला तरीका सभी तत्वों को एक विशिष्ट टैग के साथ प्राप्त करना है और उनमें से वांछित के लिए खोज करना है। यह वह दस्तावेज है जो। यह उन तत्वों की एक सरणी देता है जिनके पास यह टैग है।

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

डॉक्यूमेंट.गैस बाइट्सटैगनेम ("LI")

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

यह केवल उन वस्तुओं को खोजेगा जो इस तत्व के अंतर्गत हैं।

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

डॉक्यूमेंट.गेट एल्सबायटैगनेम ("डीआईवी")। गेटएल्सबायटैगनेम ("डीआईआई")

सभी वंशज मिले

Elem.getElementsByTagName ("*") पर कॉल करने से सभी बच्चों की सूची वापस हो जाएगी उन्हें दरकिनार कर.

उदाहरण के लिए, इस तरह एक डोम पर:

इस तरह कोड:

Var div \u003d document.getElementById ("d1") var elems \u003d div.getElementsByTagName ("*") के लिए (var i \u003d 0; i)

अनुक्रम प्रिंट करेगा: ol1, li1, li2।

नाम से खोजें: getElementsByName

डॉक्यूमेंट .getElementsByName (नाम) विधि उन सभी तत्वों को लौटाती है जिनका नाम (नाम विशेषता) दिए गए के बराबर है।

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

डॉक्यूमेंट .getElementsByName विधि अन्य तत्वों जैसे div, p, आदि के साथ काम नहीं करेगी।

अन्य तरीके

DOM को खोजने के अन्य तरीके हैं: XPath, cssQuery, आदि। आमतौर पर, वे मानक ब्राउज़र क्षमताओं का विस्तार करने के लिए जावास्क्रिप्ट पुस्तकालयों द्वारा कार्यान्वित किए जाते हैं।

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

एक सामान्य टाइपो एक पत्र की अनुपस्थिति के कारण है रों विधि नाम getElementById में, जबकि अन्य विधियों में यह पत्र है: getElement रोंनाम से।

नियम सरल है: एक तत्व - तत्व, कई - तत्व रों ... सभी * तत्व विधियाँ रों* नोड्स की सूची लौटाएं।

अंतिम पाठ getElementsByTagName विधि को कवर करता है, जो एक सरणी देता है ( समूह) टैग नाम से पृष्ठ तत्व।

यहाँ जावास्क्रिप्ट और getElementById विधि के साथ थोड़ा अधिक व्यावहारिक काम है, जो तत्व का संदर्भ देता है, इसकी अनूठी आईडी पर ध्यान केंद्रित कर रहा है।

GetElementById विधि, getElementsByTagName की तरह, दस्तावेज़ ऑब्जेक्ट का एक तरीका है।

विधि नाम का शाब्दिक अनुवाद है: आईडी द्वारा तत्व प्राप्त करें.

कोई तत्व ( ते गु) वेब दस्तावेज़ का अपना आईडी-पहचानकर्ता सौंपा जा सकता है, जिसके लिए धन्यवाद तत्व अद्वितीय हो जाता है और आप इसके साथ काम करने के लिए इसे एक्सेस कर सकते हैं।

ध्यान देंई: एलीमेंट शब्द के अंत में विधि नाम में कोई s नहीं है ( के रूप में getElementsByTagName विधि का विरोध किया)। यह सुविधा के लिए है और इंगित करता है कि किसी आइटम का चयन करने के लिए विधि का उपयोग किया जाता है।

ऊपर कोड स्निपेट के लिए थोड़ा सा स्पष्टीकरण ...

• img टैग ( इमेजिसच) में एक पेंगुइन आईडी है;
• getElementById विधि का उपयोग करते हुए, इस img टैग को पेंगुइन पहचानकर्ता द्वारा चुना जाता है;
• एक चर में अद्वितीय लिंक दर्ज किया गया है चयनित टैग पर;
• तो आप टैग के साथ काम कर सकते हैं, एक चर के माध्यम से एक वस्तु के साथ के रूप में एक मनमाने ढंग से चर के माध्यम से दिनांक ऑब्जेक्ट के साथ काम करने के तरीके के समान अद्वितीय।

तत्व तक पहुंचने के बाद ( ते गु) वेब पेज id- आइडेंटिफायर द्वारा getElementById विधि का उपयोग करके, हम पहले से ही एक ऑब्जेक्ट के रूप में इसके साथ काम कर रहे हैं, जिसका अर्थ है कि हम ऑब्जेक्ट के गुणों के रूप में टैग की विशेषताओं तक पहुंच प्राप्त करते हैं।

इसलिए, गुण मान पहले से ही गुण मान हैं।

आइए पिछले उदाहरण के साथ काम करना जारी रखें ...

"पेंग्विन पेंगुइन">

उदाहरण कोड के लिए स्पष्टीकरण ...

• img टैग ( इमेजिसच) कुछ विशेषताएं हैं: src - फ़ाइल पता, चौड़ाई और ऊंचाई - चौड़ाई और चित्र की ऊंचाई, अल्ट - वैकल्पिक पाठ;
• ऑब्जेक्ट के रूप में getElementById विधि का उपयोग करके टैग तक पहुँच कर, हम टैग की विशेषताओं तक पहुँचते हैं, गुणों पर आपत्ति कैसे करें;
• तथा गुण मान अब हैं सम्पत्ति की कीमत;
• जावास्क्रिप्ट में, ऑब्जेक्ट गुण एक डॉट के माध्यम से एक्सेस किए जाते हैं। अगला, हम alt प्रदर्शित करते हैं - स्क्रीन पर अलर्ट विधि का उपयोग करके img टैग का वैकल्पिक पाठ।

मुझे उम्मीद है कि आप इस सब में भ्रमित नहीं होंगे। आपको उसी समय समझने की जरूरत है कि जावास्क्रिप्ट के प्रोग्राम स्तर पर और दस्तावेज़ मार्कअप के स्तर पर क्या हो रहा है।

Img टैग एक अनोखी वस्तु है;

टैग की चौड़ाई और ऊँचाई विशेषताएँ ऑब्जेक्ट के गुण हैं;

गुण मान "128" और "पेंग्विन पेंगुइन" - ये संपत्ति मूल्य हैं;

// यह एक जावास्क्रिप्ट दृष्टिकोण से कैसा दिखता है:

var अद्वितीय \u003d (

चौड़ाई: "128",

alt: "पेंग्विन पेंगुइन"

}

यह है कि getElementById विधि कैसे काम करती है, जो किसी भी तत्व का संदर्भ देता है ( टैग) एक वेब पेज की अगर यह एक अद्वितीय आईडी है। अगला, हम जावास्क्रिप्ट स्तर पर इस तत्व के साथ काम करते हैं। पहले से ही एक वस्तु के साथ के रूप में...

इस बात पर ध्यान दिया जाना चाहिए कि: पिछले पाठ की तरह, यहाँ - getElementById विधि के साथ काम करते समय, स्क्रिप्ट कॉल लाइन को html-document के अंत में रखा जाना चाहिए

JQuery वेब दस्तावेज़ में तत्वों का चयन करने के लिए अन्य विकल्प प्रदान करता है।

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

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

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

कार्य सरल है, आपको कक्षा \u003d "एलएम" के साथ एक तत्व का चयन करने और जावास्क्रिप्ट के साथ इसके साथ कुछ क्रियाएं करने की आवश्यकता है।

आइए इसे कैसे करें, इस पर कुछ विकल्प देखें।

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

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

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

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

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

यही कारण है कि दस्तावेज़ के अंत में ।getElementsByClassName ("elem") संरचना, आपको यह निर्दिष्ट करने की आवश्यकता है कि सरणी का शून्य तत्व () प्रदर्शित किया गया है। जावास्क्रिप्ट की गिनती शून्य पर शुरू होती है, एक पर नहीं।

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

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

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

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

विकल्प 2. जेकरी पुस्तकालय का उपयोग करना।

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

यहाँ एलिम तत्व को निर्दिष्ट वर्ग नाम है।

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

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

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