डोम ईलेमेन्ट (DOM Element)

यसमा हामी HTML पेजमा डोम ईलेमेन्टहरु कसरी खोज्ने भन्ने बारेमा अध्ययन गर्नेछौ ।

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

<p class="paragraphclass" id="paraid">Hello ! world</p>

माथि दिएको उदाहरण हेल्लो वर्ल्ड भन्ने टेक्स्ट रहेको प्यारा ग्राफलाई आफ्नो आवश्यकता अनुसार विभिन्न तरिकाले खोज्न सक्छौ । जस्तो

const element = document.getElementById("paraid");
const element = document.getElementsByTagName("p");
const element = document.getElementsByClassName("paragraphclass");
const element = document.querySelectorAll("p.paragraphclass");

कुनै पनि एउटा आइडी एउटा मात्र HTML ईलेमेन्टलाई प्रयोग गरिन्छ । त्यसैले document.getElementById("paraid"); प्रयोग गर्दा paraid प्रयोग भएको ईलेमेन्टलाई खोज्छ भने document.getElementsByTagName("p"); प्रयोग गर्दा सबै प्रयोग भएको ईलेमेन्टहरु खोज्छ । त्यस्तो त्यसले एक भन्दा बढी पनि भेट्न सक्दछ । document.getElementsByClassName("paragraphclass"); को प्रयोगले कुनै पनि ईलेमेन्ट जसमा paragraphclass प्रयोग भएको छ त्यसलाई देखाउने काम गर्दछ । धेरै वटा ईलेमेन्ट छन् त त्यसमा विभिन्न क्लासहरू प्रयोग भए छ भने document.querySelectorAll("p.paragraphclass"); ले paragraphclass क्लास प्रयोग भएको ईलेमेन्ट उठाउने काम गर्दछ ।

जाभास्क्रीफ्ट HTML डोम

पछिल्लो उदाहरणलाई एक छिन सम्झना गरौँ ।

<p class="paragraphclass" id="paraid">Hello ! world</p>

माथि उदाहरणमा ईलेमेन्ट मा भएको टेक्स्टलाई परिवर्तन गर्ने हो भने सबै भन्दा पहिले आफूले टेक्स्ट गर्न चाहेको HTML ईलेमेन्ट खोज्ने अनि त्यसमा innerHTML भन्ने प्रपर्टिज प्रयोग गर्ने । जस्तो

const element = document.getElementById("paraid");
element.innerHTML = "New text!";

// document.getElementById("paraid").innerHTML = "New text!";

माथिको उदाहरणमा ट्याग भित्रको टेक्स्ट परिवर्तन भएको New text! हुन्छ । यहाँ document.getElementById("paraid") ले ईलेमेन्ट खोज्ने काम गरेको छ भने innerHTML भन्ने प्रपर्टिजले त्यस भित्र के टेक्स्ट राख्ने हो त्यो दिएको छ ।