जावास्क्रिप्ट एचटीएमएल डोम तत्व
यह पृष्ठ आपको सिखाता है कि किसी HTML पृष्ठ में HTML तत्वों को कैसे ढूँढ़ें और उन तक कैसे पहुँचें।
HTML तत्वों को ढूँढना
अक्सर, जावास्क्रिप्ट के साथ, आप HTML तत्वों में हेरफेर करना चाहते हैं।
ऐसा करने के लिए, आपको पहले तत्वों को खोजना होगा। इसे करने बहुत सारे तरीके हैं:
- आईडी द्वारा HTML तत्व ढूँढना
- टैग नाम से HTML तत्व ढूँढना
- वर्ग के नाम से HTML तत्व ढूँढना
- CSS चयनकर्ताओं द्वारा HTML तत्वों को ढूँढना
- HTML ऑब्जेक्ट संग्रह द्वारा HTML तत्व ढूँढना
आईडी द्वारा HTML तत्व ढूँढना
डीओएम में एचटीएमएल तत्व खोजने का सबसे आसान तरीका तत्व आईडी का उपयोग करना है।
यह उदाहरण तत्व को ढूंढता है id="intro":
उदाहरण
const element = document.getElementById("intro");
यदि तत्व पाया जाता है, तो विधि तत्व को एक वस्तु (तत्व में) के रूप में वापस कर देगी।
यदि तत्व नहीं मिला है, तो तत्व में शामिल होगा null।
टैग नाम से HTML तत्वों को ढूँढना
यह उदाहरण सभी <p>तत्वों को ढूंढता है:
उदाहरण
const element = document.getElementsByTagName("p");
यह उदाहरण तत्व को ढूंढता है id="main", और उसके बाद सभी <p>तत्वों को अंदर ढूंढता है "main":
उदाहरण
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
कक्षा के नाम से HTML तत्वों को ढूँढना
यदि आप समान वर्ग नाम वाले सभी HTML तत्वों को खोजना चाहते हैं, तो
getElementsByClassName().
यह उदाहरण उन सभी तत्वों की सूची देता है जिनमें class="intro".
उदाहरण
const x = document.getElementsByClassName("intro");
CSS चयनकर्ताओं द्वारा HTML तत्वों को ढूँढना
यदि आप सभी HTML तत्वों को खोजना चाहते हैं जो एक निर्दिष्ट CSS चयनकर्ता (आईडी, वर्ग के नाम, प्रकार, विशेषताएँ, विशेषताओं के मान, आदि) से मेल खाते हैं, तो querySelectorAll()विधि का उपयोग करें।
यह उदाहरण उन सभी <p>तत्वों की सूची देता है जिनमें class="intro".
उदाहरण
const x = document.querySelectorAll("p.intro");
HTML ऑब्जेक्ट संग्रह द्वारा HTML तत्वों को ढूँढना
यह उदाहरण id="frm1"प्रपत्र संग्रह में प्रपत्र तत्व को ढूंढता है, और सभी तत्व मान प्रदर्शित करता है:
उदाहरण
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
निम्नलिखित HTML ऑब्जेक्ट (और ऑब्जेक्ट संग्रह) भी पहुंच योग्य हैं: