एचटीएमएल डोम क्या है?
HTML DOM , HTML के लिए एक ऑब्जेक्ट मॉडल है । यह परिभाषित करता है:
- वस्तुओं के रूप में HTML तत्व
- सभी HTML तत्वों के लिए गुण
- सभी HTML तत्वों के लिए तरीके
- सभी HTML तत्वों के लिए ईवेंट
एचटीएमएल डोम जावास्क्रिप्ट के लिए एक एपीआई (प्रोग्रामिंग इंटरफेस) है :
- जावास्क्रिप्ट HTML तत्वों को जोड़/बदल/हटा सकता है
- जावास्क्रिप्ट HTML विशेषताओं को जोड़ / बदल / हटा सकता है
- जावास्क्रिप्ट सीएसएस शैलियों को जोड़/बदल/हटा सकता है
- जावास्क्रिप्ट HTML घटनाओं पर प्रतिक्रिया कर सकता है
- जावास्क्रिप्ट HTML ईवेंट को जोड़/बदल/हटा सकता है
एचटीएमएल डोम (दस्तावेज़ ऑब्जेक्ट मॉडल)
जब कोई वेब पेज लोड होता है, तो ब्राउजर पेज का एक डी ऑक्यूमेंट ओ बीजेक्ट एम ओडेल बनाता है ।
HTML DOM मॉडल का निर्माण वस्तुओं के पेड़ के रूप में किया गया है :
वस्तुओं का HTML DOM ट्री
HTML तत्वों को ढूँढना
जब आप जावास्क्रिप्ट के साथ HTML तत्वों का उपयोग करना चाहते हैं, तो आपको पहले तत्वों को खोजना होगा।
ऐसा करने के कुछ तरीके हैं:
- आईडी द्वारा HTML तत्व ढूँढना
- टैग नाम से HTML तत्व ढूँढना
- वर्ग के नाम से HTML तत्व ढूँढना
- CSS चयनकर्ताओं द्वारा HTML तत्वों को ढूँढना
- HTML ऑब्जेक्ट संग्रह द्वारा HTML तत्व ढूँढना
आईडी द्वारा HTML तत्व ढूँढना
डीओएम में एचटीएमएल तत्व खोजने का सबसे आसान तरीका तत्व आईडी का उपयोग करना है।
यह उदाहरण आईडी = "परिचय" के साथ तत्व ढूंढता है:
उदाहरण
var myElement = document.getElementById("intro");
यदि तत्व पाया जाता है, तो विधि तत्व को ऑब्जेक्ट (myElement में) के रूप में वापस कर देगी।
यदि तत्व नहीं मिला है, तो myElement में शून्य होगा।
टैग नाम से HTML तत्वों को ढूँढना
यह उदाहरण सभी <p> तत्वों को ढूंढता है:
उदाहरण
var x = document.getElementsByTagName("p");
यह उदाहरण आईडी = "मुख्य" के साथ तत्व ढूंढता है, और फिर सभी <p> तत्वों को "मुख्य" के अंदर ढूंढता है:
उदाहरण
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
कक्षा के नाम से HTML तत्वों को ढूँढना
यदि आप समान वर्ग नाम वाले सभी HTML तत्वों को खोजना चाहते हैं, तो getElementsByClassName() का उपयोग करें।
यह उदाहरण वर्ग = "परिचय" वाले सभी तत्वों की सूची देता है।
उदाहरण
var x = document.getElementsByClassName("intro");
वर्ग नाम से तत्वों को ढूँढना Internet Explorer 8 और पुराने संस्करणों में काम नहीं करता है।
CSS चयनकर्ताओं द्वारा HTML तत्वों को ढूँढना
यदि आप सभी HTML तत्वों को खोजना चाहते हैं जो एक निर्दिष्ट CSS चयनकर्ता (आईडी, वर्ग के नाम, प्रकार, विशेषताएँ, विशेषताओं के मान आदि) से मेल खाते हैं, तो querySelectorAll () विधि का उपयोग करें।
यह उदाहरण वर्ग = "परिचय" वाले सभी <p> तत्वों की सूची देता है।
उदाहरण
var x = document.querySelectorAll("p.intro");
querySelectorAll() विधि Internet Explorer 8 और पुराने संस्करणों में काम नहीं करती है।
HTML ऑब्जेक्ट संग्रह द्वारा HTML तत्वों को ढूँढना
HTML ऑब्जेक्ट संग्रह भी पहुँच योग्य हैं:
एचटीएमएल डोम ट्यूटोरियल
पूर्ण HTMLDOM ट्यूटोरियल
यह HTMLDOM का संक्षिप्त परिचय है।
संपूर्ण HTMLDOM ट्यूटोरियल के लिए W3Schools HTMLDOM Tutorial पर जाएं ।