जावास्क्रिप्ट का उपयोग करके टैग में एक विशेषता जोड़ें। jQuery में तत्व विशेषताओं में हेरफेर करना। जावास्क्रिप्ट में विशेषताओं के साथ काम करने की विधियाँ

इस लेख में हम DOM गुणों और विशेषताओं से परिचित होंगे, विचार करेंगे कि वे कैसे भिन्न हैं और उनके साथ सही तरीके से कैसे काम किया जाए। आइए देखें कि विशेषताओं पर संचालन करने के लिए जावास्क्रिप्ट के पास कौन से तरीके हैं।

किसी विशेषता और DOM प्रॉपर्टी के बीच क्या अंतर है?

विशेषताएँ HTML इकाइयाँ हैं जिनके साथ हम HTML कोड में तत्वों में कुछ डेटा जोड़ सकते हैं।

जब कोई ब्राउज़र किसी पेज के लिए अनुरोध करता है, तो उसे उसका HTML स्रोत कोड प्राप्त होता है। उसके बाद, यह इस कोड को पार्स करता है और इसके आधार पर एक DOM बनाता है। इस प्रक्रिया के दौरान, तत्वों की HTML विशेषताओं को संबंधित DOM गुणों में अनुवादित किया जाता है।

उदाहरण के लिए, ब्राउज़र, HTML कोड की निम्नलिखित पंक्ति को पढ़ते समय, इस तत्व के लिए निम्नलिखित DOM गुण बनाएगा: id , className , src और alt ।

इन गुणों को जावास्क्रिप्ट कोड में किसी ऑब्जेक्ट के गुणों के रूप में एक्सेस किया जाता है। यहां वस्तु एक DOM नोड (तत्व) है।

एक उदाहरण जिसमें हम ऊपर दिए गए तत्व के लिए DOM गुणों के मान प्राप्त करते हैं और उनके मानों को कंसोल पर आउटपुट करते हैं:

// तत्व प्राप्त करें var BrandImg = document.querySelector("#brand"); // तत्व के DOM गुणों के मानों को कंसोल कंसोल.लॉग(brandImg.id) पर प्रदर्शित करें; // "ब्रांड" कंसोल.लॉग(brandImg.className); // "ब्रांड" कंसोल.लॉग(brandImg.src); // "/logo.png" कंसोल.लॉग(brandImg.alt); // "साइट लोगो"

कुछ DOM प्रॉपर्टी नाम विशेषता नामों से मेल नहीं खाते। इनमें से एक वर्ग विशेषता है। यह विशेषता DOM प्रॉपर्टी क्लासनेम से मेल खाती है। यह अंतर इस तथ्य के कारण है कि क्लास जावास्क्रिप्ट में एक कीवर्ड है, यह आरक्षित है और इसका उपयोग नहीं किया जा सकता है। इस वजह से, मानक के डेवलपर्स ने अनुपालन के लिए किसी अन्य नाम का उपयोग करने का निर्णय लिया, जिसे className के रूप में चुना गया था।

एक और बारीकियां इस तथ्य से संबंधित है कि HTML विशेषताओं का अनुवाद निर्दिष्ट है सोर्स कोडदस्तावेज़, DOM गुण हमेशा एक-से-एक कार्यान्वित नहीं होते हैं।

यदि किसी तत्व में गैर-मानक HTML विशेषता है, तो DOM में उसके अनुरूप कोई संपत्ति नहीं बनाई जाती है।

// तत्व प्राप्त करें mydiv = document.querySelector('#mydiv'); // तत्व की कुल संपत्ति का मूल्य प्राप्त करें और इसे कंसोल कंसोल.लॉग (mydiv.alt) पर आउटपुट करें; // अपरिभाषित // तत्व की alt विशेषता का मान प्राप्त करें और इसे कंसोल कंसोल.लॉग (mydiv.getAttribute ("alt")) पर आउटपुट करें; // "..."

एक और अंतर यह है कि कुछ HTML विशेषताओं और उनके संबंधित DOM गुणों के मान भिन्न हो सकते हैं। वे। एक विशेषता का एक मान हो सकता है, और उसके आधार पर बनाई गई DOM प्रॉपर्टी का एक और मान हो सकता है।

ऐसी ही एक विशेषता की जाँच की जाती है।

इस मामले में जाँच की गई HTML विशेषता का मान है खाली पंक्ति. लेकिन, DOM में इस विशेषता से संबंधित संपत्ति का मान true होगा। क्योंकि मानक के नियमों के अनुसार, सत्य स्थापित करने के लिए, HTML कोड में इस विशेषता का उल्लेख करना ही पर्याप्त है, और इससे कोई फर्क नहीं पड़ता कि इसका क्या मूल्य होगा।

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

इसके अलावा, जावास्क्रिप्ट आपको विशेषताओं के साथ काम करने की भी अनुमति देता है। DOM API में इसके लिए विशेष विधियाँ हैं। लेकिन इनका उपयोग केवल तभी करने की सलाह दी जाती है जब आपको वास्तव में इस तरह से डेटा के साथ काम करने की आवश्यकता हो।

साथ ही, आपको यह जानना होगा कि जब हम किसी तत्व की DOM प्रॉपर्टी बदलते हैं, तो संबंधित विशेषता भी बदल जाती है, और इसके विपरीत। लेकिन ब्राउज़रों में यह प्रक्रिया हमेशा एक-से-एक करके निष्पादित नहीं की जाती है।

DOM गुणों और विशेषताओं के बीच मुख्य अंतर हैं:

विशेषता मान हमेशा एक स्ट्रिंग होता है, और DOM प्रॉपर्टी मान एक निश्चित डेटा प्रकार होता है (जरूरी नहीं कि एक स्ट्रिंग);
विशेषता नाम केस-संवेदी नहीं है, और DOM गुण केस-संवेदी हैं। वे। उदाहरण के लिए, HTML कोड में हम HTML id विशेषता को Id, ID आदि के रूप में लिख सकते हैं। यही बात विशेषता नाम पर भी लागू होती है, जिसे हम विशेष रूप से दर्शाते हैं जावास्क्रिप्ट विधियाँइसके साथ काम करने के लिए. लेकिन हम संबंधित DOM प्रॉपर्टी को केवल आईडी द्वारा ही एक्सेस कर सकते हैं, किसी अन्य तरीके से नहीं।

किसी तत्व के DOM गुणों के साथ कार्य करना

जावास्क्रिप्ट में तत्वों के गुणों के साथ काम करना, जैसा कि ऊपर बताया गया है, वस्तुओं के गुणों के साथ ही किया जाता है।

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

पहले उदाहरण के रूप में, निम्नलिखित HTML तत्व पर विचार करें:

सूचना संदेश पाठ... var चेतावनी = document.querySelector('#alert'); // तत्व प्राप्त करें

इसके आधार पर, हम विश्लेषण करेंगे कि DOM गुण कैसे प्राप्त करें, उन्हें बदलें और नए जोड़ें।

DOM संपत्ति मान पढ़ना:

// DOM प्रॉपर्टी आईडी का मान प्राप्त करें var अलर्टआईडी = अलर्ट.आईडी; // "अलर्ट" // DOM प्रॉपर्टी का मान प्राप्त करें क्लासनाम var अलर्टक्लास = अलर्ट.क्लासनाम; // "अलर्ट अलर्ट-जानकारी" // DOM प्रॉपर्टी शीर्षक का मूल्य प्राप्त करें var अलर्टआईडी = अलर्ट.टाइटल; // "मदद पाठ..."

DOM प्रॉपर्टी मान बदलना:

// किसी DOM प्रॉपर्टी का मान बदलने के लिए, आपको बस उसमें एक नया मान निर्दिष्ट करना होगा अलर्ट.टाइटल = "नया टूलटिप टेक्स्ट"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

DOM गुण जोड़ना:

अलर्ट.लैंग = "आरयू"; //लैंग प्रॉपर्टी को "ru" अलर्ट.dir = "ltr" पर सेट करें; // dir प्रॉपर्टी को "ltr" पर सेट करें

एक उदाहरण जिसमें हम पृष्ठ पर पी तत्वों के सभी वर्ग मानों को कंसोल पर आउटपुट करेंगे:

वार पैराग्राफ = document.querySelectorAll("p"); के लिए (var i = 0, लंबाई = पैराग्राफ.लंबाई ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

एक उदाहरण जिसमें हम सामग्री वर्ग के सभी तत्वों के लिए "ru" मान के साथ lang प्रॉपर्टी सेट करते हैं:

वार सामग्री = document.querySelectorAll('content'); के लिए (var i = 0, length = contents.length; i< length; i++) { contents[i].lang = "ru"; }

तत्वों की विशेषताएँ और उनके साथ काम करने की विधियाँ

विशेषताएँ प्रारंभ में HTML कोड में सेट की जाती हैं। हालाँकि वे किसी न किसी तरह से संपत्तियों से जुड़े हुए हैं, लेकिन वे एक ही चीज़ नहीं हैं। ज्यादातर मामलों में, आपको गुणों के साथ काम करना चाहिए, और विशेषताओं तक तभी पहुँचना चाहिए जब आपको वास्तव में इसकी आवश्यकता हो।

जैसा कि ऊपर बताया गया है, DOM प्रॉपर्टी के विपरीत विशेषता मान हमेशा एक स्ट्रिंग होते हैं।

विशेषताओं से संबंधित संचालन करने के लिए जावास्क्रिप्ट में चार विधियाँ हैं:

.hasAttribute("attribute_name") - तत्व पर निर्दिष्ट विशेषता की उपस्थिति की जाँच करता है। यदि तत्व में विशेषता की जाँच की जा रही है, तो यह विधिसत्य लौटाता है, अन्यथा असत्य।
.getAttribute("attribute_name") - विशेषता मान प्राप्त होता है। यदि तत्व में निर्दिष्ट विशेषता नहीं है, तो यह विधि एक खाली स्ट्रिंग ("") या शून्य लौटाती है।
.setAttribute('attribute_name', 'attribute_value') - तत्व के लिए निर्दिष्ट मान के साथ निर्दिष्ट विशेषता सेट करता है। यदि तत्व में निर्दिष्ट विशेषता है, तो यह विधि उसके मान को आसानी से बदल देगी।
.removeAttribute("attribute_name") - तत्व से निर्दिष्ट विशेषता को हटा देता है।

आइए उदाहरण देखें.

बहुत दिलचस्प उदाहरणमान विशेषता के साथ.

मान विशेषता के साथ उदाहरण var name = document.querySelector("input"); // तत्व प्राप्त करें

आइए मान विशेषता और DOM संपत्ति मान का मान प्राप्त करें:

// तत्व के मान विशेषता का मान प्राप्त करें name.getAttribute("value"); // "बॉब" // DOM संपत्ति मूल्य name.value का मूल्य प्राप्त करें; // "बॉब" // मान विशेषता का मान अपडेट करें, इसे एक नए मान name.setAttribute ("मान", "टॉम") पर सेट करें; // "टॉम" // DOM संपत्ति मूल्य name.value का मूल्य प्राप्त करें; // "टॉम"

यह उदाहरण दिखाता है कि जब मान विशेषता बदलती है, तो ब्राउज़र स्वचालित रूप से मान DOM प्रॉपर्टी को तदनुसार बदल देता है।

अब इसके विपरीत करते हैं, अर्थात्, DOM प्रॉपर्टी का मान बदलें और जांचें कि विशेषता मान बदलता है या नहीं:

// DOM प्रॉपर्टी मान के लिए एक नया मान सेट करें name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

यह उदाहरण दिखाता है कि DOM प्रॉपर्टी को बदलने से हमेशा विशेषता में संबंधित परिवर्तन नहीं होता है। वे। इस मामले में, DOM प्रॉपर्टी का मान बदलने से उसकी संबंधित विशेषता नहीं बदलती है।

यही बात तब होगी जब उपयोगकर्ता इस फ़ील्ड में टेक्स्ट दर्ज करेगा। DOM प्रॉपर्टी मान में वास्तविक मान होगा, और संबंधित विशेषता में मूल मान या हमारे द्वारा सेट किया गया मान शामिल होगा, उदाहरण के लिए, setAttribute विधि का उपयोग करके।

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

यहां तक कि उस स्थिति में भी जहां आपको प्रारंभिक मूल्य प्राप्त करने की आवश्यकता है जो हमने HTML में निर्धारित किया है, आप संपत्ति का उपयोग कर सकते हैं। मान विशेषता के प्रारंभिक मान वाली संपत्ति को defaultValue कहा जाता है।

नाम.defaultValue; //टॉम

एक और बहुत दिलचस्प उदाहरण, लेकिन अब href विशेषता के साथ।

href विशेषता के साथ उदाहरण

एक उदाहरण जहां हमें लिंक का मान प्राप्त करने की आवश्यकता है क्योंकि यह HTML में सेट किया गया था।

var पेज2 = document.querySelector('#link'); पेज2.getAttribute('href'); // पेज2.html पेज2.href; // पूरा यूआरएल, उदाहरण के लिए: http://localhost/page2.html

इस उदाहरण में, href विशेषता और href DOM संपत्ति शामिल है विभिन्न अर्थ. href विशेषता वह है जिसे हम कोड में सेट करते हैं, और DOM संपत्ति पूर्ण URL है। यह अंतर मानक द्वारा तय होता है कि ब्राउज़र को पूर्ण URL के लिए href मान को हल करना होगा।

इसलिए, यदि हमें यह प्राप्त करने की आवश्यकता है कि विशेषता में क्या है, तो इस मामले में हम getAttribute विधि के बिना नहीं कर सकते।

अंत में, आइए चयनित विशेषता को देखें।

चयनित विशेषता के साथ उदाहरण

एक उदाहरण जो दिखाता है कि आप चयनित चयन विकल्प का मूल्य कैसे प्राप्त कर सकते हैं:

कोई रेटिंग नहीं 1 2 3 4 5 // चयनित तत्व प्राप्त करें varmark = document.querySelector("#mark"); // 1 रास्ताmark.querySelector('option:checked').value; // विधि 2 मार्क.वैल्यू;

एक उदाहरण जो दिखाता है कि आप चयनित तत्व में चयनित विकल्प मान कैसे प्राप्त कर सकते हैं:

कोई रेटिंग नहीं 1 2 3 4 5 // चयनित तत्व प्राप्त करें varmark = document.querySelector("#mark"); // विधि 1 (एक सरणी बनाकर और उसे चयनित विकल्पों के मानों से भरकर) var arr = ; के लिए (var i = 0, length =mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>विकल्प मान)

विशेषताओं के साथ काम करने का दूसरा तरीका (विशेषताएं संपत्ति)

जावास्क्रिप्ट में, प्रत्येक तत्व में एक विशेषता गुण होता है, जिसका उपयोग NamedNodeMap ऑब्जेक्ट के रूप में इसकी सभी विशेषताओं को पुनः प्राप्त करने के लिए किया जा सकता है।

यह विधिइसका उपयोग तब किया जा सकता है जब आपको, उदाहरण के लिए, किसी तत्व की सभी विशेषताओं को दोहराने की आवश्यकता हो।

इस संग्रह में एक विशेषता को इसके सूचकांक द्वारा या आइटम विधि का उपयोग करके एक्सेस किया जाता है। इस संग्रह में विशेषताएँ 0 से गिनी जाती हैं।

उदाहरण के लिए, आइए किसी निश्चित तत्व की सभी विशेषताओं को कंसोल पर प्रदर्शित करें:

मुझे जावास्क्रिप्ट पसंद है

// तत्व को उसके पहचानकर्ता संदेश द्वारा प्राप्त करें var message = document.querySelector('#message'); // इसकी विशेषताएँ प्राप्त करें var attrs = message.attributes; // (var i = 0, length = attrs.length; i) के लिए एक लूप (attrs.length - विशेषताओं की संख्या) का उपयोग करके सभी विशेषताओं से गुजरें< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "जानकारी"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

इसके अलावा, आप निम्नलिखित विधियों का उपयोग करके भी इस संग्रह के साथ काम कर सकते हैं:

.getNamedItem("attribute_name") - निर्दिष्ट विशेषता का मान प्राप्त करता है (यदि निर्दिष्ट विशेषता तत्व पर मौजूद नहीं है, तो परिणाम शून्य होगा)।
.setNamedItem("attribute_node") - किसी तत्व में एक नई विशेषता जोड़ता है या किसी मौजूदा के मान को अपडेट करता है। एक विशेषता बनाने के लिए, आपको document.createAttribute() विधि का उपयोग करना होगा, जिसे पैरामीटर के रूप में विशेषता नाम पारित करना होगा। फिर बनाई गई विशेषता को वैल्यू प्रॉपर्टी का उपयोग करके एक मान निर्दिष्ट किया जाना चाहिए।
.removeNamedItem("attribute_name") - किसी तत्व से निर्दिष्ट विशेषता को हटा देता है (परिणाम के रूप में हटाई गई विशेषता लौटाता है)।

GetNamedItem, setNamedItem और deleteNamedItem विधियों के माध्यम से विशेषताओं के साथ काम करने का एक उदाहरण:

मुझे जावास्क्रिप्ट पसंद है

// तत्व को उसके पहचानकर्ता संदेश द्वारा प्राप्त करें var message = document.querySelector("#message"); // इसकी विशेषताएँ प्राप्त करें var attrs = message.attributes; // कार्य संख्या 1. आईडी विशेषता का मान प्राप्त करें console.log(attrs.getNamedItem("id")); // कार्य संख्या 2। विशेषता सेट करें (यदि यह मौजूद है, तो इसका मान बदलें, अन्यथा एक नया जोड़ें) // स्टाइल विशेषता बनाएं और इसे attrStyle वेरिएबल var attrStyle = document.createAttribute("style"); में सहेजें; // मान संपत्ति attrStyle.value = "text-संरेखण: बाएँ; का उपयोग करके विशेषता के लिए एक मान निर्दिष्ट करें;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

कार्य

कंसोल पर उन सभी दस्तावेज़ तत्वों को प्रिंट करें जिनमें आईडी विशेषता है।
यदि पृष्ठ पर सभी छवियों में यह विशेषता नहीं है तो उनमें एक शीर्षक विशेषता जोड़ें। विशेषता मान को वैकल्पिक विशेषता मान के बराबर सेट करें।

यह ट्यूटोरियल jQuery में तत्व विशेषताओं को पढ़ने और बदलने के बारे में है।

विशेषताएँ एक नाम/मूल्य जोड़ी हैं जो किसी टैग में तत्वों को निर्दिष्ट की जाती हैं। विशेषताओं के उदाहरण ( href, शीर्षक, स्रोत, कक्षा):

यहाँ सारांश पाठ है

विशेषताएँ पढ़ने, जोड़ने और बदलने के लिए attr()
विशेषताओं को हटाने के लिए deleteAttr()

इस पाठ में attr() और deleteAttr() तरीकों के साथ काम करना शामिल है।

सीएसएस कक्षाओं के साथ काम करने के लिए विशेष jQuery विधियां हैं, जिनका वर्णन दूसरे पाठ में किया गया है। jQuery में किसी प्रोजेक्ट पर काम करते समय, आपको सीएसएस कक्षाओं में बहुत हेरफेर करना पड़ता है, और क्लास विशेषता में कई क्लास नाम हो सकते हैं, जो इसके साथ काम करना अन्य विशेषताओं की तुलना में अधिक जटिल बनाता है।

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

विशेषता मान पढ़ना

किसी तत्व की विशेषता का मान पढ़ना सरल है। आपको बस attr() विधि को कॉल करने की आवश्यकता है jQuery ऑब्जेक्टइसमें तत्व शामिल है, इसे पढ़ने के लिए विशेषता का नाम पास करें। विधि विशेषता मान लौटाती है:

// #myLink एलिमेंट अलर्ट ($("a#myLink").attr("href")) के "href" विशेषता का मान प्रिंट करें);

यदि आपके jQuery ऑब्जेक्ट में एकाधिक तत्व हैं, तो attr() विधि सेट में केवल पहले तत्व के लिए विशेषता मान पढ़ती है।

विशेषता मान सेट करना

विशेषता मान जोड़ने या बदलने के लिए attr() विधि का भी उपयोग किया जा सकता है:

यदि गुण मौजूद नहींतत्व में, यह होगा जोड़ाऔर इसे निर्दिष्ट मान निर्दिष्ट किया जाएगा.
यदि गुण पहले से ही मौजूद है, इसका मूल्य होगा अद्यतनदिया गया मूल्य.

विशेषताएँ जोड़ने या बदलने के लिए attr() विधि का उपयोग करने के तीन तरीके हैं:

आप किसी भी तत्व (या तत्वों के सेट) के लिए विशेषताएँ जोड़/बदल सकते हैं।

आप विशेषता नामों और मानों का मानचित्र निर्दिष्ट करके किसी तत्व (या तत्वों) के लिए एक साथ कई विशेषताओं को जोड़/बदल सकते हैं।

आप कॉलबैक फ़ंक्शन का उपयोग करके एकाधिक तत्वों के लिए एकल विशेषता को गतिशील रूप से जोड़/बदल सकते हैं।

एक विशेषता सेट करें

किसी तत्व की विशेषता को सेट करने या बदलने के लिए, आपको विशेषता नाम और मान निर्दिष्ट करते हुए attr() विधि को कॉल करना होगा। उदाहरण के लिए:

// #myLink तत्व के "href" विशेषता के मान को "http://www.example.com/" मान में बदलें // (यदि "href" विशेषता मौजूद नहीं है, तो यह स्वचालित रूप से बनाई जाएगी) $('a#myLink'). attr('href', 'http://www.example.com/');

एकाधिक तत्वों के लिए एक ही विशेषता सेट करना भी संभव है:

मानचित्र का उपयोग करके कई विशेषताएँ सेट करना

आप मानचित्र का उपयोग करके एक या अधिक तत्वों पर एक साथ कई विशेषताएँ सेट कर सकते हैं। यह नाम/मूल्य जोड़े की एक सूची है जो इस तरह दिखती है:

(नाम1: मान1, नाम2: मान2, ...)

निम्नलिखित उदाहरण एक ही समय में img तत्व पर दो विशेषताएँ सेट करता है:

// img तत्व के लिए "src" और "alt" विशेषताएँ सेट करें #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo")) ;

आप अनेक तत्वों के लिए विशेषताएँ भी सेट कर सकते हैं:

// सभी img तत्वों के लिए "src" और "alt" विशेषताएँ सेट करें $("img").attr(( "src": "mypic.jpg", "alt": "My Photo" ));

कॉलबैक फ़ंक्शन का उपयोग करके विशेषताएँ सेट करना

विशेषता मानों को attr() विधि में पास करने के बजाय, आप कॉलबैक फ़ंक्शन का नाम पास कर सकते हैं। इस तरह आप तत्व की स्थिति, मौजूदा विशेषता मान या अन्य गुणों के आधार पर कई तत्वों के लिए गतिशील रूप से विशेषता मान सेट कर सकते हैं।

रिटर्न फ़ंक्शन को दो तर्क लेने होंगे:

सेट में वर्तमान में चयनित तत्व की स्थिति का सूचकांक (शून्य से शुरू होता है)
वर्तमान में चयनित तत्व के लिए पुराना विशेषता मान

फ़ंक्शन द्वारा लौटाए गए मान का उपयोग विशेषता मान को बदलने के लिए किया जाता है।

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

उदाहरण छवि की स्थिति और उसकी स्रोत विशेषता के आधार पर पृष्ठ पर प्रत्येक छवि में एक वैकल्पिक विशेषता जोड़ने के लिए कॉलबैक फ़ंक्शन का उपयोग करता है:

$(init); फ़ंक्शन init() ( // सभी "img" तत्वों के लिए "alt" विशेषता सेट करें $("img").attr("alt", setAltText); फ़ंक्शन setAltText(index, विशेषताValue) ( रिटर्न ("चित्र") + (सूचकांक +1) + ":" + this.src);

कोड चलाने के बाद, पहली छवि में "चित्र 1: myphoto.jpg" मान के साथ एक वैकल्पिक विशेषता होगी और दूसरी छवि में "चित्र 2: yourphoto.jpg" मान के साथ एक वैकल्पिक विशेषता होगी।

किसी विशेषता को हटाना

किसी तत्व से किसी विशेषता को हटाने के लिए, आपको रिमूवएट्र() विधि को कॉल करना होगा, इसे हटाने के लिए विशेषता का नाम देना होगा। उदाहरण के लिए:

// #myLink तत्व से "शीर्षक" विशेषता हटाएं $("a#myLink").removeAttr("title");

आप कई तत्वों वाले jQuery ऑब्जेक्ट पर deleteAttr() विधि को भी कॉल कर सकते हैं। रिमूवएटर() विधि सभी तत्वों से निर्दिष्ट विशेषता को हटा देगी:

// सभी लिंक से "शीर्षक" विशेषता हटाएं $("a").removeAttr("title");

सारांश

इस पाठ में jQuery में तत्व विशेषताओं के साथ काम करने के मुद्दों को शामिल किया गया है:

गुण मान पढ़ना
एक विशेषता निर्धारित करना
एक साथ कई अलग-अलग विशेषताएँ सेट करना
तत्वों के एक सेट पर विशेषता मानों को गतिशील रूप से सेट करने के लिए कॉलबैक फ़ंक्शन का उपयोग करना
किसी तत्व से विशेषताएँ हटाना

निर्दिष्ट तत्व पर किसी विशेषता का मान सेट करता है। यदि विशेषता पहले से मौजूद है, तो मान अद्यतन किया जाता है; अन्यथा निर्दिष्ट नाम और मान के साथ एक नई विशेषता जोड़ी जाती है।

वाक्य - विन्यास तत्व.सेटएट्रिब्यूट( नाम, कीमत); पैरामीटर नाम A DOMString उस विशेषता का नाम निर्दिष्ट करता है जिसका मान सेट किया जाना है। जब किसी HTML दस्तावेज़ में HTML तत्व पर setAttribute() को कॉल किया जाता है, तो विशेषता नाम स्वचालित रूप से सभी लोअर-केस में परिवर्तित हो जाता है। मान एक DOMString जिसमें विशेषता को निर्दिष्ट करने के लिए मान शामिल है। निर्दिष्ट कोई भी गैर-स्ट्रिंग मान स्वचालित रूप से एक स्ट्रिंग में परिवर्तित हो जाता है।

बूलियन विशेषताओं को सत्य माना जाता है यदि वे तत्व पर मौजूद हैं, उनके वास्तविक मूल्य की परवाह किए बिना; एक नियम के रूप में, आपको मूल्य में खाली स्ट्रिंग ("") निर्दिष्ट करना चाहिए (कुछ लोग विशेषता के नाम का उपयोग करते हैं; यह काम करता है लेकिन गैर-मानक है)। व्यावहारिक प्रदर्शन के लिए नीचे देखें।

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

वापसी मान अपवाद अमान्य कैरेक्टर त्रुटि निर्दिष्ट विशेषता नाम में एक या अधिक वर्ण हैं जो विशेषता नामों में मान्य नहीं हैं। उदाहरण

निम्नलिखित उदाहरण में, setAttribute() का उपयोग किसी पर विशेषताएँ सेट करने के लिए किया जाता है।

HTML हेलो वर्ल्ड JavaScript var b = document.querySelector("बटन"); b.setAttribute("name", "helloButton"); b.setAttribute("अक्षम", "");

यह दो बातें प्रदर्शित करता है:

उपरोक्त setAttribute() पर पहली कॉल नाम विशेषता के मान को "helloButton" में बदलती हुई दिखाती है। आप इसे अपने ब्राउज़र के पेज इंस्पेक्टर (क्रोम, एज, फ़ायरफ़ॉक्स, सफारी) का उपयोग करके देख सकते हैं।
बूलियन विशेषता का मान सेट करने के लिए, जैसे कि अक्षम, आप कोई भी मान निर्दिष्ट कर सकते हैं। एक खाली स्ट्रिंग या विशेषता का नाम अनुशंसित मान हैं। जो कुछ भी मायने रखता है वह यह है कि यदि विशेषता बिल्कुल मौजूद है, इसकी वास्तविक कीमत की परवाह किए बिना, इसका मूल्य सत्य माना जाता है। विशेषता की अनुपस्थिति का अर्थ है कि इसका मान गलत है। अक्षम विशेषता के मान को खाली स्ट्रिंग ("") पर सेट करके, हम अक्षम को सत्य पर सेट कर रहे हैं, जिसके परिणामस्वरूप बटन अक्षम हो जाता है।

तत्व की विशेषताओं से निपटने वाली DOM विधियाँ:

नेमस्पेस-अवेयर नहीं, सबसे अधिक उपयोग की जाने वाली विधियाँ नेमस्पेस-अवेयर वेरिएंट (DOM लेवल 2) सीधे Attr नोड्स से निपटने के लिए DOM लेवल 1 विधियाँ (शायद ही कभी उपयोग की जाती हैं) Attr नोड्स से सीधे निपटने के लिए DOM लेवल 2 नेमस्पेस-अवेयर विधियाँ (शायद ही कभी उपयोग की जाती हैं)

सेटएट्रिब्यूट(DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute(DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasविशेषता(DOM2)	hasविशेषताNS	-	-
रिमूवएट्रिब्यूट(DOM 1)	हटाएँविशेषताNS	रिमूवएट्रिब्यूटनोड	-

विनिर्देश

DOM लेवल 2 कोर: सेटएट्रिब्यूट (DOM लेवल 1 कोर में प्रस्तुत)

ब्राउज़र अनुकूलता

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

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

डेस्कटॉप मोबाइलक्रोम एज फ़ायरफ़ॉक्स इंटरनेट एक्सप्लोररओपेरा सफारी एंड्रॉइड वेबव्यू एंड्रॉइड के लिए क्रोम एंड्रॉइड के लिए फ़ायरफ़ॉक्स आईओएस सैमसंग इंटरनेट पर एंड्रॉइड सफारी के लिए ओपेरासेटएट्रिब्यूट

क्रोम पूर्ण समर्थन हाँ

एज पूर्ण समर्थन 12

फ़ायरफ़ॉक्स पूर्ण समर्थन हाँ

IE पूर्ण समर्थन 5

टिप्पणियाँ

पूर्ण समर्थन 5

टिप्पणियाँ

टिप्पणियाँ इंटरनेट एक्सप्लोरर 7 और इससे पहले के संस्करण में, setAttribute शैलियों को सेट नहीं करता है और जब आप उन्हें सेट करने का प्रयास करते हैं तो ईवेंट को हटा देता है।

ओपेरा पूर्ण समर्थन हाँ

सफ़ारी पूर्ण समर्थन 6

WebView Android पूर्ण समर्थन हाँ

क्रोम एंड्रॉइड पूर्ण समर्थन हाँ

फ़ायरफ़ॉक्स एंड्रॉइड पूर्ण समर्थन हाँ

ओपेरा एंड्रॉइड पूर्ण समर्थन हाँ

सफ़ारी iOS पूर्ण समर्थन हाँ

सैमसंग इंटरनेट एंड्रॉइड पूर्ण समर्थन हाँ

किंवदंती पूर्ण समर्थन पूर्ण समर्थन कार्यान्वयन नोट्स देखें। कार्यान्वयन नोट देखें. गेको नोट्स

कुछ विशेषताओं को संशोधित करने के लिए setAttribute() का उपयोग करना, विशेष रूप से XUL में मान, असंगत रूप से काम करता है, क्योंकि विशेषता डिफ़ॉल्ट मान निर्दिष्ट करती है। वर्तमान मानों तक पहुँचने या संशोधित करने के लिए, आपको गुणों का उपयोग करना चाहिए। उदाहरण के लिए, Element.setAttribute() के बजाय Element.value का उपयोग करें।

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

Ko.bindingHandlers.attrIf = (अद्यतन: फ़ंक्शन (तत्व, valueAccessor, allBindingsAccessor) (var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); जोड़ना

काश मैं सिर्फ @gbs का उत्तर दे पाता, लेकिन मैं ऐसा नहीं कर सकता। मेरा समाधान यह होगा कि दो समान HTML तत्व हों: एक विशेषता के साथ, एक इसके बिना, और तत्व के अनुसार उनमें से एक को जोड़ने के लिए एक नॉकआउट शर्त। मैं भी इस सामान्य अपेक्षा से अवगत हूं, लेकिन कौन सा समाधान अधिक कुशल है?

पाठ विषय की शुरुआत को कवर करेगा: दस्तावेज़ ऑब्जेक्ट मॉडल (जावास्क्रिप्ट DOM) गतिशील HTML का आधार है, ऑब्जेक्ट एक्सेस विधियों का अध्ययन किया जाएगा और जावास्क्रिप्ट घटनाओं को संसाधित करने के तरीकों पर विचार किया जाएगा।

सामान्य तौर पर, एक ऑब्जेक्ट एक समग्र डेटा प्रकार होता है जो कई मानों को एक सामान्य इकाई में जोड़ता है और मानों को मांग पर उनके नाम से संग्रहीत और पुनर्प्राप्त करने की अनुमति देता है।

इससे पहले हमने जावास्क्रिप्ट में अवधारणा से परिचित होना शुरू कर दिया था।

जावास्क्रिप्ट में DOM जैसी कोई चीज़ होती है - दस्तावेज़ ऑब्जेक्ट मॉडल— वेब पेज का ऑब्जेक्ट मॉडल (एचटीएमएल पेज)।
दस्तावेज़ टैग या, जैसा कि वे भी कहते हैं, दस्तावेज़ नोड्स इसकी वस्तुएं हैं।

आइए आरेख देखें जावास्क्रिप्ट में ऑब्जेक्ट पदानुक्रम, और इस विषय में चर्चा की गई दस्तावेज़ वस्तु पदानुक्रम में कहाँ स्थित है।

स्क्रिप्ट तत्व में निम्नलिखित विशेषताएँ हैं:

स्थगित करें (पेज के पूरी तरह से लोड होने की प्रतीक्षा करें)।

उदाहरण:

/* जेएस फाइलों को समानांतर में लोड करने और लोड होने के तुरंत बाद निष्पादित करने की अनुमति देता है, शेष पेज के संसाधित होने की प्रतीक्षा किए बिना */ /* ब्राउज़र को पेज की आगे की प्रक्रिया को रोके बिना जेएस फाइलों को समानांतर में लोड करना शुरू करने की अनुमति देता है। उनका निष्पादन दस्तावेज़ ऑब्जेक्ट मॉडल के पूर्ण विश्लेषण के बाद होता है */

जावास्क्रिप्ट में दस्तावेज़ ऑब्जेक्ट के गुण और विशेषताएँ

दस्तावेज़ ऑब्जेक्ट एक वेब पेज का प्रतिनिधित्व करता है।

महत्वपूर्ण: जावास्क्रिप्ट में किसी ऑब्जेक्ट के गुणों और विधियों तक पहुंचने के लिए, जैसे कि अन्य ऑब्जेक्ट के साथ काम करते समय, डॉट नोटेशन का उपयोग किया जाता है:

वे। पहले वस्तु को स्वयं लिखा जाता है, फिर उसके गुण, विशेषता या विधि को एक बिंदु के माध्यम से और बिना रिक्त स्थान के दर्शाया जाता है

वस्तु.संपत्ति वस्तु.विशेषता वस्तु.विधि()

आइए एक उदाहरण देखें:

उदाहरण: HTML दस्तावेज़ में एक टैग होने दें

मेरा तत्व

और उसके लिए विशिष्ट सीएसएस शैली(दो शैलियाँ भी, दूसरा कार्य के लिए उपयोगी होगा):

.छोटा(रंग: लाल; फ़ॉन्ट-आकार: छोटा; ) .बड़ा(रंग: नीला; फ़ॉन्ट-आकार: बड़ा;)

.छोटा (रंग:लाल; फ़ॉन्ट-आकार:छोटा; ) .बड़ा(रंग:नीला; फ़ॉन्ट-आकार:बड़ा; )

ज़रूरी:

एक नई ऑब्जेक्ट प्रॉपर्टी सेट करें, उसे एक मान निर्दिष्ट करें और यह मान प्रदर्शित करें;

किसी ऑब्जेक्ट विशेषता का मान प्रदर्शित करें;

किसी ऑब्जेक्ट विशेषता का मान बदलें।

आइए कार्य को क्रम से पूरा करें:
✍ समाधान:

चूँकि यह एक जावास्क्रिप्ट भाषा है, आप किसी ऑब्जेक्ट में किसी भी मूल्य के साथ कोई भी प्रॉपर्टी बना और सेट कर सकते हैं। लेकिन पहले, आइए वस्तु तक पहुंच प्राप्त करें (वस्तु तक पहुंच पर इस पाठ में बाद में विस्तार से चर्चा की जाएगी):

// ऑब्जेक्ट को उसकी आईडी var element = document.getElementById("MyElem"); द्वारा एक्सेस करें; तत्व.मायप्रॉपर्टी = 5; // प्रॉपर्टी अलर्ट असाइन करें (element.myProperty); // एक डायलॉग बॉक्स में प्रदर्शित करें

अगला कार्य किसी ऑब्जेक्ट विशेषता से संबंधित है। एक ऑब्जेक्ट विशेषता टैग की विशेषताएँ है। वे। हमारे मामले में उनमें से दो हैं: छोटे मान के साथ वर्ग विशेषता और आईडी विशेषता। हम वर्ग विशेषता के साथ काम करेंगे।

अब अपने ऑब्जेक्ट की विशेषता मान प्रदर्शित करने के लिए जावास्क्रिप्ट कोड जोड़ें। कोड होना चाहिए बादमुख्य टैग:

// ऑब्जेक्ट को उसकी आईडी var element = document.getElementById("MyElem"); द्वारा एक्सेस करें; चेतावनी(element.getAttribute("वर्ग")); // एक डायलॉग बॉक्स में प्रदर्शित करें

और अंतिम कार्य: विशेषता मान बदलना। हमारे पास इसके लिए एक शैली है. "बड़ा". आइए मान बदलें वर्ग विशेषताइस शैली के लिए:

// ऑब्जेक्ट को उसकी आईडी var element = document.getElementById("MyElem"); द्वारा एक्सेस करें; element.setAttribute("class","big");

परिणामस्वरूप, हमारा तत्व बड़ा हो जाएगा और उसका रंग नीला (बड़ा वर्ग) हो जाएगा।

आइए अब विशेषताओं के साथ काम करने के लिए उदाहरण में उपयोग की गई विधियों पर करीब से नज़र डालें।

जावास्क्रिप्ट में विशेषताओं के साथ काम करने की विधियाँ

विशेषताएँ जोड़ी, हटाई और संशोधित की जा सकती हैं। इसके लिए विशेष विधियाँ हैं:

एक विशेषता जोड़ना (इसके लिए एक नया मान सेट करना):

getAttribute(attr)

इस विशेषता की उपस्थिति की जाँच की जा रही है:

हटाएँविशेषता(attr)

विशेषताओं के साथ काम करने के विभिन्न तरीके

उदाहरण: टेक्स्ट ब्लॉक की वैल्यू विशेषता का मान प्रिंट करें।

✍ समाधान:

एक टेक्स्ट ब्लॉक होने दें:

var elem = document.getElementById("MyElem"); var x = "मूल्य";

आइए विशेषता मान प्राप्त करने के कई तरीकों पर नज़र डालें (आउटपुट के लिए अलर्ट() विधि का उपयोग करें):

elem.getAttribute('मान')

2. बिंदु संकेतन:

elem.विशेषताएँ.मूल्य

3. ब्रैकेट नोटेशन:

var तत्व = document.getElementById("t1"); चेतावनी(...) element.setAttribute(...);

var x = "कुंजी"; // कुंजी - विशेषता का नाम, वैल - विशेषता के लिए मान // 1. elem.setAttribute('key', 'val') // 2. elem.attributes.key = "val" // 3. elem.attributes[ " कुंजी"] = "वैल" // 4. elem.setAttribute(x, "वैल")

दस्तावेज़ ऑब्जेक्ट के माध्यम से, आप कुछ उपयोगी गुणों के साथ दस्तावेज़ के मुख्य भाग - बॉडी टैग - तक पहुँच सकते हैं।

उदाहरण के लिए, बॉडी टैग में दो गुण होते हैं: क्लाइंट विंडो की चौड़ाई और ऊंचाई:

document.body.clientHeight - क्लाइंट विंडो की ऊंचाई
document.body.clientWidth — क्लाइंट विंडो की चौड़ाई

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

महत्वपूर्ण: इस तरह से पेज टैग तक पहुंचते समय, स्क्रिप्ट को बॉडी बंद करने से पहले एलिमेंट ट्री के अंत में होना चाहिए! चूंकि जब तक स्क्रिप्ट निष्पादित होती है, तब तक सभी तत्व ब्राउज़र द्वारा स्क्रीन पर पहले से ही "खींच" लिए जाने चाहिए

नौकरी js8_1 . ब्राउज़र विंडो के आकार के बारे में एक संदेश दिखाएँ: उदाहरण के लिए, "ब्राउज़र विंडो आयाम 600 x 400"

वस्तुओं तक पहुँचने या उन्हें खोजने के लिए कई विकल्प हैं:

आईडी (या getElementById विधि) द्वारा खोजें, एक विशिष्ट तत्व लौटाता है

टैग नाम (या getElementsByTagName विधि) द्वारा खोजें, तत्वों की एक सरणी देता है

नाम विशेषता (या getElementsByName विधि) द्वारा खोजें, तत्वों की एक सरणी देता है

मूल तत्वों के माध्यम से (सभी बच्चों को प्राप्त करना)

आइए प्रत्येक विकल्प पर अधिक विस्तार से विचार करें।

किसी तत्व को उसकी आईडी विशेषता के माध्यम से एक्सेस करना

सिंटैक्स: document.getElementById(id)

GetElementById() विधि तत्व को स्वयं लौटाती है, जिसका उपयोग डेटा तक पहुंचने के लिए किया जा सकता है

उदाहरण: पृष्ठ में id='केक' विशेषता वाला एक टेक्स्ट फ़ील्ड है:

...

ज़रूरी

✍ समाधान:

चेतावनी(document.getElementById('cake').value); // "केक की संख्या" लौटाता है

आप एक वेरिएबल के माध्यम से ऑब्जेक्ट तक पहुंच कर वही काम कर सकते हैं:

var a=document.getElementById("केक"); चेतावनी(a.मूल्य); // मान विशेषता का मान प्रदर्शित करें, अर्थात। पाठ "केक की संख्या"

महत्वपूर्ण: स्क्रिप्ट टैग के बाद स्थित होनी चाहिए!

नाम टैग और सरणी अनुक्रमणिका के माध्यम से तत्वों की एक सरणी तक पहुँचना

वाक्य - विन्यास:
document.getElementsByTagName(नाम);

उदाहरण: पृष्ठ पर एक टेक्स्ट फ़ील्ड है (इनपुट टैग), मान विशेषता के साथ:

...

आवश्यक: इसके मान विशेषता का मान प्रदर्शित करें

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

✍ समाधान:

var a =document.getElementsByTagName('input'); चेतावनी(a.मूल्य); // "केक की संख्या" लौटाता है

नाम विशेषता के मान द्वारा तत्वों की एक सरणी तक पहुँचना

वाक्य - विन्यास:
document.getElementsByName(नाम);

GetElementsByName("...") विधि ऑब्जेक्ट की एक सरणी लौटाती है जिसका नाम विशेषता विधि पैरामीटर के रूप में निर्दिष्ट मान के बराबर है। यदि पृष्ठ पर केवल एक ही ऐसा तत्व है, तो विधि अभी भी एक सरणी (केवल एक एकल तत्व के साथ) लौटाती है।

उदाहरण: मान लें कि दस्तावेज़ में एक तत्व है:

var तत्व = document.getElementsByName("MyElem"); चेतावनी(तत्व.मूल्य);

इस उदाहरण में, एक तत्व है, लेकिन संदर्भ सरणी के शून्य तत्व का है।

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

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

मूल तत्व के वंशजों तक पहुँचना

बच्चों को चाइल्डनोड्स प्रॉपर्टी के माध्यम से जावास्क्रिप्ट में एक्सेस किया जाता है। संपत्ति मूल वस्तु से संबंधित है।

document.getElementById(roditel).childNodes;

आइए एक उदाहरण देखें जहां छवि टैग को एक कंटेनर में रखा जाता है जिसे डिव टैग कहा जाता है। इस प्रकार, div टैग छवि डेटा का जनक है, और img टैग स्वयं, तदनुसार, div टैग के बच्चे हैं:

अब आइए आउटपुट करें मोडल विंडोवंशजों के साथ सरणी तत्वों का मान, अर्थात आईएमजी टैग:

var myDiv=document.getElementById('div_for_img'); // पैरेंट कंटेनर तक पहुंचें var childMas=myDiv.childNodes; // वंशजों की सरणी (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

ध्यान दें कि वंशज सरणी के तत्वों के माध्यम से पुनरावृत्त करने के लिए लूप का उपयोग करना सुविधाजनक है। वे। हमारे उदाहरण में हमें एक चक्र मिलता है:

... for (var a in childMas) ( अलर्ट(childMas[ a].src ) ; )

(var a in childMas) के लिए (alert(childMas[a].src); )

तत्वों तक पहुँचने के अन्य तरीके

आइए एक उदाहरण का उपयोग करके अन्य तरीकों को देखें:

1 3 4

पहुँच:

... // अवांछित और बहिष्कृत तत्व एक्सेसर्स: अलर्ट (दस्तावेज़.फॉर्म [ 0 ] .नाम); // एफ अलर्ट (दस्तावेज़.फॉर्म [ 0 ] .तत्व [ 0 ] . प्रकार ); // टेक्स्ट अलर्ट(दस्तावेज़.फॉर्म [0] .तत्व [2] .विकल्प [1] .आईडी); // o2 अलर्ट(document.f .b .type ); // बटन अलर्ट(document.f .s .name ); // एसएस अलर्ट (दस्तावेज़.एफ .एस .विकल्प [1] .आईडी); // o2 // तत्वों तक पहुँचने के लिए पसंदीदा तरीके अलर्ट (document.getElementById ("t") .type); // टेक्स्ट अलर्ट(document.getElementById ("s") .name ); // ss अलर्ट(document.getElementById ("s") .options [1 ] .id ); // 02 अलर्ट(document.getElementById ("o3") .text ); //4...

... //अवांछित और बहिष्कृत तत्व पहुंच विधियां: चेतावनी(document.forms.name); // एफ अलर्ट(दस्तावेज़.forms.elements.type); // टेक्स्ट अलर्ट(document.forms.elements.options.id); // o2 अलर्ट(document.f.b.type); // बटन अलर्ट(document.f.s.name); // एसएस अलर्ट(document.f.s.options.id); // o2 // तत्वों तक पहुँचने के लिए पसंदीदा तरीके अलर्ट(document.getElementById("t").type); // टेक्स्ट अलर्ट(document.getElementById("s").name); // एसएस अलर्ट(document.getElementById("s").options.id); // 02 अलर्ट(document.getElementById("o3").text); //4...

उदाहरण: HTML दस्तावेज़ में, एक बटन और एक टेक्स्ट फ़ील्ड बनाएं। एक स्क्रिप्ट का उपयोग करके, बटन की पृष्ठभूमि को रंगें (बटन की style.backgroundColor संपत्ति) और शिलालेख प्रदर्शित करें "नमस्ते!"पाठ फ़ील्ड में (मूल्य विशेषता)।

HTML कोड:

document.getElementById("t1").value = "हैलो!"; document.getElementById("b1").style.backgroundColor = "red";!}

विकल्प 2:

document.getElementById ("t1") .setAttribute ("मान", ''हैलो!") ; document.getElementById("b1" ) .style .backgroundColor = "red" ;

document.getElementById("t1").setAttribute("value","Hello!"); document.getElementById("b1").style.backgroundColor = "लाल";

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

जाँच कर रहा है कि फॉर्म डेटा सही ढंग से दर्ज किया गया है

क्या मैदान खाली रह गया है?

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

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

if(document.getElementById('name').value=='') (कुछ क्रियाएं, उदाहरण के लिए, एक संदेश प्रदर्शित करना जो आपसे एक फ़ील्ड भरने के लिए कहता है);

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

संख्यात्मक मान के बजाय पाठ: isNaN फ़ंक्शन

यदि किसी फ़ील्ड में संख्यात्मक मान दर्ज करने की आवश्यकता होती है, लेकिन इसके बजाय उपयोगकर्ता पाठ दर्ज करता है, तो isNaN फ़ंक्शन का उपयोग किया जाना चाहिए। "क्या कोई संख्या नहीं है?"), जो इनपुट डेटा के प्रकार की जांच करता है और यदि संख्यात्मक डेटा के बजाय टेक्स्ट डेटा दर्ज किया जाता है तो सत्य लौटाता है।

वह। यदि सत्य लौटाया जाता है, तो उपयोगकर्ता को सही प्रारूप दर्ज करने के लिए सूचित किया जाना चाहिए, अर्थात। संख्या।

if(isNaN(document.getElementById("मिनट").value))( चेतावनी जिसमें आपको संख्यात्मक डेटा दर्ज करने की आवश्यकता होती है);

भरने के लिए तत्वों वाला एक पृष्ठ दिया गया है:

टुकड़ा HTML कोड:

1 2 3 4 5 6 7 8 9 10 11 12

नाम:
डोनट्स की संख्या:
मिनट:
सारांश:
कर:
परिणाम:
...

ज़रूरी:
नीचे दिए गए कोड स्निपेट में रिक्त स्थान भरें जो जाँचता है कि दो टेक्स्ट फ़ील्ड सही ढंग से भरे गए हैं: नाम(आईडी = "नाम") और मिनट(आईडी = "मिनट")। यह सुनिश्चित करने के लिए जांच का उपयोग करें कि फ़ील्ड खाली छोड़ दी गई है ("") और संख्यात्मक फ़ील्ड सही ढंग से भरा गया है (isNaN)।

* का उपयोग करके टेक्स्ट फ़ील्ड के पैटर्न विशेषता के साथ भी कार्य करें।

स्क्रिप्ट खंड:

जटिल स्थितियाँ बनाने के लिए कोड पहले से सीखी गई स्थितियों का उपयोग करता है।

आपके लिए एक नई अवधारणा एक फ़ंक्शन को बटन इवेंट हैंडलर के रूप में कॉल करना है:
ऑनक्लिक='प्लेसऑर्डर();'
जब बटन क्लिक किया जाता है, तो प्लेसऑर्डर() फ़ंक्शन को कॉल किया जाएगा