HTML DOM
डिस्क पर HTML फ़ाइल सिर्फ़ अक्षर रखती है। ब्राउज़र उसी फ़ाइल से एक जीवित पेड़ बनाता है, और उसी पेड़ का नाम DOM है। स्टॉप के शीशे पर दो पंक्तियाँ हैं: शीर्षक Market और नोट Stand clear। खुले पेज के साथ document पहले से होता है। new document() त्रुटि फेंकता है, और new Document() एक खाली दस्तावेज़ है, यह बोर्ड नहीं।
यह पेड़ है, गोल संख्या नहीं
Math वाले पेज पर एक साझे ऑब्जेक्ट से संख्या मिलती थी। यहाँ न चौड़ाई गोल होती है और न new Date से कोई पल बनता है। document से नीचे उतरो: html एलिमेंट, फिर head के बगल body, फिर शीर्षक के बगल नोट। एक से ज़्यादा तरीकों से चुनना, मार्कअप बदलना, और नई नोड बनाना बाद के पेजों पर है। यह पेज आकार सीखता है और दो नोड पढ़ता है।
हर टुकड़ा बोर्ड पर कहाँ है
हर पंक्ति एक जगह है जिस पर उँगली रख सकते हो। आखिरी कॉलम वही गड़बड़ी है जो दूसरी जगह ले जाती है।
📊 इस बोर्ड की जगहें
| जगह | हाथ में क्या है | इस बोर्ड पर | आसानी से उलझता है |
|---|---|---|---|
document |
खुद पेड़ | प्रवेश, बिना टैग नाम | उसे body समझना |
document.documentElement |
html एलिमेंट | टैग HTML |
उसे शीर्षक कहना |
document.head |
head एलिमेंट | body का भाई | Market को यहीं ढूँढना |
document.body |
body एलिमेंट | शीर्षक का पिता | एक टेक्स्ट नोड |
h1#stop |
शीर्षक एलिमेंट | पाठ Market |
डिस्क पर सहेजी फ़ाइल |
| शीर्षक के अंदर का पाठ | सिर्फ़ अक्षर | शब्द Market | ऐसा एलिमेंट जिसके पास id हो |
शीर्षक और नोट दोनों body के एलिमेंट बच्चे हैं, इसलिए वे भाई-बहन हैं। शब्द Market नोट का भाई नहीं है। वह शीर्षक के अंदर पाठ है। tagName बड़े अक्षरों में लौटता है, इसलिए html एलिमेंट HTML कहता है। document नोड का न टैग है और न पिता एलिमेंट।
पेड़ के ऊपर तीन नाम
ये तीन प्रॉपर्टी बाहरी एलिमेंटों का नाम बताती हैं। इनमें से कोई शीशे वाला शीर्षक नहीं है।
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
तीन पंक्तियाँ हैं: HTML, HEAD, और BODY। head और body दोनों html एलिमेंट के बच्चे हैं, इसलिए भाई-बहन हैं। Market head के अंदर नहीं है। head का टैब शीर्षक शीशे वाले शीर्षक से अलग स्ट्रिंग है।
शीर्षक का परिवार
id stop शीर्षक एलिमेंट की मूठ है। उसका पिता एलिमेंट body है। अगला एलिमेंट भाई नोट है।
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
पहली पंक्ति BODY है। दूसरी note। nextElementSibling लाइन ब्रेक को छोड़कर पैराग्राफ पर रुकता है। पिछला एलिमेंट भाई null है, क्योंकि body में शीर्षक से पहले कोई एलिमेंट नहीं है।
शब्द अलग, मूठ अलग
एलिमेंट पढ़ना और अक्षर पढ़ना एक बात नहीं।
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
पहली पंक्ति Market है। दूसरी stop। textContent अक्षर हैं। id मूठ है। नोट कहता है Stand clear, और वह स्ट्रिंग शीर्षक पर नहीं है।
पहले एलिमेंट, फिर हर नोड
children सिर्फ़ एलिमेंट बच्चों को गिनता है। childNodes टेक्स्ट नोड भी गिनता है, जिनमें बोर्ड फ़ाइल के लाइन ब्रेक शामिल हैं। इसे ऐसे body पर चलाओ जिसमें सिर्फ़ शीर्षक और नोट हों, इस पाठ पेज पर नहीं और नीचे वाली रिपोर्ट फ़ाइल पर नहीं।
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
शीर्षक से पहले एक ब्रेक, दोनों एलिमेंटों के बीच एक, और नोट के बाद एक: तब children.length 2 है और childNodes.length 5। अतिरिक्त तीन नोड पाठ हैं और उनमें सिर्फ़ खाली जगह है। दोनों टैग एक पंक्ति में चिपका दो तो वे टेक्स्ट नोड हट जाते हैं और दोनों लंबाइयाँ मिल जाती हैं।
एक नाम जो बोर्ड पर नहीं है
ऐसी id माँगो जो फ़ाइल ने कभी नहीं लिखी।
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
पहली पंक्ति null है। दूसरी false है, क्योंकि stop मौजूद है। null का मतलब है कोई एलिमेंट नहीं, खाली शीर्षक नहीं। textContent में नई स्ट्रिंग डालने से ब्राउज़र का जीवित पेड़ बदलता है। डिस्क की HTML फ़ाइल अब भी Market कहती है।
पेज पर एक पंक्ति
तीसरा पैराग्राफ पिता का टैग और शीर्षक का पाठ दिखाता है। स्क्रिप्ट body के अंत में है, जब वे एलिमेंट बन चुके होते हैं।
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
पैराग्राफ पढ़ता है BODY / Market। इस फ़ाइल में स्क्रिप्ट से पहले body में तीन एलिमेंट हैं, इसलिए लंबाई 2 यहाँ की नहीं है। script एलिमेंट भी एक बच्चा है। अगला पेज एलिमेंट को एक से ज़्यादा रास्तों से चुनता है।
बोर्ड खुद जाँचो
- तीन बाहरी टैग नाम लिखो और HTML, फिर HEAD, फिर BODY की उम्मीद रखो
- शीर्षक के पिता का टैग लिखो और BODY की उम्मीद रखो
- अगले एलिमेंट भाई की id लिखो और note की उम्मीद रखो
- शीर्षक का पाठ लिखो और Market की उम्मीद रखो, फिर id और stop
- दो एलिमेंट वाले बोर्ड पर children की लंबाई 2 और childNodes की 5 उम्मीद रखो
- गायब id लिखो और null की उम्मीद रखो, फिर stop वाली तुलना और false
- पैराग्राफ पढ़ो और BODY / Market की उम्मीद रखो
गलत जगह
पेज खुलता है। जो जगह तुमने नाम दी, वह शीर्षक की जगह नहीं है।
new document()बुलाना, याnew Document()को यही बोर्ड पढ़ना- Market को
document.headमें ढूँढना - शब्द Market को नोट का एलिमेंट भाई मानना
children.lengthपढ़ना जब हर नोड चाहिए, लाइन ब्रेक समेतchildNodes.lengthपढ़ना जब सिर्फ़ शीर्षक और नोट चाहिए- गायब id के
nullको खाली स्ट्रिंग पढ़ना - यह उम्मीद करना कि
textContentमें लिखने से डिस्क की फ़ाइल भी बदल जाएगी
इन्हें अलग रखो
documentपेड़ है;documentElementhtml एलिमेंट हैheadऔरbodyउस html एलिमेंट के नीचे भाई-बहन हैं- शीर्षक का पिता body है; अगला एलिमेंट भाई नोट है
textContentअक्षर हैं;idमूठ हैchildrenसिर्फ़ एलिमेंट हैं;childNodesमें खाली पाठ भी है- गायब id
nullहै; सहेजी फ़ाइल जीवित पेड़ नहीं है - अगला पेज एलिमेंट को एक id से आगे चुनता है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी