इस सीरीज़ के परिचय में कहा गया है, "एचटीएमएल एलिमेंट ऐसे नोड हैं जो दस्तावेज़ ऑब्जेक्ट मॉडल बनाते हैं." हमने एलिमेंट नोड के टाइप पर चर्चा की है. इस सेक्शन में हमने उन एलिमेंट एपीआई पर चर्चा की है जो उन नोड को क्वेरी करने की सुविधा देते हैं.
DOM और AOM
डीओएम, दस्तावेज़ों को ऐक्सेस करने और उनमें बदलाव करने के लिए एक एपीआई है. DOM, दस्तावेज़ के सभी नोड का ट्री होता है. कुछ नोड में बच्चे हो सकते हैं और कुछ में नहीं. ट्री में एलिमेंट के साथ-साथ उनकी विशेषताएं और टेक्स्ट नोड भी शामिल होते हैं.
ब्राउज़र टूल ऊपर दिए गए ट्री विज़ुअलाइज़ेशन की तरह आपको ट्री विज़ुअलाइज़ेशन नहीं देते. हालांकि, एलिमेंट इंस्पेक्टर में नोड दिख सकते हैं.
सुलभता ट्री ही ब्राउज़र डेवलपर टूल में इसी तरह के ट्री प्रतिनिधित्व की जांच की जा सकती है. एओएम, डीओएम पर आधारित होता है. इसी तरह, सुलभता ट्री में ऐसे ऑब्जेक्ट होते हैं जो सभी मार्कअप एलिमेंट, एट्रिब्यूट, और टेक्स्ट नोड दिखाते हैं:
एचटीएमएल एलिमेंट एपीआई
DOM का बीच का अक्षर "object" है. ज़्यादातर इंट्रो से लेकर ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग क्लास तक, person
या car
ऑब्जेक्ट के उदाहरण की तरह ही, डॉक्यूमेंट ट्री का हर नोड एक ऐसा ऑब्जेक्ट है जिसमें JavaScript की मदद से बदलाव किया जा सकता है.
ब्राउज़र कई एपीआई उपलब्ध कराता है. इनमें नेटिव तौर पर इस्तेमाल किए जा सकने वाले तरीके, इवेंट, और प्रॉपर्टी की क्वेरी करने और उसे अपडेट करने की सुविधा शामिल है.
एलिमेंट नोड में एलिमेंट पर सेट किए गए सभी एट्रिब्यूट के बारे में जानकारी होती है. किसी एलिमेंट के एट्रिब्यूट के बारे में जानकारी ऐक्सेस करने के लिए, एचटीएमएल इंटरफ़ेस का इस्तेमाल किया जा सकता है. उदाहरण के लिए, हम सभी इमेज के लिए HTMLImageElement.alt
का इस्तेमाल करके, alt
एट्रिब्यूट की वैल्यू पा सकते हैं:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
एचटीएमएल इंटरफ़ेस, एलिमेंट के एट्रिब्यूट को ऐक्सेस करने के साथ-साथ और भी बहुत कुछ उपलब्ध कराते हैं. लेआउट के हिसाब से, अपने पेज के हर सेक्शन की ऊंचाई का पता लगाने के लिए, हमें रीड-ओनली HTMLElement.offsetHeight
मिल सकता है.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
अगर उपयोगकर्ता अपने डिवाइस का ओरिएंटेशन बदलता है या व्यूपोर्ट की चौड़ाई में किसी तरह का बदलाव करता है, तो हर <section>
की ऊंचाई बदल जाएगी. साथ ही, डीओएम प्रॉपर्टी अपने-आप अपडेट हो जाएंगी.
एचटीएमएल इंटरफ़ेस एपीआई का इस्तेमाल, एट्रिब्यूट की वैल्यू ऐक्सेस करने के लिए ही किया जा सकता है. डीओएम, यूज़र इंटरफ़ेस (यूआई) की मौजूदा स्थिति के बारे में अहम जानकारी देता है.
एचटीएमएल एपीआई इस पूरी जानकारी को ऐक्सेस कर सकते हैं. आप वीडियो की अवधि देख सकते हैं, जहां मौजूदा वीडियो चल रहा है और जहां व्यू चल रहा है. साथ ही, यह भी देखा जा सकता है कि वीडियो (या ऑडियो) HTMLMediaElement.duration
, HTMLMediaElement.currentTime
, और HTMLMediaElement.ended
में खत्म हो गया है या नहीं.
उपलब्ध एलिमेंट इंटरफ़ेस
इस सीरीज़ में अब तक हमने जिन एचटीएमएल एलिमेंट के बारे में बताया है उनमें से कुछ सेक्शनिंग एलिमेंट के अलावा, बाकी सभी एचटीएमएल एलिमेंट में उनसे जुड़ा DOM इंटरफ़ेस है. सभी एलिमेंट के बेस इंटरफ़ेस का नाम एलिमेंट होता है.
HTMLElement
, एलिमेंट से इनहेरिट किया जाता है और एचटीएमएल एलिमेंट के हिसाब से बने सभी इंटरफ़ेस से इनहेरिट किए जाते हैं. कुछ एलिमेंट वाले इंटरफ़ेस, एक से ज़्यादा मिलते-जुलते एलिमेंट से लागू किए जाते हैं.
इंटरफ़ेस में ये शामिल हैं:
HTMLAnchorElement
-<a>
HTMLAreaElement
-<area>
HTMLAudioElement
-<audio>
HTMLBaseElement
-<base>
HTMLButtonElement
-<button>
HTMLCanvasElement
-<canvas>
HTMLDataElement
-<data>
HTMLDataListElement
-<datalist>
HTMLDetailsElement
-<details>
HTMLDialogElement
-<dialog>
HTMLEmbedElement
-<embed>
HTMLFieldSetElement
-<fieldset>
HTMLFormElement
-<form>
HTMLHtmlElement
-<html>
HTMLIFrameElement
-<iframe>
HTMLImageElement
-<img>
HTMLInputElement
-<input>
HTMLLabelElement
-<label>
HTMLLegendElement
-<legend>
HTMLLIElement
-<li>
HTMLLinkElement
-<link>
HTMLMapElement
-<map>
HTMLMediaElement
-<audio>
,<video>
HTMLMenuElement
-<menu>
HTMLMetaElement
-<meta>
HTMLMeterElement
-<meter>
HTMLModElement
-<ins>
,<del>
HTMLObjectElement
-<object>
HTMLOListElement
-<ol>
HTMLOptGroupElement
से<optgroup>
तकHTMLOptionElement
-<option>
HTMLOutputElement
-<output>
HTMLPictureElement
-<picture>
HTMLProgressElement
-<progress>
HTMLQuoteElement
-<q>
,<blockquote>
,<cite>
HTMLScriptElement
-<script>
HTMLSelectElement
-<select>
HTMLSlotElement
-<slot>
HTMLSourceElement
-<source>
HTMLStyleElement
-<style>
HTMLTableCellElement
-<td>
,<th>
HTMLTableColElement
-<col>
,<colgroup>
HTMLTableElement
-<table>
HTMLTableRowElement
-<tr>
HTMLTableSectionElement
-<thead>
,<tbody>
,<tfoot>
HTMLTemplateElement
-<template>
HTMLTextAreaElement
-<textarea>
HTMLTimeElement
-<time>
HTMLTitleElement
-<title>
HTMLTrackElement
-<track>
HTMLVideoElement
-<video>
नाम रखने की परंपरा "एचटीएमएल" है. इसके बाद, अपर ऊंट केस में एलिमेंट या एलिमेंट का ग्रुप होता है और उसके बाद "एलिमेंट" होता है. लेकिन एलिमेंट या एलिमेंट के ग्रुप में कोई सटीक पैटर्न नहीं होता. चिंता मत करो। इन्हें याद रखने की ज़रूरत नहीं है. यह जानना ज़रूरी है कि ये बैज मौजूद हैं, ताकि ज़रूरत पड़ने पर आप इन्हें देख सकें.
अगर आपके पास एलिमेंट का कलेक्शन है, तो कलेक्शन इंटरफ़ेस भी उपलब्ध होते हैं. उदाहरण के लिए, HTMLCollection.namedItem()
वाला तरीका, कलेक्शन में वह पहला एलिमेंट दिखाता है जिसका id
या name
एट्रिब्यूट, पैरामीटर से मैच करता है. अगर कोई एलिमेंट मैच नहीं करता, तो यह वैल्यू शून्य होती है.
HTMLElement
के अलावा, 30 से ज़्यादा एलिमेंट में कोई जुड़ा हुआ DOM इंटरफ़ेस नहीं है. इसमें <address>
, <article>
,
<section>
, <nav>
, <header>
, <footer>
, <aside>
, और <hgroup>
शामिल हैं. ऐसे कई एलिमेंट जो बंद न किए गए और नॉन-ग्लोबल एट्रिब्यूट के साथ काम नहीं करते हैं, उनमें एलिमेंट से जुड़े इंटरफ़ेस होते हैं, जैसे कि HTMLPElement
(<p>
एलिमेंट) और HTMLUnknownElement
( <😃>
या ऐसा कोई भी एलिमेंट जो तय नहीं किया गया है). हालांकि, वे इंटरफ़ेस HTMLElement
से इनहेरिट की गई प्रॉपर्टी और तरीकों में सबसे ऊपर, कोई अतिरिक्त प्रॉपर्टी या तरीका लागू नहीं करते और उन्हें ऊपर सूची में शामिल नहीं किया गया है.
एपीआई के ग़ैर-ज़रूरी तरीके और प्रॉपर्टी
अगर किसी इंटरफ़ेस का तरीका या प्रॉपर्टी का नाम वही है जो वह इनहेरिट करता है, तो इनहेरिट करने वाला तरीका या प्रॉपर्टी इनहेरिट किए गए तरीके या प्रॉपर्टी की जगह ले लेगी. जब हमने ऊपर दी गई alt
और offsetHeight
प्रॉपर्टी को imageInstance.alt
और sectionInstance.offsetHeight
के साथ ऐक्सेस किया, तो कोड से यह पता नहीं चल पाया कि किस एपीआई को ऐक्सेस किया जा रहा था.
आम तौर पर, इन दो उदाहरणों की तरह यह भी कोई समस्या नहीं है. हालांकि, यह हो भी सकता है. उदाहरण के लिए, HTMLCollection.length
रीड ओनली है, जबकि इनहेरिटिंग HTMLOptionsCollection
इंटरफ़ेस की लंबाई वाली प्रॉपर्टी (सिर्फ़ <select>
की options
प्रॉपर्टी से दिखाई जाती है) का इस्तेमाल, कलेक्शन का साइज़ सेट करने के लिए भी किया जा सकता है.
अन्य इंटरफ़ेस
ऐसे कुछ और इंटरफ़ेस हैं जो डीओएम नोड के ब्रांच की लोकेशन में बदलाव करने की सुविधा देते हैं. EventTarget
इंटरफ़ेस,
हमें addEventListener()
और removeEventListener()
की सुविधा देता है. इसे Node
और Window
इंटरफ़ेस से इनहेरिट किया गया है. इससे एलिमेंट, दस्तावेज़, और Documentफ़्रैगमेंट (जिनके बारे में हमने कस्टम एलिमेंट में देखा था) इंटरफ़ेस, नोड से इनहेरिट किए जाते हैं और एचटीएमएल एलिमेंट इंटरफ़ेस, एलिमेंट से इनहेरिट किया जाता है.
node
इंटरफ़ेस
हर तरह का डीओएम नोड, Node
पर आधारित इंटरफ़ेस से दिखाया जाता है. इससे डीओएम ट्री से जुड़े एलिमेंट के तौर पर जानकारी और तरीके मिलते हैं. Node
इंटरफ़ेस की मदद से, क्वेरी की जा सकती है और नोड ट्री में नोड जोड़े जा सकते हैं.
डगलस क्रॉकफ़ोर्ड का मशहूर "वॉक द डीओएम" फ़ंक्शन, नोड की firstChild
और nextSibling
प्रॉपर्टी का इस्तेमाल करता है.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
हमने कस्टम एलिमेंट तय करने के लिए, नोड के appendChild()
और cloneNode()
तरीकों का इस्तेमाल किया.
नोड इंटरफ़ेस में डीओएम के बारे में क्वेरी करने और उसमें बदलाव करने के लिए कई उपयोगी प्रॉपर्टी और तरीके मौजूद हैं.
customElements.define('star-rating',
class extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
const starRating = document.getElementById('star-rating-template').content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(starRating.cloneNode(true));
}
});
attachShadow()
वाला तरीका, एलिमेंट इंटरफ़ेस का एक तरीका है. Shadow DOM API के लिए भी shadowRoot
इंटरफ़ेस होता है, जिसे किसी दस्तावेज़ के मुख्य DOM ट्री से अलग तरीके से रेंडर किया जाता है.
Document
और HTMLDocument
इंटरफ़ेस
Document
इंटरफ़ेस Node
से इनहेरिट किया जाता है. यह, ब्राउज़र में लोड किए गए वेब पेज को दिखाता है, चाहे दस्तावेज़ एचटीएमएल, SVG, एक्सएमएल, MathML या कोई दूसरा हो. Document
इंटरफ़ेस,
HTMLDocument
इंटरफ़ेस से भी शामिल होता है.
document
की मदद से, नोड टाइप को तुरंत ऐक्सेस किया जा सकता है. साथ ही, document.body
और document.styleSheets
जैसे खास तरह के एलिमेंट का कलेक्शन बनाने की सुविधा भी मिलती है. HTMLDocument की मदद से, दस्तावेज़ से जुड़ी उस जानकारी को ऐक्सेस किया जा सकता है जो एचटीएमएल नोड में नहीं होती. जैसे, Document.location
, Document.lastModified
, और Document.Cookie
.
दस्तावेज़ के इंटरफ़ेस में दिखने वाली सुविधाओं के आधार पर, कई एपीआई उपलब्ध हैं. इनमें खींचने और छोड़ने का एपीआई और FullScreen API शामिल है. दोनों को Element
से इनहेरिट किया जाता है.
Window
इंटरफ़ेस
विंडो इंटरफ़ेस में, डीओएम के अलावा दुनिया भर में उपलब्ध आइटम शामिल होते हैं. इनका इस्तेमाल करके, डीओएम में बदलाव किया जा सकता है. विंडो, फ़ंक्शन, नेमस्पेस, ऑब्जेक्ट, और कंस्ट्रक्टर की जानकारी देती है. इन्हें एमडीएन की JavaScript और डीओएम रेफ़रंस में दर्ज किया जाता है.
विंडो इंटरफ़ेस, उस ऑब्जेक्ट के लिए एपीआई है जिसमें दस्तावेज़ मौजूद है. ग्लोबल window
ऑब्जेक्ट, वह विंडो है जिसमें
स्क्रिप्ट चल रही होती है. हर ब्राउज़र टैब में उसका अपना विंडो ऑब्जेक्ट होता है. विंडो इंटरफ़ेस, टैब के कॉन्टेंट के साथ-साथ पूरी विंडो और डिवाइस के बारे में क्वेरी कर सकता है. उदाहरण के लिए, resizeTo()
तरीके का इस्तेमाल करके, ब्राउज़र विंडो का साइज़ बदला जा सकता है. devicePixelRatio
प्रॉपर्टी से, डिवाइस के डिसप्ले पिक्सल का ऐक्सेस मिलता है. टैब में दिखने वाले डीओएम ट्री के बजाय कॉन्टेंट वाले टैब के बारे में जानकारी ऐक्सेस करते समय, यह विंडो शायद एक ऐसा इंटरफ़ेस हो जो आपको चाहिए.
कई एपीआई, विंडो इंटरफ़ेस में दिखने वाली सुविधाओं के आधार पर उपलब्ध हैं. इनमें वेब वर्कर और IndexedDB एपीआई शामिल हैं.
जांचें कि आपको कितना समझ आया
एचटीएमएल एपीआई के बारे में अपनी जानकारी की जांच करें.
DOM में O का क्या मतलब है?
कॉन्टेंट वाले टैब के बारे में जानकारी पाने में, किस इंटरफ़ेस से आपको मदद मिल सकती है?