डेवलपर टूल · HTML WYSIWYG एडिटर
एडिटर के लिए DOM की व्याख्या: क्यों HTML एक पेड़ है, टेक्स्ट फ़ाइल नहीं
· पेजभूमि
HTML डोम संतोषप्रद
गैर-प्रोग्रामर के लिए दस्तावेज़ ऑब्जेक्ट मॉडल का परिचय देता है, जिसमें नेस्टिंग नियम, माता-पिता और बच्चे के तत्व शामिल होते हैं, और ब्राउज़र अमान्य नेस्टिंग की मरम्मत कैसे करते हैं, ताकि एडिटर के व्यवहार को समझाया जा सके जो अन्यथा मनमाना लगता है।
आपका <p> अपने आप बंद क्यों हो गया - पेस्ट के बाद बदल गए मार्कअप के साथ खुलता है
एक एडिटर के माध्यम से एक टुकड़ा गुजरने के बाद एक पैराग्राफ बंद या हिलता हुआ दिखाई दे सकता है क्योंकि परिणामस्वरूप पेड़ - लेखक का मूल चरित्र अनुक्रम नहीं - जो अंततः मायने रखता है। ToolAcre एक और परिवर्तन जोड़ता है: यह अपनी स्वयं की अनुमति सूची के तहत ब्राउज़र-व्युत्पन्न स्रोत को टोकनाइज़ और फिर से लिखता है।
जब स्रोत बदलता है, तो पूछें कि किस चरण ने इसे बदला। हो सकता है कि ब्राउज़र ने सामग्री-संपादन योग्य DOM को बदल दिया हो, या सैनिटाइज़र ने किसी उपनाम को मैप कर दिया हो, किसी नोड को खोल दिया हो या स्वीकृत टैग को संतुलित कर दिया हो। प्रत्येक अंतर को "ब्राउज़र ने ठीक कर दिया" कहने से यह महत्वपूर्ण सीमा छिप जाती है।
बक्सों के अंदर बक्से - एक संक्षिप्त उदाहरण के साथ पेड़ मॉडल का परिचय देते हैं
तत्वों को माता-पिता-बच्चे के रिश्तों से जुड़े बक्से के रूप में सोचें। `<p>Read <strong>carefully</strong>.</p>` में, p टेक्स्ट का जनक है, मजबूत और अधिक टेक्स्ट; बलवान शब्द का जनक ध्यानपूर्वक है। स्रोत इंडेंटेशन पेड़ का वर्णन कर सकता है लेकिन संबंध नहीं बनाता है।
ToolAcre का सुंदर फ़ॉर्मेटर ब्लॉक कंटेनरों को लाइनों पर रखता है और आसपास के टेक्स्ट के साथ इनलाइन तत्वों को रखता है। सूचियाँ इंडेंटेड ली लाइनें प्राप्त करती हैं। यह प्रारूप सेनिटाइज़्ड आउटपुट को पढ़ने के लिए है। वास्तविक मॉडल नेस्टेड तत्व और टेक्स्ट नोड्स ही रहता है, भले ही स्रोत कॉम्पैक्ट हो या लाइनों में फैला हुआ हो।
अनुमत नेस्टिंग को ToolAcre के पुनर्लेखक द्वारा संतुलित किया जाता है; ब्राउज़र सामग्री मॉडल व्यापक हैं
HTML ऐसे सामग्री मॉडल को परिभाषित करता है जो इस एडिटर की नीति से कहीं अधिक व्यापक और अधिक विस्तृत हैं। ToolAcre एक विशिष्ट सेट की अनुमति देता है लेकिन प्रत्येक सिमेंटिक नेस्टिंग नियम को मान्य नहीं करता है। इसका स्टैक अनुमत टैगों के बीच अच्छी तरह से बंद होना सुनिश्चित करता है; यह इस बात का प्रमाण नहीं है कि प्रत्येक परिणामी संबंध किसी गंतव्य के लिए आदर्श HTML है।
उदाहरण के लिए, किसी सूची में उपयुक्त सूची आइटम होने चाहिए, फिर भी सामान्य स्टैक असामान्य अनुमत संयोजनों को संरक्षित कर सकता है क्योंकि यह स्कीमा सत्यापनकर्ता नहीं है। लेखकों को टूलबार या समीक्षा किए गए स्रोत के माध्यम से समझदार शीर्षकों, पैराग्राफों और सूचियों का निर्माण करना चाहिए, फिर शुद्धता परिणामी होने पर गंतव्य आवश्यकताओं के तहत मान्य करना चाहिए।
ToolAcre स्टैक के साथ स्वीकृत टैग की मरम्मत करता है, संपूर्ण HTML पार्सिंग एल्गोरिदम की नहीं
ब्राउज़र त्रुटि पुनर्प्राप्ति के साथ पूर्ण HTML पार्सिंग एल्गोरिदम लागू करते हैं। ToolAcre इसे दोबारा लागू नहीं करता. इसका टोकननाइज़र अनुमति सूची के लिए आवश्यक संरचनाओं को पहचानता है, और क्रॉसिंग एंड टैग दिखाई देने पर इसका लेखक स्वीकृत आंतरिक तत्वों को बंद कर देता है। यह कुछ हद तक बंद हो जाता है और अंत में शेष खुले हिस्से को बंद कर देता है।
स्रोत स्पष्ट रूप से मॉड्यूल को सामान्य शत्रुतापूर्ण-इनपुट XSS फ़िल्टर के रूप में न मानने के कारण के रूप में पार्सर अंतर का नाम देता है। एक ब्राउज़र जानबूझकर विकृत स्ट्रिंग्स की अलग तरह से व्याख्या कर सकता है। पूर्वावलोकन सैंडबॉक्स ToolAcre के अंदर निष्पादन पर एक स्वतंत्र सीमा प्रदान करता है, जबकि सर्वर को अभी भी उचित HTML5-जागरूक स्वच्छता की आवश्यकता होती है।
टेक्स्ट नोड्स और व्हाइटस्पेस - यह बताता है कि पेड़ में टैग के बीच रिक्त स्थान और लाइन ब्रेक क्यों मौजूद हैं
तत्वों के बीच का टेक्स्ट, व्हाइटस्पेस वर्णों सहित, टेक्स्ट टोकन बन जाता है। सुंदर फ़ॉर्मेटर प्री के बाहर सामान्य रिक्त स्थान को ढहा देता है, जबकि प्री सामग्री को बिल्कुल बरकरार रखा जाता है। सादा-पाठ रूपांतरण ब्लॉक समाप्ति के बाद और br के लिए नई पंक्तियाँ सम्मिलित करता है, फिर अत्यधिक रिक्त पंक्तियों के रन को कम करता है।
इसलिए व्हाइटस्पेस प्रत्येक चरण में अलग-अलग तरीके से भाग लेता है। दृश्य रिक्ति पाठ, br, ब्लॉक सीमाओं या CSS से आ सकती है। प्रत्येक दृश्य अंतर को मार्जिन मानने के बजाय नोड्स और वर्णों का निरीक्षण करें। सैनिटाइज़र पाठक द्वारा देखे जाने वाले शब्दों को बदले बिना रिक्त स्थान के स्वरूपण को सामान्य कर सकता है।
व्यावहारिक उदाहरण: एक सूची के साथ दो-पैराग्राफ नोट का पता लगाना - उत्पादित मार्कअप को एक पेड़ के रूप में पढ़ता है, माता-पिता और बच्चों की पहचान करता है
`<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>` बनाएं. टुकड़े में तीन मूल-स्तरीय तत्व बच्चे हैं। पैराग्राफ में पाठ और मजबूत शामिल है; सूची में दो ली बच्चे हैं, प्रत्येक के पास पाठ है।
स्रोत से दृश्य और वापस स्विच करें। अनुमत ट्री संतुलित रहना चाहिए, और प्रीटी मोड सूची आइटमों को इंडेंट करते समय शीर्षक और पैराग्राफ को लाइनों पर रखेगा। यह व्यायाम नियंत्रित है; यह प्रत्येक विकृत इनपुट या ब्राउज़र मरम्मत पथ को प्रदर्शित नहीं करता है।
इसमें क्या शामिल नहीं है - JavaScript DOM प्रोग्रामिंग या CSS बॉक्स मॉडल
यह आलेख JavaScript DOM प्रोग्रामिंग, उत्परिवर्तन पर्यवेक्षक, चयन APआई या CSS बॉक्स मॉडल नहीं सिखाता है। एलिमेंट ट्री और लेआउट बॉक्स ट्री संबंधित हैं लेकिन समान नहीं हैं। यह यह भी दावा नहीं करता है कि हाथ से लिखी गई टोकन सूची एक ब्राउज़र DOM है।
एक साफ-सुथरे पेड़ से कोई सामान्यीकृत सुरक्षा निष्कर्ष नहीं निकलता है। एक हमलावर पार्सिंग अंतर और URL को लक्षित कर सकता है, यही कारण है कि आउटपुट फ़िल्टरिंग, सैंडबॉक्स्ड पूर्वावलोकन और सर्वर स्वच्छता अलग-अलग रहती है। संरचना के बारे में तर्क करने के लिए ट्री मॉडल का उपयोग करें, न कि प्राप्तकर्ता प्रणाली की सुरक्षा समीक्षा को छोड़ने के लिए।
टेकअवे: पेड़ों में सोचें - मानसिक मॉडल का सारांश देता है और ToolAcre के HTML WYSIWYG एडिटर का मार्कअप आउटपुट उस पेड़ को दिखाता है जिसे आप बना रहे हैं
पेड़ों के बारे में सोचें जब दृश्य व्यवहार मनमाना लगता है। अपने इच्छित पैरेंट, बच्चों और टेक्स्ट नोड्स की पहचान करें, फिर फ़िल्टर किए गए स्रोत से उनकी तुलना करें। ToolAcre सामग्री-संपादन योग्य प्रारूपण को पठनीय पुनर्लिखित अंश के साथ जोड़कर इस निरीक्षण को व्यावहारिक बनाता है।
एक मजबूत मानसिक मॉडल भी सीमाएं प्रकट करता है: अलिखित डिव एक अभिभावक को खो देता है, गिराई गई स्क्रिप्ट अपना सबट्री खो देती है, और बी मजबूत हो जाता है। एक बार जब वे परिवर्तन स्पष्ट हो जाते हैं, तो सुधार बार-बार होने वाले दृश्य संकेतों के बजाय संरचनात्मक निर्णय बन जाते हैं जिनका मार्कअप अज्ञात रहता है।