इस ट्यूटोरियल में, हम जावास्क्रिप्ट में घटनाओं, विशेषताओं और getElementById के साथ काम करने की मूल बातें कवर करेंगे।

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

हम अपने कोड को प्रतिक्रिया करने के लिए सिखाकर शुरू करेंगे उपयोगकर्ता क्रियाओं पर साइट। उदाहरण के लिए, उपयोगकर्ता माउस के साथ कहीं क्लिक करता है, और प्रतिक्रिया में हमारे कोड को इस क्लिक को संसाधित करना होगा और स्क्रीन पर कुछ जानकारी प्रदर्शित करनी होगी।

उपयोगकर्ता क्रियाएं जिन्हें हम जावास्क्रिप्ट के माध्यम से ट्रैक कर सकते हैं उन्हें कहा जाता है आयोजन... घटनाएँ इस प्रकार हो सकती हैं: रोना पृष्ठ तत्व पर माउस के साथ, दिशा निर्देश पृष्ठ तत्व या इसके विपरीत पर माउस के साथ - देखभाल आइटम और इतने पर माउस कर्सर। इसके अलावा, ऐसी घटनाएं हैं जो उपयोगकर्ता की कार्रवाइयों पर निर्भर नहीं होती हैं, उदाहरण के लिए, एक HTML पेज ब्राउज़र में लोड होने वाली घटना।

जावास्क्रिप्ट में है कई तरीके घटनाओं के साथ काम करें। हम सबसे सरल के साथ शुरुआत करेंगे।

घटनाओं के साथ काम करने की मूल बातें

किसी विशेष घटना के लिए एक तत्व की प्रतिक्रिया निर्धारित करने का सबसे आसान तरीका यह है कि किसी विशिष्ट टैग के लिए एक विशेषता का उपयोग करके इसे निर्दिष्ट करें। उदाहरण के लिए, एक घटना माउस क्लिक मैच विशेषता क्लिक पर, प्रतिस्पर्धा माउस ले जाना - विशेषता मूषक के ऊपर सेऔर घटना "कर्सर छोड़ने वाला तत्व" - विशेषता onmouseout.

घटना के साथ विशेषता का मूल्य है जावास्क्रिप्ट कोड... निम्नलिखित उदाहरण में बटन पर क्लिक करके फ़ंक्शन निष्पादित किया जाएगा चेतावनी:

और अब क्लिक पर फ़ंक्शन को तत्व पर निष्पादित किया जाएगा समारोह:

फंक्शन फंक () (अलर्ट ("!");)

हो सकता है एक कार्य नहीं, और कुछ:

