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

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

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

document.getElementById (आईडी)

पैरामीटर:

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

चलिए एक पेज बनाते हैं, इसमें एक एलिमेंट जोड़ते हैं और इसके लिए एक आईडी असाइन करते हैं, और स्क्रिप्ट में इस एलीमेंट को खोजते हैं:

HTML कोड:

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

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

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

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

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

document.getElementsByClassName (वर्ग)

पैरामीटर:

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

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

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

HTML कोड:

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

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

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

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

document.getElementsByTagName (टैग)

पैरामीटर:

टैग - खोजने के लिए तत्वों का टैग

आइए पेज पर मौजूद सभी p टैग्स को देखें:

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

चयनकर्ता द्वारा खोजें

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

document.querySelector (चयनकर्ता)

document.querySelectorAll (चयनकर्ता)

चयनकर्ताओं को ठीक उसी तरह लिखा जाता है जैसे सीएसएस में, बस उद्धरण देना याद रखें।

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

HTML कोड:

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

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

पड़ोसी तत्वों

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

element.previousElementSibling

element.nextElementSibling

ब्लॉक के बाद तत्व का पता लगाएं:

बाल तत्व

बच्चों की संपत्ति में बच्चों की एक सरणी होती है।

element.children

आइए पाते हैं ब्लॉक के बच्चे।

दस्तावेज़ ऑब्जेक्ट मॉडल - डोम पेड़ों की संरचना से अधिक कुछ भी नहीं है जिसमें टैग मौजूद हैं एचटीएमएल दस्तावेज़।

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

QuerySelector विधि

विधियों के कामकाज का सार समझने के लिए querySelector तथा querySelectorAll निम्नलिखित HTML देखें:

इस उदाहरण में, हमारे पास एक है div आईडी के साथ मुख्य और चार नेस्टेड तत्व div तथा img, जिनमें से प्रत्येक का एक वर्ग मूल्य है पिक-कंटेनर तथा प्रोफ़ाइल छवि क्रमशः। अगले कुछ खंडों में, हम कार्यों को लागू करेंगे querySelector तथा querySelectorAll इस पर HTML कोड और देखो क्या होता है।

querySelector

समारोह querySelector इस तरह काम करता है:

वार तत्व \u003d document.querySelector ("< CSS selector >");

QuerySelector फ़ंक्शन एक तर्क लेता है और यह तर्क है सीएसएस चयनकर्ता उस तत्व के लिए जिसे आप खोजना चाहते हैं। क्या लौटा? क्वेरीसेलेक्टर फ़ंक्शन, पहला तत्व है जो इसे पाता है, भले ही अन्य तत्व हैं जो इस चयनकर्ता के समान हो सकते हैं।

देखना एचटीएमएल हमारे पिछले उदाहरण से, यदि हम पहुँचना चाहते हैं divकिसकी आईडी है मुख्य, आपको निम्नलिखित लिखने की आवश्यकता है:

वार तत्व \u003d document.querySelector ("# मुख्य");

जहां तक \u200b\u200bकि मुख्य एक पहचानकर्ता है, इसे पाने के लिए चयनकर्ता वाक्यविन्यास है #मुख्य ... इसी तरह, वर्ग चयनकर्ता पिक-कंटेनर :

Var तत्व \u003d document.querySelector ("पिक-कंटेनर");

पहला ब्लॉक वापस आ गया है div जिसका वर्ग मूल्य है पिक-कंटेनर ... शेष तत्व div वर्ग मूल्य के साथ पिक-कंटेनर बस नजरअंदाज कर दिया जाता है।

इस फ़ंक्शन के लिए चयनकर्ता सिंटैक्स विशेष रूप से नहीं बनाया गया था, इसलिए आप एक स्टाइलशीट में चयनकर्ताओं के लिए उपयोग किए जाने वाले सटीक सिंटैक्स का उपयोग कर सकते हैं!

यह सब है, और अगले लेख में मैं आपको निम्नलिखित फ़ंक्शन के बारे में बताऊंगा querySelectorAll.

