इस अध्याय में, हम सीखेंगे कि कैसे DOM एलिमेंट्स को सेलेक्ट किया जाता है। जावा स्क्रिप्ट का उपयोग करके आप विभिन्न तरीकों से HTML डॉक्यूमेंट के एलिमेंट्स को सेलेक्ट कर सकते हैं। यह ज्ञान आपके लिए बहुत महत्वपूर्ण है क्योंकि DOM मैनिपुलेशन के लिए सही एलिमेंट्स का चयन करना आवश्यक है।
जावा स्क्रिप्ट में तत्व का चयन करने के कई तरीके हैं, जिनका उपयोग आप HTML डॉक्यूमेंट में मौजूद विभिन्न एलिमेंट्स को सेलेक्ट करने के लिए कर सकते हैं। यहाँ कुछ प्रमुख तरीके दिए गए हैं:
1. getElementById का उपयोग (Using getElementById)
यह मेथड HTML डॉक्यूमेंट में किसी एलिमेंट को उसके आईडी (ID) द्वारा सेलेक्ट करता है।
let element = document.getElementById("elementId");
2. getElementsByClassName का उपयोग (Using getElementsByClassName)
यह मेथड HTML डॉक्यूमेंट में सभी एलिमेंट्स को सेलेक्ट करता है जिनमें निर्दिष्ट क्लास (class) होती है।
let elements = document.getElementsByClassName("className");
3. getElementsByTagName का उपयोग (Using getElementsByTagName)
यह मेथड HTML डॉक्यूमेंट में सभी एलिमेंट्स को सेलेक्ट करता है जिनका टैग नाम (tag name) निर्दिष्ट होता है।
let elements = document.getElementsByTagName("tagName");
4. querySelector का उपयोग (Using querySelector)
यह मेथड HTML डॉक्यूमेंट में पहला एलिमेंट सेलेक्ट करता है जो निर्दिष्ट CSS सेलेक्टर से मेल खाता है।
let element = document.querySelector("selector");
5. querySelectorAll का उपयोग (Using querySelectorAll)
यह मेथड HTML डॉक्यूमेंट में सभी एलिमेंट्स को सेलेक्ट करता है जो निर्दिष्ट CSS सेलेक्टर से मेल खाते हैं।
let elements = document.querySelectorAll("selector");
getElementById का उपयोग (Using getElementById)
सिंटैक्स:
document.getElementById(id);
पैरामीटर्स:
id(आवश्यक): एलिमेंट का आईडी जो सेलेक्ट करना है।
रिटर्न वैल्यू:
- यह उस एलिमेंट को रिटर्न करता है जिसका आईडी दिया गया है। अगर कोई एलिमेंट नहीं मिलता, तो यह
nullरिटर्न करता है।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<script>
let element = document.getElementById("title");
document.write("<p>Selected Element: " + element.innerHTML + "</p>"); // Output: Selected Element: Hello, World!
</script>
</body>
</html>getElementsByClassName का उपयोग (Using getElementsByClassName)
सिंटैक्स:
document.getElementsByClassName(className);
पैरामीटर्स:
className(आवश्यक): क्लास का नाम जिसे सेलेक्ट करना है।
रिटर्न वैल्यू:
- यह एक HTMLCollection रिटर्न करता है जिसमें सभी एलिमेंट्स होते हैं जिनमें निर्दिष्ट क्लास होती है।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<script>
let elements = document.getElementsByClassName("text");
document.write("<p>Number of elements: " + elements.length + "</p>"); // Output: Number of elements: 2
</script>
</body>
</html>getElementsByTagName का उपयोग (Using getElementsByTagName)
सिंटैक्स:
document.getElementsByTagName(tagName);
पैरामीटर्स:
tagName(आवश्यक): टैग का नाम जिसे सेलेक्ट करना है।
रिटर्न वैल्यू:
- यह एक HTMLCollection रिटर्न करता है जिसमें सभी एलिमेंट्स होते हैं जिनका निर्दिष्ट टैग होता है।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName Example</title>
</head>
<body>
<div>Div 1</div>
<div>Div 2</div>
<script>
let elements = document.getElementsByTagName("div");
document.write("<p>Number of divs: " + elements.length + "</p>"); // Output: Number of divs: 2
</script>
</body>
</html>querySelector और querySelectorAll का उपयोग (Using querySelector and querySelectorAll)
querySelector
सिंटैक्स:
document.querySelector(selector);
पैरामीटर्स:
selector(आवश्यक): CSS सेलेक्टर जिसे सेलेक्ट करना है।
रिटर्न वैल्यू:
- यह पहला एलिमेंट रिटर्न करता है जो निर्दिष्ट CSS सेलेक्टर से मेल खाता है। अगर कोई एलिमेंट नहीं मिलता, तो यह
nullरिटर्न करता है।
- यह पहला एलिमेंट रिटर्न करता है जो निर्दिष्ट CSS सेलेक्टर से मेल खाता है। अगर कोई एलिमेंट नहीं मिलता, तो यह
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>querySelector Example</title>
</head>
<body>
<h1 class="title">Hello, World!</h1>
<script>
let element = document.querySelector(".title");
document.write("<p>Selected Element: " + element.innerHTML + "</p>"); // Output: Selected Element: Hello, World!
</script>
</body>
</html>querySelectorAll
सिंटैक्स:
document.querySelectorAll(selector);
पैरामीटर्स:
selector(आवश्यक): CSS सेलेक्टर जिसे सेलेक्ट करना है।
रिटर्न वैल्यू:
- यह एक NodeList रिटर्न करता है जिसमें सभी एलिमेंट्स होते हैं जो निर्दिष्ट CSS सेलेक्टर से मेल खाते हैं।
उदाहरण (Example):
<!DOCTYPE html>
<html>
<head>
<title>querySelectorAll Example</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<script>
let elements = document.querySelectorAll(".text");
document.write("<p>Number of elements: " + elements.length + "</p>"); // Output: Number of elements: 2
</script>
</body>
</html>इस अध्याय में, हमने विभिन्न तरीकों से DOM एलिमेंट्स को सेलेक्ट करने के बारे में सीखा। अगले अध्याय में, हम DOM में कंटेंट और एट्रिब्यूट्स को बदलने के बारे में जानेंगे।