फ़ंक्शन func1 () (अलर्ट ("1"); फ़ंक्शन फ़ंक्शन func2 () (अलर्ट ("2");)

कृपया ध्यान दें कि यदि किसी विशेषता के अंदर आपको दोहरे उद्धरण चिह्नों की आवश्यकता है (उदाहरण के लिए एक स्ट्रिंग के लिए) और विशेषता के बाहरी उद्धरण भी दोहरे हैं - onclick \u003d "अलर्ट ("! ")" - ऐसा कोड काम नहीं करेगा।

इससे निपटने के कई तरीके हैं: आप बाहरी कोट्स को सिंगल कोट्स में बदल सकते हैं onclick \u003d "अलर्ट ("! ")", आप बैकस्लैश के साथ आंतरिक उद्धरणों से भी बच सकते हैं onclick \u003d "अलर्ट (\\"! \\ ")" या केवल एक विशेषता से फ़ंक्शन में जावास्क्रिप्ट कोड स्थानांतरित करें, और केवल फ़ंक्शन नाम को विशेषता में छोड़ दें onclick \u003d "func ()".

अगर आप ऐसा ही करेंगे बाहरी विशेषता के लिए एकल उद्धरण का उपयोग करें और स्ट्रिंग के लिए एकल उद्धरण का उपयोग करें: onclick \u003d "अलर्ट ("! ")" - यहाँ भी सब कुछ इसी तरह से हल किया गया है।

घटनाओं के लिए टेबल की विशेषता

GetElementById के साथ काम करना

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

मान लीजिए कि हमारे पास विशेषता के साथ पृष्ठ पर एक टैग है आईडी अर्थ में परीक्षा... चलिए इस टैग के लिंक को वेरिएबल में लिखते हैं eLEM... ऐसा करने के लिए, हमें विधि का उपयोग करना चाहिए getElementByIdकि इसके द्वारा तत्व हो जाता है आईडी.

यह रिकॉर्डिंग होगी क्लिक पर बटन पर हम विशेषता सेट करते हैं क्लिक पर... इस बटन पर क्लिक करके, फ़ंक्शन चालू हो जाएगा समारोहजो मिल जाएगा एचटीएमएल पृष्ठ तत्व के साथ आईडी बराबरी का परीक्षा और लिखेंगे इससे लिंक करें एक चर में eLEM:

अब चर में eLEM हमारे पास एक विशेषता के साथ एक तत्व का लिंक है आईडी अर्थ में परीक्षा... चर ही eLEM है एक वस्तु.

यह ऑब्जेक्ट और पेज का HTML टैग एक दूसरे से संबंधित हैं - हम ऑब्जेक्ट के किसी भी गुण को बदल सकते हैं eLEM और उसी समय हम HTML पृष्ठ पर परिवर्तन देखेंगे जो हमें प्राप्त तत्व के साथ होगा।

आइए देखें कि व्यवहार में यह कैसे होता है।

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

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

समारोह के अंदर समारोह हमें अपना इनपुट मिलेगा उसकी आईडी द्वारा और एक चर में इसके लिए एक लिंक लिखें eLEM:

समारोह func () (var elem \u003d document.getElementById ("परीक्षण");)

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

हम इस तरह से अलर्ट के माध्यम से विशेषता की सामग्री को आउटपुट कर सकते हैं - अलर्ट (एलएम.वेल्यू) - या इसे कुछ वैरिएबल पर लिखें। चलो इसे करते हैं:

समारोह func () (var elem \u003d document.getElementById ("test"); चेतावनी (elem.value); // प्रिंट "!"

हम अन्य विशेषताओं के मूल्यों को उसी तरह से पढ़ सकते हैं, उदाहरण के लिए, इस तरह - elem.id - हम आईडी विशेषता के मूल्य की गणना करते हैं, और इसलिए - elem.type - प्रकार विशेषता का मूल्य। उदाहरण देखें:

function func () (var elem \u003d document.getElementById ("test"); अलर्ट (elem.value); // प्रिंट्स "!" अलर्ट (elem.id); // प्रिंट्स "test" अलर्ट (elem.type); // प्रिंट "पाठ")

आप न केवल विशेषता मान पढ़ सकते हैं, बल्कि यह भी पढ़ सकते हैं परिवर्तन उन्हें। उदाहरण के लिए, किसी विशेषता का मान बदलें मूल्य, आपको इसे निर्माण के लिए निर्दिष्ट करने की आवश्यकता है elem.value:

function func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; //присвоим новое значение атрибуту value } !}

HTML कोड इस तरह दिखेगा (मूल्य विशेषता का मूल्य www हो जाएगा):

खैर, अब सबसे कठिन हिस्सा है - आप कर सकते हैं प्रवेश न करें परिवर्तनशील eLEMऔर निर्माण जंजीर इस तरह से अंक:

समारोह func () (चेतावनी (document.getElementById ("परीक्षण")। मूल्य); // प्रदर्शित "!"

उसी तरह (एक श्रृंखला में) यह उत्पादन करना संभव है और पुनर्लेखन की विशेषता:

function func () (document.getElementById ("test")। value \u003d "(! LANG):"; }!}

हालांकि, ज्यादातर मामलों में, एक चर का परिचय सुविधाजनक... दो उदाहरणों की तुलना करें - अब मैंने एक चर पेश किया है eLEM और मैं कई विशेषताओं को पढ़ सकता हूं, जबकि getElementById बुलाया बस एक बार:

function func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; elem.type = "submit"; }!}

अब मैं एक नया चर पेश नहीं कर रहा हूं और इसलिए मुझे फोन करना होगा getElementById दो बार:

function func () (document.getElementById ("test")। value \u003d "(! LANG):"; document.getElementById("test").type = "submit"; }!}

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

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

