HTML से DOM तक: पार्सिंग और त्रुटि पुनर्प्राप्ति

समझें कि ब्राउज़र किसी भी HTML स्ट्रीम को, यहाँ तक कि विकृत स्ट्रीम को भी, कैसे एक निर्धारित DOM वृक्ष में बदल देता है।

10 मिनट · 3 प्रश्न

XML के विपरीत, HTML में घातक त्रुटि जैसी कोई चीज़ नहीं होती: WHATWG विनिर्देश बाइट दर बाइट परिभाषित करता है कि कोई भी इनपुट स्ट्रीम - यहाँ तक कि विकृत स्ट्रीम भी - किस प्रकार एक DOM वृक्ष बननी चाहिए। पार्सर दो चरणों में काम करता है: tokenizer स्ट्रीम को टोकन (टैग, टेक्स्ट, टिप्पणियाँ) में काटता है, फिर tree builder उन्हें एक स्टेट मशीन के अनुसार डालता है जिसकी अवस्थाओं को insertion modes (in body, in table, इत्यादि) कहा जाता है। हर "parse error" के लिए एक मानकीकृत पुनर्प्राप्ति होती है: दो अनुरूप ब्राउज़र बिल्कुल एक ही DOM बनाते हैं।

<table>
  <tr><td>Cell</td></tr>
</table>

पार्सर अंतर्निहित टैग डालता है: पंक्तियों के चारों ओर एक <tbody> प्रकट होता है, और <li>, <p> या <option> कुछ खुलने वाले टैग के सामने अपने आप बंद हो जाते हैं। इससे भी अधिक कठोर: किसी भी सामग्री को जो <table> के अंदर मिलती है जहाँ उसकी अनुमति नहीं है, उसे उसमें से बाहर खींच लिया जाता है और ठीक पहले फिर से डाल दिया जाता है, इस तंत्र को foster parenting कहा जाता है। आपके CSS सेलेक्टर और आपकी स्क्रिप्ट हमेशा सुधारे गए DOM पर काम करते हैं, कभी आपके स्रोत पर नहीं।

const html =
  "<table><div>out</div><tr><td>ok</td></tr></table>";
const doc = new DOMParser()
  .parseFromString(html, "text/html");
console.log(doc.body.innerHTML);
// <div>out</div><table>...</table>

गलत ढंग से नेस्ट किए गए फ़ॉर्मैटिंग टैग adoption agency algorithm को सक्रिय करते हैं, जो विनिर्देश के सबसे कपटी हिस्सों में से एक है: पार्सर सक्रिय फ़ॉर्मैटिंग तत्वों को क्लोन और पुनर्वितरित करता है ताकि एक सही ढंग से नेस्ट किया गया वृक्ष तैयार हो सके। नीचे दिया गया क्रॉस किया हुआ मार्कअप इसका परिणाम दिखाता है।

<p>
  <b>One <i>two</b> three</i>
</p>

पार्सर एक streaming पार्सर है: यह बाइट्स के आने के साथ ही वृक्ष बनाता है। एक सिंक्रोनस <script> इसे निलंबित कर देता है - स्क्रिप्ट document.write को कॉल करके स्ट्रीम में टोकन इंजेक्ट कर सकती है - लेकिन preload scanner बाकी HTML को छानता रहता है ताकि इमेज, स्टाइलशीट और स्क्रिप्ट को पहले से लोड किया जा सके। पार्सिंग समाप्त होने के बाद कॉल किया गया document.write document.open को सक्रिय करता है और पूरे पेज को मिटा देता है: यह प्लेटफ़ॉर्म के सबसे पुराने जालों में से एक है।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. <table><div>Out</div><tr><td>A</td></tr></table> में <div> का क्या होता है?
   • इसे चुपचाप DOM से हटा दिया जाता है
   • foster parenting द्वारा इसे table से पहले ले जाया जाता है
   • इसे इसके लिए बनाए गए एक <td> सेल में लपेट दिया जाता है
   • यह table का सीधा चाइल्ड बना रहता है
2. HTML विनिर्देश एक विकृत दस्तावेज़ को कैसे संभालता है?
   • यह हर ब्राउज़र को अपनी खुद की पुनर्प्राप्ति रणनीति चुनने देता है
   • यह quirks mode में स्विच करने की माँग करता है
   • यह एक निर्धारित पुनर्प्राप्ति एल्गोरिथ्म परिभाषित करता है, जो सभी अनुरूप ब्राउज़रों में समान है
   • यह पहली त्रुटि पर पार्सिंग रोकने की माँग करता है
3. <p><div>X</div></p> फ़्रैगमेंट कौन सा DOM बनाता है?
   • <p></p><div>X</div><p></p>: div पहले p को बंद कर देता है, और अनाथ </p> एक दूसरा, खाली p बनाता है
   • <p><div>X</div></p>, जैसा है वैसा ही रखा जाता है
   • <div><p>X</p></div>, पार्सर नेस्टिंग को उलट देता है