जावास्क्रिप्ट में DOM क्या है?
दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) के उपयोग से वेबपेज में सभी तत्व जावास्क्रिप्ट तक पहुँच सकते हैं। वास्तव में, वेब ब्राउज़र पेज लोड होने पर वेबपेज का एक DOM बनाता है। DOM मॉडल को इस तरह वस्तुओं के पेड़ के रूप में बनाया जाता है:
डोम और इवेंट्स का उपयोग कैसे करें
DOM का उपयोग करके JavaScript कई कार्य कर सकती है। यह नए तत्वों और विशेषताओं को बना सकता है, मौजूदा तत्वों और विशेषताओं को बदल सकता है और यहां तक कि मौजूदा तत्वों और विशेषताओं को भी हटा सकता है। जावास्क्रिप्ट मौजूदा घटनाओं पर भी प्रतिक्रिया कर सकती है और पृष्ठ में नई ईवेंट बना सकती है।
getElementById, innerHTML उदाहरण
- getElementById: उन तत्वों और विशेषताओं तक पहुँचने के लिए जिनकी आईडी सेट है।
- भीतरी HTML: एक तत्व की सामग्री का उपयोग करने के लिए।
इस उदाहरण को स्वयं आज़माएँ:
<सिर>DOM !!! </ title></ head><शरीर> <h2>आपका स्वागत है </ h1> <p>यह स्वागत संदेश है। </p> <h2>प्रौद्योगिकी </ h2> <p>यह प्रौद्योगिकी अनुभाग है। </p> <स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट">var text = document.getElementById ("एक"); भीतर HTML;चेतावनी ("पहला शीर्षक" + पाठ) है;</ script></ शरीर></ html></pre> <h3>getElementsByTagName उदाहरण</h3> <p>getElementsByTagName: टैग नाम का उपयोग करके तत्वों और विशेषताओं का उपयोग करना। यह विधि एक ही टैग नाम के साथ सभी मदों की एक सरणी लौटाएगी।</p> <p>इस उदाहरण को स्वयं आज़माएँ:</p> <pre translate="no" class="codeguru"><html><सिर><title> DOM !!! </ title></ head><शरीर> <h2>आपका स्वागत है </ h1> <p>यह स्वागत संदेश है। </p> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <h2>प्रौद्योगिकी </ h2> <p id = "दूसरा"> यह प्रौद्योगिकी अनुभाग है। </p> <स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट">var पैराग्राफ = document.getElementsByTagName ("p");चेतावनी ("दूसरे पैराग्राफ में सामग्री" + पैराग्राफ [1] .innerHTML) है;दस्तावेज़।</ script></ शरीर></ html></pre> <h3>घटना हैंडलर उदाहरण</h3> <ol> <li>createElement: नया तत्व बनाने के लिए</li> <li>removeChild: एक तत्व निकालें</li> <li>आप इस तरह एक विशेष तत्व के लिए एक <strong>घटना हैंडलर</strong> जोड़ सकते हैं :</li> </ol> <pre translate="no"> document.getElementById(id).onclick=function(){lines of code to be executed}</pre> <p>या</p> <pre translate="no">document.getElementById(id).addEventListener("click", functionname)</pre> <p>इस उदाहरण को स्वयं आज़माएँ:</p> <pre translate="no" class="codeguru"><html><सिर><title> DOM !!! </ title></ head><शरीर><input type = "button" id = "btnClick" value = "मुझे क्लिक करें !!" /><स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट">document.getElementById ("btnClick")। addEventListener ("क्लिक करें", क्लिक करें);फ़ंक्शन क्लिक किया गया (){{चेतावनी ("आपने मुझे क्लिक किया !!!");}</ script></ शरीर></ html></pre> <form class="hidden" code-box" name="sample"> यह कोड संपादन योग्य है। निष्पादित करने के लिए चलाएँ क्लिक करें<textarea name="codeguru"> </textarea> <p><input type="submit" value="Daud" style="background-color:#df5035;" color:#ffffff;"></p> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">लोकप्रिय पोस्ट</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224374-text-determination-for-sales-document-sap-votxn" title="बिक्री दस्तावेज़ के लिए पाठ निर्धारण: एसएपी VOTXN" rel="bookmark"><img src="https://cdn.css-code.org/1174909/text_determination_for_sales_document_sap_votxn.png.webp" loading="lazy" alt="बिक्री दस्तावेज़ के लिए पाठ निर्धारण: एसएपी VOTXN" title="बिक्री दस्तावेज़ के लिए पाठ निर्धारण: एसएपी VOTXN" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224374-text-determination-for-sales-document-sap-votxn" title="बिक्री दस्तावेज़ के लिए पाठ निर्धारण: एसएपी VOTXN" rel="bookmark">बिक्री दस्तावेज़ के लिए पाठ निर्धारण: एसएपी VOTXN 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224375-how-to-shipping-point-determine-in-sap-sd" title="SAP SD में नौवहन बिंदु का निर्धारण कैसे करें" rel="bookmark"><img src="https://cdn.css-code.org/4487552/how_to_shipping_point_determine_in_sap_sd.png.webp" loading="lazy" alt="SAP SD में नौवहन बिंदु का निर्धारण कैसे करें" title="SAP SD में नौवहन बिंदु का निर्धारण कैसे करें" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224375-how-to-shipping-point-determine-in-sap-sd" title="SAP SD में नौवहन बिंदु का निर्धारण कैसे करें" rel="bookmark">SAP SD में नौवहन बिंदु का निर्धारण कैसे करें 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224377-material-listing-and-exclusion-sap-vb01" title="सामग्री लिस्टिंग और amp; बहिष्करण: SAP VB01" rel="bookmark"><img src="https://cdn.css-code.org/6235931/material_listing_ampamp_exclusion_sap_vb01.png.webp" loading="lazy" alt="सामग्री लिस्टिंग और amp; बहिष्करण: SAP VB01" title="सामग्री लिस्टिंग और amp; बहिष्करण: SAP VB01" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224377-material-listing-and-exclusion-sap-vb01" title="सामग्री लिस्टिंग और amp; बहिष्करण: SAP VB01" rel="bookmark">सामग्री लिस्टिंग और amp; बहिष्करण: SAP VB01 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">महीने के लिए सर्वश्रेष्ठ समीक्षा</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225260-sqlite-join-tables-inner-natural-left-outer-cross-examples" title="SQLite टेबल्स में शामिल हों: इनर, नेचुरल, लेफ्ट आउटर, क्रॉस (उदाहरण)" rel="bookmark">SQLite टेबल्स में शामिल हों: इनर, नेचुरल, लेफ्ट आउटर, क्रॉस (उदाहरण)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225323-sqlite-insert-update-delete-query-with-example" title="SQLite INSERT, UPDATE, DELETE Query with Example" rel="bookmark">SQLite INSERT, UPDATE, DELETE Query with Example</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225413-sqlite-query-select-where-limit-offset-count-group-by" title="SQLite Query: Select, Where, LIMIT, OFFSET, Count, Group By" rel="bookmark">SQLite Query: Select, Where, LIMIT, OFFSET, Count, Group By</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225598-top-20-sqlite-interview-questions-and-answers" title="शीर्ष 20 SQLite साक्षात्कार प्रश्न & जवाब" rel="bookmark">शीर्ष 20 SQLite साक्षात्कार प्रश्न & जवाब</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225599-sqlite-tutorial-pdf-download-sqlite-documentation" title="SQLite ट्यूटोरियल पीडीएफ: (डाउनलोड) SQLite प्रलेखन" rel="bookmark">SQLite ट्यूटोरियल पीडीएफ: (डाउनलोड) SQLite प्रलेखन</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225601-what-is-sql-server-introduction-version-history" title="SQL Server क्या है? परिचय, संस्करण इतिहास" rel="bookmark">SQL Server क्या है? परिचय, संस्करण इतिहास</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225602-sql-server-architecture-explained-named-pipes-optimizer-buffer-manager" title="SQL सर्वर आर्किटेक्चर समझाया: नामित पाइप्स, ऑप्टिमाइज़र, बफर मैनेजर" rel="bookmark">SQL सर्वर आर्किटेक्चर समझाया: नामित पाइप्स, ऑप्टिमाइज़र, बफर मैनेजर</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225603-sql-server-database-create-alter-drop-restore" title="एसक्यूएल सर्वर डेटाबेस: क्रिएट, ऑल्टर, ड्रॉप, रिस्टोर" rel="bookmark">एसक्यूएल सर्वर डेटाबेस: क्रिएट, ऑल्टर, ड्रॉप, रिस्टोर</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225604-sql-server-datatypes-varchar-numeric-date-time-t-sql-examples" title="SQL सर्वर डेटाटाइप्स: वर्चर, न्यूमेरिक, तिथि समय (टी-एसक्यूएल उदाहरण)" rel="bookmark">SQL सर्वर डेटाटाइप्स: वर्चर, न्यूमेरिक, तिथि समय (टी-एसक्यूएल उदाहरण)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225605-sql-server-table-create-alter-drop-t-sql-examples" title="एसक्यूएल सर्वर टेबल: क्रिएट, अलर्ट, ड्रॉप (टी-एसक्यूएल उदाहरण)" rel="bookmark">एसक्यूएल सर्वर टेबल: क्रिएट, अलर्ट, ड्रॉप (टी-एसक्यूएल उदाहरण)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225607-create-login-user-assign-permission-sql-server-tutorial" title="लॉगिन, उपयोगकर्ता बनाएं, अनुमति दें: SQL सर्वर ट्यूटोरियल" rel="bookmark">लॉगिन, उपयोगकर्ता बनाएं, अनुमति दें: SQL सर्वर ट्यूटोरियल</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225608-oracle-vs-sql-server-key-differences" title="ओरेकल बनाम। SQL सर्वर: मुख्य अंतर" rel="bookmark">ओरेकल बनाम। SQL सर्वर: मुख्य अंतर</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225609-top-40-ssis-interview-questions-and-answers" title="शीर्ष 40 SSIS साक्षात्कार प्रश्न और उत्तर" rel="bookmark">शीर्ष 40 SSIS साक्षात्कार प्रश्न और उत्तर</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225611-top-20-ssrs-interview-questions-and-answers" title="शीर्ष 20 SSRS साक्षात्कार प्रश्न & जवाब" rel="bookmark">शीर्ष 20 SSRS साक्षात्कार प्रश्न & जवाब</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225612-top-50-sql-server-interview-questions-and-answers" title="शीर्ष 50 SQL सर्वर साक्षात्कार प्रश्न & जवाब" rel="bookmark">शीर्ष 50 SQL सर्वर साक्षात्कार प्रश्न & जवाब</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">शीर्ष लेख</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003111-empty" title=": खाली - सीएसएस-ट्रिक्स" rel="bookmark"><img src="https://cdn.css-code.org/8985093/_empty_css-tricks.png.webp" loading="lazy" alt=": खाली - सीएसएस-ट्रिक्स" title=": खाली - सीएसएस-ट्रिक्स" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003111-empty" title=": खाली - सीएसएस-ट्रिक्स" rel="bookmark">: खाली - सीएसएस-ट्रिक्स 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003112-first-letter" title=":: पहला अक्षर - सीएसएस-ट्रिक्स" rel="bookmark"><img src="https://cdn.css-code.org/6612292/_first-letter_css-tricks.png.webp" loading="lazy" alt=":: पहला अक्षर - सीएसएस-ट्रिक्स" title=":: पहला अक्षर - सीएसएस-ट्रिक्स" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003112-first-letter" title=":: पहला अक्षर - सीएसएस-ट्रिक्स" rel="bookmark">:: पहला अक्षर - सीएसएस-ट्रिक्स 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003113-first-child" title=": पहला बच्चा - सीएसएस-ट्रिक्स" rel="bookmark"><img src="https://cdn.css-code.org/3454613/_first-child_css-tricks.png.webp" loading="lazy" alt=": पहला बच्चा - सीएसएस-ट्रिक्स" title=": पहला बच्चा - सीएसएस-ट्रिक्स" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003113-first-child" title=": पहला बच्चा - सीएसएस-ट्रिक्स" rel="bookmark">: पहला बच्चा - सीएसएस-ट्रिक्स 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">लोकप्रिय पोस्ट</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226508-mongodb-order-with-sort-and-limit-query-with-examples" title="सॉर्ट के साथ MongoDB आदेश () & सीमा () उदाहरणों के साथ प्रश्न" rel="bookmark">सॉर्ट के साथ MongoDB आदेश () & सीमा () उदाहरणों के साथ प्रश्न</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226509-mongodb-count-and-remove-functions-with-examples" title="MongoDB गणना () और amp; निकालें () उदाहरणों के साथ कार्य" rel="bookmark">MongoDB गणना () और amp; निकालें () उदाहरणों के साथ कार्य</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226510-mongodb-update-document-with-example" title="MongoDB अपडेट () उदाहरण के साथ दस्तावेज़" rel="bookmark">MongoDB अपडेट () उदाहरण के साथ दस्तावेज़</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226511-mongodb-security-monitoring-and-backup-mongodump" title="MongoDB सुरक्षा, निगरानी और amp; बैकअप (Mongodump)" rel="bookmark">MongoDB सुरक्षा, निगरानी और amp; बैकअप (Mongodump)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226512-how-to-create-user-and-add-role-in-mongodb" title="उपयोगकर्ता कैसे बनाएं & MongoDB में भूमिका जोड़ें" rel="bookmark">उपयोगकर्ता कैसे बनाएं & MongoDB में भूमिका जोड़ें</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">संपादक की पसंद</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224285-transfer-posting-of-goods-in-sap-mb1b" title="SAP MB1B में माल की पोस्टिंग स्थानांतरण" rel="bookmark">SAP MB1B में माल की पोस्टिंग स्थानांतरण</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224286-top-21-sap-mm-interview-questions-and-answers" title="टॉप 21 SAP MM साक्षात्कार प्रश्न & जवाब" rel="bookmark">टॉप 21 SAP MM साक्षात्कार प्रश्न & जवाब</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224287-how-to-create-goods-receipt-in-sap-migo-mb1c-mb03" title="SAP में माल रसीद कैसे बनाएँ: MIGO, MB1C, MB03" rel="bookmark">SAP में माल रसीद कैसे बनाएँ: MIGO, MB1C, MB03</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224288-sap-mm-module-pdf-material-management-tutorial" title="SAP MM मॉड्यूल पीडीएफ: सामग्री प्रबंधन ट्यूटोरियल" rel="bookmark">SAP MM मॉड्यूल पीडीएफ: सामग्री प्रबंधन ट्यूटोरियल</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224289-introduction-to-sap-qm" title="SAP QM का परिचय" rel="bookmark">SAP QM का परिचय</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">शीर्ष लेख</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003724-fix-ie-10-on-windows-phone-8-viewport" title="विंडोज फोन 8 व्यूपोर्ट पर आईई 10 को ठीक करें - सीएसएस-ट्रिक्स" rel="bookmark">विंडोज फोन 8 व्यूपोर्ट पर आईई 10 को ठीक करें - सीएसएस-ट्रिक्स</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003725-format-currency" title="प्रारूप मुद्रा - सीएसएस-ट्रिक्स" rel="bookmark">प्रारूप मुद्रा - सीएसएस-ट्रिक्स</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003727-call-function-with-random-timer" title="रैंडम टाइमर के साथ कॉल फ़ंक्शन - सीएसएस-ट्रिक्स" rel="bookmark">रैंडम टाइमर के साथ कॉल फ़ंक्शन - सीएसएस-ट्रिक्स</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003728-get-object-size" title="वस्तु का आकार प्राप्त करें - सीएसएस-ट्रिक्स" rel="bookmark">वस्तु का आकार प्राप्त करें - सीएसएस-ट्रिक्स</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003729-get-all-possible-dom-events" title="सभी संभव डोम घटनाएँ प्राप्त करें - सीएसएस-ट्रिक्स" rel="bookmark">सभी संभव डोम घटनाएँ प्राप्त करें - सीएसएस-ट्रिक्स</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright hi.css-code.org, 2025 अप्रैल | <a href="https://hi.css-code.org/about-site" title="साइट के बारे में">साइट के बारे में</a> | <a href="https://hi.css-code.org/contacts" title="संपर्क">संपर्क</a> | <a href="https://hi.css-code.org/privacy-policy" title="गोपनीयता नीति">गोपनीयता नीति</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>