जावास्क्रिप्ट हार्ड कोड डॉम एलीमेंट

इस चाप में, आपको HTML पृष्ठ में HTML एलिमेंटों को खोजने और अद्यतन करने के तरीकों को सिखाया जाएगा。

HTML एलिमेंट खोजें

सामान्यतया, JavaScript के द्वारा, आपको HTML एलिमेंटों का ऑपरेशन करना होगा。

इस लक्ष्य को प्राप्त करने के लिए, आपको पहले इन एलिमेंटों को खोजना होगा। इस काम को पूरा करने के लिए कई तरीके हैं:

  • id के द्वारा HTML एलिमेंट खोजें
  • टैग नाम के द्वारा HTML एलिमेंट खोजें
  • CSS चयनकर्ता के द्वारा HTML एलिमेंट खोजें
  • CSS चयनकर्ता के द्वारा HTML एलिमेंट खोजें
  • HTML ऑब्जैक्ट सेट के द्वारा HTML एलिमेंट खोजें

id के द्वारा HTML एलिमेंट खोजें

DOM में HTML एलिमेंट खोजने का सबसे सरल तरीका, एलिमेंट के id का उपयोग करना है。

इस उदाहरण में id="intro" के एलिमेंट को खोजा जाता है:

इंस्टेंस

var myElement = document.getElementById("intro");

खुद अभ्यास करें

यदि एलिमेंट खोजा गया, तो इस विधि से एक ऑब्जैक्ट वापस किया जाता है (myElement में)。

यदि एलिमेंट नहीं मिला, तो myElement में null。

टैग नाम के द्वारा HTML एलिमेंट खोजें

इस उदाहरण में सभी <p> एलिमेंट:

इंस्टेंस

var x = document.getElementsByTagName("p");

खुद अभ्यास करें

इस उदाहरण में id="main" के एलिमेंट को खोजा जाता है, फिर "main" में सभी <p> एलिमेंट:

इंस्टेंस

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

खुद अभ्यास करें

CSS चयनकर्ता के द्वारा HTML एलिमेंट खोजें

अगर आप एक ही क्लास नाम के सभी HTML एलिमेंटों को खोजना चाहते हैं, तो getElementsByClassName()。

इस उदाहरण में class="intro" वाले सभी एलिमेंटों की लिस्ट वापस की जाती है:

इंस्टेंस

var x = document.getElementsByClassName("intro");

खुद अभ्यास करें

इंटरनेट एक्सप्लोरर 8 और उससे पहले की संस्करणों के लिए अनुप्रयुक्त नहीं है。

CSS चयनकर्ता के द्वारा HTML एलिमेंट खोजें

अगर आप निर्दिष्ट CSS चयनकर्ता (id, class name, तरीका, गुण, गुण मूल्य आदि) से मेल खाने वाले सभी HTML एलिमेंटों को खोजना चाहते हैं, तो querySelectorAll() विधियाँ।

इस उदाहरण में class="intro" के सभी <p> एलिमेंट लिस्ट:

इंस्टेंस

var x = document.querySelectorAll("p.intro");

खुद अभ्यास करें

querySelectorAll() इंटरनेट एक्सप्लोरर 8 और उससे पहले की संस्करणों के लिए अनुप्रयुक्त नहीं है。

एचटीएमएल ऑब्जैक्ट सेलेक्टर के द्वारा एचटीएमएल ऑब्जैक्ट खोजने के लिए

इस इंस्टेंस में, id="frm1" के form एलीमेंट को फॉर्म्स सेट में खोजा गया है, फिर सभी एलीमेंट वैल्यू प्रदर्शित किए गए हैं:

इंस्टेंस

वार एक्स = डॉक्युमेंट.फॉर्म्स["frm1"];
वार टेक्स्ट = "";
 वार आई;
फ़ोर (आई = 0; आई < एक्स.लैंग्थ; आई++) {
    टेक्स्ट += एक्स.एलीमेंट्स[i].वैल्यू + "<br>";
}
डॉक्युमेंट.getElementById("demo").innerHTML = टेक्स्ट;

खुद अभ्यास करें

नीचे दिए गए एचटीएमएल ऑब्जैक्ट (और ऑब्जैक्ट सेट) भी पहुँच्ये हैं: