DOM ट्यूटोरियल
DOM के साथ शुरुआत करना

टिप्पणियों

संस्करण

मौजूदा HTML तत्वों को पुनः प्राप्त करना

सबसे आम कार्यों में से एक डोम से एक मौजूदा तत्व को हेरफेर करने के लिए पुनर्प्राप्त कर रहा है। आमतौर पर इन तरीकों को document पर निष्पादित किया जाता document , क्योंकि यह रूट नोड है, लेकिन ये सभी तरीके पेड़ में किसी भी HTML तत्व पर काम करते हैं। वे बच्चों को केवल उसी नोड से लौटाएंगे जिस पर इसे निष्पादित किया गया है।

आईडी द्वारा लिया गया

var element = document.getElementById("logo");

element केवल (तत्व) तत्व होगा, जिसकी id विशेषता "लोगो" पर सेट है, या यदि ऐसा कोई तत्व मौजूद नहीं है, तो यह null है। यदि इस आईडी के कई तत्व मौजूद हैं, तो दस्तावेज़ अमान्य है, और कुछ भी हो सकता है।

टैग नाम से पुनर्प्राप्त करें

var elements = document.getElementsByTagName("a");

elements में दस्तावेज़ में सभी लिंक टैग का एक लाइव HTMLCollection (एक सरणी जैसी वस्तु) होगा। यह संग्रह DOM के साथ समन्‍वयित है, इसलिए DOM में किए गए कोई भी परिवर्तन इस संग्रह में दिखाई देते हैं। संग्रह यादृच्छिक पहुँच प्रदान करता है और इसकी लंबाई होती है।

var element = elements[0];
//Alternative
element = elements.item(0);

element में पहले मिलाया गया HTML लिंक तत्व, या null अगर सूचकांक सीमा से बाहर है

var length = elements.length;

length सूची में वर्तमान में HTML लिंक तत्वों की संख्या के बराबर है। DOM के बदले जाने पर यह संख्या बदल सकती है।

वर्ग द्वारा लिया गया

var elements = document.getElementsByClassName("recipe");

elements का एक लाइव HTMLCollection (एक सरणी जैसी वस्तु) शामिल होगा, जहां उनकी class विशेषता में "नुस्खा" शामिल है। यह संग्रह DOM के साथ समन्‍वयित है, इसलिए DOM में किए गए कोई भी परिवर्तन इस संग्रह में दिखाई देते हैं। संग्रह यादृच्छिक पहुँच प्रदान करता है और इसकी लंबाई होती है।

var element = elements[0];
//Alternative
element = elements.item(0);

element में इस वर्ग के साथ पहला सामना किया गया HTML element शामिल है। यदि ऐसे तत्व नहीं हैं, तो पहले उदाहरण में element का undefined मूल्य है और दूसरे उदाहरण में null ।

var length = elements.length;

length HTML तत्वों की संख्या के बराबर है जो वर्तमान में कक्षा "नुस्खा" है। DOM के बदले जाने पर यह संख्या बदल सकती है।

नाम से लिया गया

var elements = document.getElementsByName("zipcode");

elements उनके name विशेषता के साथ "zipcode" पर सेट सभी तत्वों का एक लाइव NodeList (एक सरणी जैसी वस्तु) होगा। यह संग्रह DOM के साथ समन्‍वयित है, इसलिए DOM में किए गए कोई भी परिवर्तन इस संग्रह में दिखाई देते हैं। संग्रह यादृच्छिक पहुँच प्रदान करता है और इसकी लंबाई होती है।

var element = elements[0];
//Alternative
element = elements.item(0);

element में इस नाम के साथ पहला सामना किया गया HTML तत्व है।

var length = elements.length;

length एचटीएमएल तत्वों की संख्या के बराबर है जो वर्तमान में उनके नाम विशेषता के रूप में "ज़िपकोड" है। DOM के बदले जाने पर यह संख्या बदल सकती है।

शुरू करना

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

DOM API के मुख्य कार्यान्वयन वेब ब्राउज़र हैं। विनिर्देशों W3C और WHATWG समूहों द्वारा मानकीकृत हैं, और ऑब्जेक्ट मॉडल प्रोग्रामिंग इंटरफ़ेस के लिए तार्किक मॉडल को निर्दिष्ट करता है।

DOM संरचना का प्रतिनिधित्व एक पेड़ के समान दृश्य जैसा दिखता है, जहां प्रत्येक नोड मार्कअप के एक हिस्से का प्रतिनिधित्व करने वाली एक वस्तु है, इस प्रकार के आधार पर प्रत्येक तत्व विशिष्ट और साझा कार्यात्मकताओं को भी विरासत में मिला है।

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

• किसी दस्तावेज़ का प्रतिनिधित्व और हेरफेर करने के लिए उपयोग किए जाने वाले इंटरफेस और ऑब्जेक्ट
• इन इंटरफेस और वस्तुओं के शब्दार्थ - दोनों व्यवहार और विशेषताओं सहित
• इन इंटरफेस और वस्तुओं के बीच संबंधों और सहयोग

DOM के लोड होने की प्रतीक्षा करें

DOMContentLoaded उपयोग करें जब <script> DOM के साथ इंटरैक्ट करने वाला कोड <head> सेक्शन में शामिल हो। यदि DOMContentLoaded कॉलबैक के अंदर लपेटा नहीं गया है, तो कोड त्रुटियों की तरह फेंक देगा

कुछ null नहीं पढ़ सकता

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

DOMContentLoaded लिए वैकल्पिक

एक वैकल्पिक ( IE8 के लिए उपयुक्त)

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/en/docs/Web/API/Document/readyState}

आंतरिक HTML का उपयोग करें

एचटीएमएल

<div id="app"></div>

जे एस

document.getElementById('app').innerHTML = '<p>Some text</p>'

और अब HTML ऐसा दिखता है

<div id="app">
    <p>Some text</p>
</div>

HTML मार्कअप

उदाहरण इनपुट:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

DOM तत्व आउटपुट:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

उपरोक्त सभी तत्व HTMLElement इंटरफ़ेस से विरासत में मिले हैं और विशिष्ट टैग के आधार पर अनुकूलित किए गए हैं