जावास्क्रिप्ट, सीएसएस की तरह, कार्यक्षमता है जो आपको पृष्ठ सामग्री को बदलने के लिए HTML तत्वों को संदर्भित करने की अनुमति देती है। CSS में, यह चयनकर्ताओं को लिखकर पूरा किया जाता है। जावास्क्रिप्ट में इस कार्यक्षमता को व्यवस्थित करने के कई तरीके हैं, और यहाँ उनमें से एक है:

वार प्राइमरी हैडिंग्स \u003d डॉक्यूमेंट.गेटईल्सबायटैगनेम ("एच 1");

यह कोड सभी h1 हेडर को निकालता है और, मोटे तौर पर बोलता है, उन्हें प्राइमरीहेडिंग चर में डालता है। यदि पृष्ठ पर कई हेडर हैं, तो उन सभी को एक सरणी में रखा जाएगा।

वार ou812 \u003d document.getElementById ("एडी");

यह कोड आईडी \u003d "एडी" के साथ तत्व का चयन करता है।

वार गिटार \u003d डॉक्यूमेंट.गेट एलीज़बायक्लासनाम ("कुल्हाड़ियों");

हम तत्वों को उनके वर्ग नामों से भी चुन सकते हैं।

कुछ Sizzle जोड़ें

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

इन पुस्तकालयों के विकास के साथ, चयनकर्ताओं का लेखन काफी कम हो गया है और रूपांतरित हो गया है:

$ ("# dave")। css ()

यह कोड id \u003d "dave" के साथ html तत्व निकालता है और आपको इसकी css शैलियों के साथ काम करने की अनुमति देता है।

HTML कोड में हेरफेर करने के लिए Sizzle केवल JavaScript लाइब्रेरी नहीं है। अन्य विकल्प भी हैं, जैसे रांगी। हालाँकि, मेरे विचार से, उपरोक्त सभी इस लेख में आगे की प्रतीक्षा करने से पहले पुराना है।

जावास्क्रिप्ट का अगला स्तर

कई डेवलपर्स ने jQuery का इतनी बार उपयोग करना शुरू कर दिया कि वे जावास्क्रिप्ट में नाटकीय परिवर्तनों को भी नोटिस नहीं करते थे।

जावास्क्रिप्ट चयनकर्ता एपीआई HTML5 विनिर्देश का आधिकारिक हिस्सा है और इसका उपयोग XHTML पृष्ठ लिखने के लिए किया जा सकता है। नया सिंटैक्स बहुत सरल है:

Document.querySelector ("# एडी")

यह कोड document.getElementById ("एडी") के बिल्कुल बराबर है। प्रभावशाली नहीं है? इस बारे में क्या:

Document.querySelector ("# एडी h1 + p")

नई कार्यक्षमता आपको जटिल सीएसएस अभिव्यक्तियों का उपयोग करके डोम में हेरफेर करने की अनुमति देती है।

QuerySelector विधि केवल पहली आइटम जो इसे पाती है, को पुनः प्राप्त करती है। सभी को पुनः प्राप्त करने के लिए, आपको querySelectorAll का उपयोग करने की आवश्यकता है:

Var hiFrets \u003d document.querySelectorAll ("table # frets tr: nth-child (3)")

यह कोड आईडी \u003d "माल" के साथ तालिका से हर तीसरी पंक्ति को पुनः प्राप्त करता है।

कई बहुत महत्वपूर्ण बिंदु

क्वेरीसीलेटर / ऑल मेथड का उपयोग करते समय ऐसी कई सीमाएँ हैं जिनके बारे में आपको जानकारी होनी चाहिए:

सभी ब्राउज़र नई कार्यक्षमता का समर्थन नहीं करते हैं। यदि आपके लिए यह महत्वपूर्ण है कि कोड IE6-7 पर काम करता है, तो उन पुस्तकालयों का उपयोग करना बेहतर होता है जो DOM: Sizzle या jQuery में हेरफेर कर सकते हैं।

