HTML DOM designMode प्रॉपर्टी हमें यह निर्दिष्ट करने की अनुमति देती है कि संपूर्ण दस्तावेज़ संपादन योग्य है या नहीं। यह HTML दस्तावेज़ को WYSIWYG (What You See Is What You Get) संपादक की तरह कार्य करने देता है क्योंकि हम HTML दस्तावेज़ को संपादित कर सकते हैं। यह प्रॉपर्टी डिफ़ॉल्ट रूप से "off" पर सेट होती है और इसे "on" पर सेट करके हम दस्तावेज़ को संपादित कर सकते हैं।
सिंटैक्स
designMode प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
document.designMode = "on|off"
यहां, "off" डिफ़ॉल्ट मान है और इसे "on" पर सेट करने से हम दस्तावेज़ को संपादित कर सकते हैं।
उदाहरण
HTML DOM designMode प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <body> <h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button> <script> document.designMode="on"; </script> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:

दस्तावेज़ संपादित करने के बाद:

उपरोक्त उदाहरण में:
हमने कई HTML तत्व बनाए। उदाहरण के लिए, एक <h1> तत्व, एक <p> और एक <button> तत्व:
<h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button>
हमने फिर document.designMode को "on" पर सेट किया जो हमें अपने HTML दस्तावेज़ को संपादित करने की अनुमति देता है। हम अब किसी भी टेक्स्ट को बदल सकते हैं और यहां तक कि उनके टेक्स्ट को साफ़ करके तत्वों को हटा सकते हैं।
उदाहरण: बटन टेक्स्ट को हटाकर बटन को भी हटाया जा सकता है।
<script> document.designMode="on"; </script>