यदि हम परिवर्तनशील का उपयोग करते हैं eLEM - पृष्ठ पर कोई खोज नहीं होती है (तत्व पहले से ही पाया गया है और इसके लिए लिंक चर में निहित है eLEM).

अपवाद: वर्ग और विशेषताओं के लिए

आपने पहले ही जान लिया है कि जावास्क्रिप्ट के माध्यम से विशेषताओं के साथ कैसे काम किया जाता है और अब यह आपको बताने का समय है इतना आसान नहीं - विशेषताओं के साथ काम करने पर एक अपवाद है - यह एक विशेषता है कक्षा.

यह शब्द है विशेष जावास्क्रिप्ट में और इसलिए हम सिर्फ लिख नहीं सकते elem.classविशेषता मान पढ़ने के लिए कक्षा... इसके बजाय, आपको लिखना चाहिए elem.className.

निम्न उदाहरण एक विशेषता का मूल्य प्रदर्शित करता है कक्षा:

समारोह func () (var elem \u003d document.getElementById ("परीक्षण"); सतर्कता (elem.className);)

वैसे, अन्य गुण हैं जिन्हें संपत्ति से अलग नाम दिया गया है। उदाहरण के लिए, विशेषता के लिये () नाम के साथ गुण मिलान करता है htmlFor.

इसके साथ काम करना

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

आइए देखें कि कैसे काम करना है यह और इस दृष्टिकोण की सुविधा क्या है।

मान लीजिए हमारे पास एक इनपुट पर क्लिक करके उसके मूल्य की सामग्री को प्रदर्शित करने का कार्य है।

अब तक, आप केवल इस तरह का निर्णय ले सकते हैं:

समारोह func () (var elem \u003d document.getElementById ("test"); चेतावनी (elem.value);)

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

इस मामले में, हमें कुछ इस तरह मिलेगा:

function func1 () (var elem \u003d document.getElementById ("test1"); alert (elem.value);) function func2 () (var elem \u003d document.getElementById ("test2"); alert (elem.value);) फ़ंक्शन func3 () (var elem \u003d document.getElementById ("test3"); अलर्ट (elem.value);)

अब हमारे दृष्टिकोण की खामी स्पष्ट रूप से दिखाई दे रही है - प्रत्येक इनपुट के लिए हमें अपने स्वयं के क्लिक हैंडलिंग फ़ंक्शन का निर्माण करना होगा, और ये फ़ंक्शन लगभग एक ही काम करते हैं।

यदि हमारे पास 10 इनपुट हैं, तो हमें 10 कार्य करने होंगे, यह सुविधाजनक नहीं है।

आइए अपने कार्य को सरल बनाएं: हम वर्तमान तत्व के आईडी को फ़ंक्शन के पैरामीटर के रूप में पास करेंगे। और कार्यों की एक बड़ी संख्या के बजाय, सब कुछ एक समारोह में कम हो जाएगा:

function func (id) (var elem \u003d document.getElementById (id); सतर्कता (elemvalue;))

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

तो, चलो अंत में समस्या को हल करने के विकल्प को देखें यह.

आइए इसे बनाते हैं ताकि प्रत्येक इनपुट क्लिक पर अपनी सामग्री प्रदर्शित करे। ऐसा करने के लिए, फ़ंक्शन के पैरामीटर के रूप में ऑब्जेक्ट को पास करें यह, इस तरह: दुर्गंध (यह).

हमारा यह फ़ंक्शन के पैरामीटर के रूप में पारित किया गया है और एक चर में मिलता है eLEM... यह हाथी व्यवहार करता है जैसे कि यह प्राप्त किया: var elem \u003d document.getElementById (...), लेकिन आपको इसे इस तरह से प्राप्त करने की आवश्यकता नहीं है, सब कुछ पहले से ही तैयार है और आप इसका उपयोग कर सकते हैं। उदाहरण के लिए, elem.value हमारे इनपुट के मूल्य को इंगित करता है, और इसी तरह।

तो, यहाँ हमारी समस्या का सबसे सरल समाधान है:

फंक फंक्शन (एलएम) (अलर्ट (एलएम.वेल्यू);)

सीएसएस मूल बातें

में जावास्क्रिप्ट के साथ काम करते हैं सीएसएस गुण तत्व के लिए शैली विशेषता का मान बदलकर होता है। उदाहरण के लिए, बदलने के लिए रंग आपको निम्नलिखित श्रृंखला बनाने की आवश्यकता है - elem.style.color - और इसे वांछित रंग मान निर्दिष्ट करें:

फ़ंक्शन func () (var elem \u003d document.getElementById ("test"); elem.style.color \u003d "red";)

आप चर को भी छोड़ सकते हैं eLEMऔर निर्माण बहुत लंबी श्रृंखला.

innerHTML
var पाठ \u003d element.innerHTML;
element.innerHTML \u003d "";
यदि कोई नया मान वर्तमान एक (+ \u003d) में जोड़ा जाता है, तो एक नया आंतरिक HTML असाइन करना भी कोड को अधिलेखित कर देगा। इस तरह से जोड़े गए लिपियों को निष्पादित नहीं किया जाता है।

outerHTML
संपूर्ण तत्व समाहित करता है, इसे बदला नहीं जा सकता। तकनीकी रूप से, इस संपत्ति पर लिखना एक नया तत्व बनाता है जो पुराने को बदल देता है। चर में पुराने तत्व के संदर्भ नहीं बदले गए हैं।

डेटा
textNode.data - पाठ नोड्स और टिप्पणियों की सामग्री

textContent
element.textContent - टैग के बिना तत्व के अंदर का पाठ।
एक कस्टम इनरटेक्स्ट प्रॉपर्टी भी है जिसमें टेक्स्ट कॉन्टेंट के साथ बहुत कुछ है।

तत्व दृश्यता

छिपा हुआ
element.hidden \u003d true
IE11 में छिपी विशेषता समर्थित नहीं है।

गुण

DOM में अधिकांश मानक गुण ऑब्जेक्ट के गुण बन जाते हैं:
element.id \u003d "id"
कोई भी संपत्ति गैर-मानक विशेषताओं (अपरिभाषित) के लिए नहीं बनाई गई है

आप अपने स्वयं के DOM गुण बना सकते हैं:
element.myData \u003d (नाम: "जॉन", अंतिम नाम: "स्मिथ");
और तरीके:
element.myFunc \u003d function () (अलर्ट this.nodeName);
यह काम करता है क्योंकि DOM नोड नियमित जावास्क्रिप्ट ऑब्जेक्ट हैं। ऐसे गैर-मानक गुण और विधियाँ टैग के प्रदर्शन को प्रभावित नहीं करती हैं और केवल जावास्क्रिप्ट में दिखाई देती हैं।

पहुंच टैग विशेषताएँ:
तत्व। सहायता (नाम)
element.get श्रद्धांजलि (नाम)
तत्व.सेट एट्रिब्यूट (नाम, मान)
एलीमेंट
element.attributes विशेषताओं का एक छद्म-सरणी है।

विशेषताएँ केस असंवेदनशील (html) हैं और गुण संवेदनशील (javaScript) हैं।
विशेषता मान हमेशा एक स्ट्रिंग है।

विशेषता: a.getAttribute ("href") - HTML में वही प्रदर्शित करता है जो वास्तव में है
गुण: a.href - विशेषता मान से भिन्न हो सकता है
सबसे अधिक बार, एक गुण एक विशेषता पर निर्भर करता है, लेकिन इसके विपरीत नहीं। संपत्ति को बदलना विशेषता को प्रभावित नहीं करता है।

कक्षाओं के साथ काम करना

वर्ग गुण के दो गुण हैं:
क्लासनेम - स्ट्रिंग
वर्गवादी - वस्तु

क्लासिस्ट ऑब्जेक्ट के तरीके:
element.classList.contains ("class") - चेक करें कि क्या ऑब्जेक्ट में दी गई क्लास है
element.classList.add ("वर्ग")
element.classList.remove ("वर्ग")
element.classList.toggle ("वर्ग")

क्लासिस्ट एक छद्म-सरणी है और लूप के माध्यम से इसे पुनरावृत्त किया जा सकता है।

डेटा-गुण

कस्टम डेटा विशेषताएँ न केवल विशेषताओं के रूप में उपलब्ध हैं, बल्कि डेटासेट संपत्ति के माध्यम से भी उपलब्ध हैं
data-about \u003d "कुछ मूल्य"
element.dataset.about