चयनकर्ताओं को बहुत सावधानी से बनाया जाना चाहिए, अन्यथा ब्राउज़र उन्हें समझ नहीं पाएंगे, और उपरोक्त तरीके शून्य हो जाएंगे। सामान्य तौर पर, विशेष रूप से CSS3 चयनकर्ताओं का उपयोग करते समय बहुत सावधान रहें।

GetElementsByTagName के विपरीत, querySelectorAll पद्धति पुनः प्राप्त तत्वों की एक स्थिर सूची लौटाती है क्योंकि वे एक निश्चित समय पर पृष्ठ पर होते हैं। इसका अर्थ है कि यदि आप कोड में कोई भी गतिशील परिवर्तन करते हैं (जावास्क्रिप्ट के माध्यम से तत्वों को जोड़ने या हटाने), तो आपको querySelectorAll पद्धति का पुन: उपयोग करना होगा।

विभिन्न प्रकार के पुस्तकालयों को लोड करने की आवश्यकता से छुटकारा पाने के लिए नई कार्यक्षमता का प्रयास करें।

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

एक पेड़ में नोड या नोड के संग्रह को खोजने के लिए तरीके

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

GetElementById () विधि

GetElementById (elementID) विधि दस्तावेज़ में निर्दिष्ट पहचानकर्ता (id \u003d "elementID") के साथ एक नोड ऑब्जेक्ट के रूप में तत्व देता है। यदि निर्दिष्ट पहचानकर्ता वाला तत्व मौजूद नहीं है, तो यह विधि शून्य हो जाती है।

मानक के अनुसार, आपके पास एक ही आईडी विशेषता मान वाले दस्तावेज़ में कई तत्व नहीं हो सकते हैं, अर्थात्। समान दस्तावेज़ में पहचानकर्ता का मान अद्वितीय होना चाहिए। फिर भी, यदि आपके दस्तावेज़ में निर्दिष्ट आईडी के साथ कई तत्व हैं, तो getElementById () विधि पहले पाए गए तत्व को वापस कर देगी।

document.getElementById (elementID)

इस विधि में एक आवश्यक पैरामीटर (एलिमेंट) है, जो कि उस तत्व की आईडी विशेषता के मान से युक्त एक स्ट्रिंग है जिसे आप पुनः प्राप्त करना चाहते हैं।

उदाहरण के लिए, आईडी \u003d "nameArticie" वाले तत्व के पाठ का रंग बदलें।

लेख का शीर्षक

• 1 अंक
• 2 बिंदु
• 3 बिंदु

GetElementsByClassName () विधि

GetElementsByClassName (className) विधि दस्तावेज़ (दस्तावेज़ के लिए) या चाइल्ड नोड्स (नोड के लिए) के बीच सभी पाए गए तत्वों को लौटाती है, जिसमें एक नोडल ऑब्जेक्ट (नोड्स का संग्रह) के रूप में निर्दिष्ट वर्ग नाम (वर्ग \u003d "className") होता है। दूसरे शब्दों में, यह विधि एक नोडलिस्ट ऑब्जेक्ट लौटाती है, जो इस विधि के पैरामीटर में निर्दिष्ट वर्ग नाम के साथ तत्वों (नोड्स) का एक संग्रह है।

मिली नोड्स की संख्या प्राप्त करने के लिए आपको NodeList ऑब्जेक्ट की लंबाई संपत्ति का उपयोग करने की आवश्यकता है। और संग्रह में सभी नोड्स पर पुनरावृति करने के लिए, आप निम्नलिखित लूप का उपयोग कर सकते हैं:

वार एलिमेंट्सलिस्ट \u003d डॉक्यूमेंट.गेट एलीज़बायक्लासनाम ("सूची"); के लिए (var i \u003d 0; मैं;

document.getElementByClassName (className);
नोड (नोड) .getElementByClassName (className);

इस विधि में एक आवश्यक पैरामीटर (क्लासनेम) है, जो एक स्ट्रिंग है जिसमें तत्वों के वर्ग का नाम है जिसे आप प्राप्त करना चाहते हैं। यदि आप उन तत्वों को प्राप्त करना चाहते हैं जिनमें कई निर्दिष्ट कक्षाएं हैं, तो उन्हें एक स्थान का उपयोग करके इस पद्धति के पैरामीटर में अलग किया जाना चाहिए। उदाहरण के लिए, उन नोड्स का एक संग्रह प्राप्त करें जिनके पास क्लासल और क्लास 2 हैं:

Document.getElementsByClassName ("classl class2");

उदाहरण के लिए, सूची वर्ग वाले तत्वों का पृष्ठभूमि रंग बदलें:

लेख का शीर्षक

• 1 अंक
• 2 बिंदु
• 3 बिंदु

• 1 अंक
• 2 बिंदु

उदाहरण के लिए, सूची वर्ग वाले तत्वों (नोड्स) का एक संग्रह प्राप्त करें। अगला, इस संग्रह में 2 नोड प्राप्त करें, अर्थात अनुक्रमणिका के साथ नोड 1. फिर परिणामी नोड की पृष्ठभूमि का रंग बदलें।

// उन तत्वों का एक संग्रह प्राप्त करें जिनके पास सूची वर्ग var एलिमेंट्स हैं। document \u003dget.getElementsByClassName ("सूची"); // संग्रह var सेकंड में 2 नोड प्राप्त करें \u003d एलिमेंटलिस्ट; // तत्व का बैकग्राउंड रंग बदल दें secondList.style.backgroundColor \u003d "red";

GetElementsByTagName () विधि

GetElementsByTagName (tagname) विधि दस्तावेज़ (दस्तावेज़ के लिए) या चाइल्ड नोड्स (नोड के लिए) के बीच सभी पाए गए तत्वों को वापस लौटाती है, जिनमें नोडलिस्ट ऑब्जेक्ट (नोड्स का संग्रह) के रूप में निर्दिष्ट टैग होता है। एक संग्रह में एक विशिष्ट नोड प्राप्त करना सूचकांक द्वारा किया जाता है। संग्रह में तत्वों (नोड्स) की गिनती 0 से शुरू होती है।

document.getElementsByTagName (tagname);
नोड (नोड) .getElementsByTagName (tagname);

इस विधि में एक आवश्यक पैरामीटर (टैग्नैम) है, जो अपरकेस अक्षरों में टैग नाम से युक्त एक स्ट्रिंग है। यदि आप एक स्ट्रिंग को एक पैरामीटर के रूप में तारांकन चिह्न ("*") निर्दिष्ट करते हैं, तो हमें दस्तावेज़ में सभी तत्व मिलते हैं (दस्तावेज़ ऑब्जेक्ट के लिए) या नोड के सभी बच्चे (नोड ऑब्जेक्ट के लिए)।

संग्रह में निहित पाया नोड्स की संख्या प्राप्त करने के लिए, नोडलिस्ट ऑब्जेक्ट की लंबाई संपत्ति का उपयोग करें। और संग्रह में सभी नोड्स पर पुनरावृति करने के लिए, आप निम्नलिखित लूप का उपयोग कर सकते हैं:

वार एलिमेंट्सलिस्ट \u003d डॉक्यूमेंट.गेट एलीज़बायटैगनेम ("एलआई"); के लिए (var i \u003d 0; मैं;

उदाहरण के लिए, एलआई तत्वों का पृष्ठभूमि रंग बदलें:

लेख का शीर्षक

• 1 अंक
• 2 बिंदु
• 3 बिंदु

उदाहरण के लिए, उल आइटम का एक संग्रह प्राप्त करें। फिर इस संग्रह में 1 नोड प्राप्त करें, अर्थात्। इंडेक्स 0. के साथ नोड। फिर इस नोड के लिए चाइल्ड एलआईआई नोड्स का संग्रह प्राप्त करें। अंत में, इस संग्रह में प्रत्येक आइटम का फ़ॉन्ट आकार बदलें।

// उल तत्वों के तत्वों का संग्रह प्राप्त करें var elementUL \u003d document.getElementsByTagName ("UL"); // इस संग्रह में 1 नोड प्राप्त करें var elementUL \u003d elementUL; // एलआईएल के बच्चों को एलिमेंट नोड वर्जन एलएलआई एलएलआई का तत्व प्राप्त करें \u003d एलिमेंट; एग्यूमेंट्सबायटैगनेम ("एलआई"); // के लिए संग्रह में सभी तत्वों पर iterate (var i \u003d 0; i;

GetElementsByName () विधि

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

आइटम (नोड्स) को उस क्रम में संग्रह में जोड़ा जाता है जिसमें वे पेड़ में दिखाई देते हैं। एक संग्रह में एक विशिष्ट नोड प्राप्त करना सूचकांक द्वारा किया जाता है। संग्रह में तत्वों (नोड्स) की गिनती 0 से शुरू होती है।

वार एलिमेंट्स लिस्ट \u003d डॉक्यूमेंट.गेटईल्सबायनाम ("फोन"); के लिए (var i \u003d 0; मैं;

नोट: एचटीएमएल 5 ने नाम विशेषता को हटा दिया है और इसे अधिकांश तत्वों के लिए आईडी विशेषता के साथ बदल दिया है।

document.getElementsByName (नाम)

इस विधि में एक आवश्यक पैरामीटर (नाम) है, जो एक स्ट्रिंग है जिसमें नाम विशेषता का मान है।

उदाहरण के लिए, उन तत्वों की पृष्ठभूमि का रंग बदलें जिनमें मान फ़ोन (नाम \u003d "फ़ोन") के साथ एक नाम विशेषता है:

फ़ोन: एक और फोन:

QuerySelector () विधि

QuerySelector () विधि दस्तावेज़ में (दस्तावेज़ के लिए) या चाइल्ड नोड्स (नोड के लिए) के बीच पहला पाया गया तत्व लौटाता है जो इस पद्धति के पैरामीटर के रूप में निर्दिष्ट CSS चयनकर्ता से मेल खाता है। यदि कोई तत्व CSS चयनकर्ता से मेल नहीं खाता है, तो यह विधि शून्य हो जाती है।

document.querySelector (cssSelector)
node.querySelector (cssSelector)

इस पद्धति में एक आवश्यक पैरामीटर (cssSelector) है, जो एक स्ट्रिंग है जिसमें CSS चयनकर्ता होता है जिसके अनुसार तत्व का चयन किया जाता है।

उदाहरण के लिए, # m p चयनकर्ता से मेल खाने वाले पहले पाए गए तत्व का टेक्स्ट रंग बदलें:

उदाहरण के लिए, किसी दस्तावेज़ में DIV तत्वों का एक संग्रह प्राप्त करें। फिर इस संग्रह में 1 नोड प्राप्त करें, अर्थात्। इंडेक्स 0. के साथ नोड। इस नोड के लिए, अपने बच्चे के बीच सीएसएस चयनकर्ता h1 + p से मेल खाने वाले पहले तत्व को खोजता है। फिर इस तत्व का फ़ॉन्ट आकार बदलें।

// DIV तत्वों का एक संस्करण प्राप्त करें var elementsDIV \u003d document.getElementsByTagName ("DIV"); // इस संग्रह में 1 नोड प्राप्त करें var elementDIV \u003d elementsDIV; // h1 नोड के तुरंत बाद p नोड प्राप्त करें। // नोड के बच्चे नोड्स के बीच नोड की खोज करें, जो एलिमेंटिव वैरिएबल var elementP \u003d elementDIV.querySelector ("h1 + p") में संग्रहीत है; // तत्व तत्व के फ़ॉन्ट आकार को बदल दें ।style.fontSize \u003d "30px";

QuerySelectorAll () विधि

QuerySelectorAll () विधि दस्तावेज़ (दस्तावेज़ के लिए) या चाइल्ड नोड्स (नोड के लिए) के बीच सभी पाए गए तत्वों को लौटाती है जो इस विधि के लिए एक पैरामीटर के रूप में निर्दिष्ट सीएसएस चयनकर्ता से मेल खाती है, एक नोडलिस्ट ऑब्जेक्ट (नोड्स का संग्रह) के रूप में। संग्रह में नोड्स को सूचकांक द्वारा संदर्भित किया जाता है। संग्रह में तत्वों (नोड्स) की गिनती 0 से शुरू होती है।

पाए गए नोड्स की संख्या प्राप्त करने के लिए, नोडलिस्ट ऑब्जेक्ट की लंबाई संपत्ति का उपयोग करें। और संग्रह में सभी नोड्स पर पुनरावृति करने के लिए, आप निम्नलिखित लूप का उपयोग कर सकते हैं:

Var एलिमेंट्सलिस्ट \u003d document.querySelectorAll ("# main p"); के लिए (var i \u003d 0; मैं;

document.querySelectorAll (cssSelector);
नोड (नोड) .querySelectorAll (cssSelector);

इस विधि में एक आवश्यक पैरामीटर (cssSelector) है, जो एक स्ट्रिंग है जिसमें सीएसएस चयनकर्ता होता है जिसके अनुसार तत्वों का चयन किया जाता है। इस पद्धति के एक पैरामीटर में कई चयनकर्ताओं को निर्दिष्ट करने के लिए, उन्हें अल्पविराम से अलग किया जाना चाहिए।

उदाहरण के लिए, # m p चयनकर्ता से मेल खाने वाले तत्वों का टेक्स्ट रंग बदलें:

उदाहरण के लिए, एक बच्चा नोड प्राप्त करें जिसमें साइडबार की आईडी विशेषता हो। पिछले चरण में प्राप्त नोड के पी बच्चों का पृष्ठभूमि रंग बदलें:

// तत्व (नोड) को आईडी के साथ प्राप्त करें \u003d "साइडबार" वर् साइडबार \u003d डॉक्यूमेंट.गेट ईमेंटबायआईड ("साइडबार"); // नोड्स का संग्रह प्राप्त करें जो "p" चयनकर्ता var एलिमेंट्स से मेल खाता है ।ListP \u003d sidebar.querySelectorAll ("p"); // के लिए संग्रह में सभी तत्वों पर iterate (var i \u003d 0; i;

काम

GetElementById (), getElementsByClassName (), getElementsByTagName (), querySelector (), querySelectorAll () निम्न कार्यों के लिए तरीके का उपयोग करके जावास्क्रिप्ट कोड लिखें

1. मुख्य ब्लॉक में स्थित सभी पी तत्वों को प्राप्त करें;
2. कंटेनर डिव में स्थित एक तरफ ब्लॉक प्राप्त करें;
3. शरीर के कंटेनर में स्थित पाद ब्लॉक प्राप्त करें।

प्रत्येक कार्य को यथासंभव विभिन्न तरीकों से करें।

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

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

आप आईडी \u003d "एलएम" के साथ एक तत्व का चयन कैसे कर सकते हैं और इसके साथ कई क्रियाएं कर सकते हैं?

समस्या को हल करने के लिए कई विकल्प हैं। आइए अब उन्हें देखें।

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

एक तरीका है कि आप किसी तीसरे पक्ष के पुस्तकालयों का उपयोग किए बिना "शुद्ध" जावास्क्रिप्ट कोड का उपयोग करके किसी तत्व को कैसे संदर्भित कर सकते हैं। यह तरीका ggetElementById ("element_id") विधि का उपयोग करना है। इस प्रकार, हम उस तत्व का उल्लेख करते हैं जो हमें इसकी आईडी द्वारा चाहिए।

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

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

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

आइए अब देखते हैं कि आप इस समस्या को दूसरे तरीके से कैसे हल कर सकते हैं।

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

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

किसी तत्व को उसकी आईडी से संदर्भित करने के लिए, आपको संरचना का उपयोग करने की आवश्यकता है:

$ ("# हाथी")

यहाँ एलएम आईडी विशेषता में निहित नाम है।

इसलिये हम Jquery नामक एक तृतीय-पक्ष जावास्क्रिप्ट पुस्तकालय का उपयोग करेंगे, फिर इस पुस्तकालय को पहले जोड़ा जाना चाहिए।

इसे सेक्शन में जोड़ा जाता है , ऐसा करने का एक तरीका कोड की निम्न पंक्ति जोड़ना है:

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

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

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