नोड्स का आदेश

parent.contains (बच्चा) - सच्चा या गलत
जाँचता है कि यदि बच्चे का अभिभावक में नोड है

nodeA.compareDocumentPosition (नोडबी) - तत्वों की सामग्री और सापेक्ष क्रम के बारे में जानकारी प्रदान करता है। वापसी मूल्य एक बिटवाइज़ मास्क है:

नोड्स जोड़ना और निकालना

var div \u003d document.createElement ("div")
document.createTextNode ("पाठ")

parent.appendChild (तत्व) - तत्व को पैरेंट के अंत में जोड़ा जाता है
parent.insertBefore (एलिमेंट, नेक्स्टइब्लिंग) - एलिमेंट को अगले सिब्लिंग से पहले जोड़ा जाता है
parent.insertBefore (तत्व, parent.firstChild) - शुरुआत में जोड़ा गया
parent.insertBefore (तत्व, शून्य) - परिशिष्ट की तरह काम करता है
सभी सम्मिलित विधियाँ सम्मिलित नोड लौटाते हैं।
जब आप एक तत्व को स्थानांतरित करते हैं, तो आपको इसे पहले पुरानी जगह से हटाने की आवश्यकता नहीं होती है, सम्मिलन विधियां स्वचालित रूप से ऐसा करती हैं।

element.insertAdjacentHTML (जहाँ, html) - दस्तावेज़ में कहीं भी मनमाना HTML कोड सम्मिलित करता है। जहां तत्व के संबंध में html को सम्मिलित करने के लिए निर्दिष्ट किया जाता है - इससे पहले, पहले, बाद में, पहले, और बाद में।
एलिमेंट।
element.insertAdjacentText (जहां, पाठ)
अंतिम दो तरीके फ़ायरफ़ॉक्स में समर्थित नहीं हैं

नोड.एपेंड (... नोड्स) - नोड के अंत में नोड्स सम्मिलित करता है,
नोड.पेंडेंड (... नोड्स) - नोड की शुरुआत में नोड्स सम्मिलित करता है,
नोड। बाद (... नोड्स) - नोड के बाद नोड्स सम्मिलित करता है,
node.before (... नोड्स) - नोड से पहले नोड्स सम्मिलित करता है,
node.replaceWith (... नोड्स) - नोड के बजाय नोड्स सम्मिलित करता है।
यहाँ नोड्स नोड्स या स्ट्रिंग्स हैं, किसी भी मात्रा और संयोजन में, कॉमा द्वारा अलग किए जाते हैं।

var fragment \u003d document.createDocumentFragment () एक DOM नोड की नक़ल है जो गायब हो जाता है जब एक डॉक्यूमेंट में डाला जाता है, केवल उसके बच्चों को छोड़कर। आधुनिक ब्राउज़रों में अनुशंसित नहीं है।

element.cloneNode (true) - तत्व की गहरी प्रति
element.cloneNode (झूठी) - बच्चों के बिना कॉपी

माता-पिता। प्रेमचिल्ड (तत्व)
जनक .replaceChild (नयाकरण, तत्व)
element.remove () - मूल को संदर्भित किए बिना सीधे तत्व को हटा देता है।
विधियाँ दूरस्थ नोड लौटाती हैं

DOM के साथ काम करना

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

डोम मॉडल अवलोकन

दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) एक मौलिक एपीआई है जो आपको HTML और XML सामग्री के साथ काम करने में सक्षम बनाता है। DOM एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस (API) विशेष रूप से जटिल नहीं है, लेकिन कई वास्तुशिल्प विशेषताएं हैं जिनके बारे में आपको जानकारी होनी चाहिए।

सबसे पहले, आपको यह समझना चाहिए कि HTML या XML दस्तावेज़ों के नेस्टेड तत्वों को DOM ऑब्जेक्ट्स के एक पेड़ के रूप में दर्शाया गया है। एक HTML दस्तावेज़ के ट्री व्यू में नोड होते हैं जो तत्वों या टैग का प्रतिनिधित्व करते हैं जैसे कि तथा

और पाठ की पंक्तियों का प्रतिनिधित्व करने वाले नोड्स। एक HTML दस्तावेज़ में नोड्स भी हो सकते हैं जो HTML टिप्पणियों का प्रतिनिधित्व करते हैं। निम्नलिखित सरल HTML दस्तावेज़ पर विचार करें:

यह एक HTML डॉक्यूमेंट है

उदाहरण सरल पाठ।

इस दस्तावेज़ का DOM प्रतिनिधित्व निम्नलिखित चित्र में दिखाया गया है:

उन लोगों के लिए जो अभी तक कंप्यूटर प्रोग्रामिंग में पेड़ संरचनाओं से परिचित नहीं हैं, यह जानना उपयोगी है कि उनके विवरण के लिए शब्दावली परिवार के पेड़ों से उधार ली गई है। इस नोड के ठीक ऊपर स्थित नोड को कहा जाता है माता-पिता इस नोड के संबंध में। दूसरे नोड के नीचे एक स्तर पर स्थित नोड्स हैं सहायक इस नोड के संबंध में। नोड्स जो समान स्तर पर होते हैं और समान पैरेंट होते हैं नर्सिंग... नोड्स जो किसी अन्य नोड के नीचे के स्तरों की संख्या हैं, इसके वंशज हैं। माता-पिता, दादा-दादी और इस नोड के ऊपर किसी भी अन्य नोड्स इसके पूर्वज हैं।

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

नोड प्रकार और इसके उपप्रकार नीचे चित्र में दिखाए गए पदानुक्रम का प्रकार बनाते हैं। सामान्य दस्तावेज़ और तत्व प्रकार और HTMLDocument और HTMLElement प्रकारों के बीच औपचारिक अंतर पर ध्यान दें। दस्तावेज़ प्रकार HTML और XML दस्तावेज़ का प्रतिनिधित्व करता है, और तत्व वर्ग उस दस्तावेज़ के एक तत्व का प्रतिनिधित्व करता है। HTMLक्लाज़मेंट और HTMLElement उप-वर्ग विशेष रूप से HTML दस्तावेज़ और उसके तत्वों का प्रतिनिधित्व करता है:

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

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

अधिकांश जावास्क्रिप्ट क्लाइंट प्रोग्राम दस्तावेज़ तत्वों में हेरफेर करने के लिए एक या दूसरे तरीके से काम करते हैं। रनटाइम में, ये प्रोग्राम वैश्विक दस्तावेज़ चर का उपयोग कर सकते हैं जो दस्तावेज़ ऑब्जेक्ट को संदर्भित करता है। हालाँकि, दस्तावेज़ तत्वों के किसी भी हेरफेर को करने के लिए, प्रोग्राम को किसी भी तरह से पुनः प्राप्त करना या चयन करना होगा, तत्व ऑब्जेक्ट जो दस्तावेज़ में उन तत्वों को संदर्भित करते हैं। DOM तत्वों का चयन करने के कई तरीकों को परिभाषित करता है। आप एक दस्तावेज़ के एक तत्व या तत्वों का चयन कर सकते हैं:

आईडी विशेषता के मूल्य से;

नाम विशेषता के मूल्य से;

टैग नाम से;

वर्ग या CSS कक्षाओं के नाम से;

संयोग से एक विशिष्ट सीएसएस चयनकर्ता के साथ।

इन सभी चयन तकनीकों का वर्णन निम्नलिखित उपखंडों में किया गया है।

आईडी विशेषता मान द्वारा तत्वों का चयन करना

सभी HTML तत्वों में id विशेषताएँ होती हैं। इस विशेषता का मूल्य दस्तावेज़ के भीतर अद्वितीय होना चाहिए - एक ही दस्तावेज़ में कोई भी दो तत्व समान आईडी विशेषता मान नहीं होना चाहिए। आप विधि का उपयोग करके आईडी विशेषता के अनूठे मूल्य से एक तत्व का चयन कर सकते हैं getElementById () दस्तावेज़ वस्तु:

Var section1 \u003d document.getElementById ("अनुभाग 1");

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

IE8 से पहले इंटरनेट एक्सप्लोरर के संस्करणों में, getElementById () विधि आईडी गुण मान केस-असंवेदनशील के लिए खोज करता है और नाम विशेषता मान से मेल खाने वाले तत्वों को भी लौटाता है।

नाम विशेषता के मान से तत्वों का चयन करना

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