HTML DOM Heading ऑब्जेक्ट

HTML DOM Heading ऑब्जेक्ट HTML हेडिंग तत्वों से जुड़ा होता है जो <h1> से <h6> तक होते हैं। हेडिंग ऑब्जेक्ट का उपयोग करके हम createElement() और getElementById() मेथड का उपयोग करके क्रमशः हेडिंग तत्व बना और एक्सेस कर सकते हैं।

सिंटैक्स

Heading ऑब्जेक्ट बनाने के लिए सिंटैक्स:

var p = document.createElement("H1");

उदाहरण

आइए Heading ऑब्जेक्ट का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <body> 
<h1>Heading ऑब्जेक्ट उदाहरण</h1> 
<p>नीचे दिए गए बटन पर क्लिक करके एक h1 तत्व बनाएं</p> 
<button onclick="createH1()">CREATE</button> 
<script> 
  function createH1() { 
    var h = document.createElement("H1"); 
    var txt = document.createTextNode("H1 तत्व बनाया गया है"); 
    h.appendChild(txt); 
    document.body.appendChild(h); 
  } 
</script> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

HTML DOM Heading ऑब्जेक्ट

CREATE बटन पर क्लिक करने पर:

HTML DOM Heading ऑब्जेक्ट

उदाहरण की व्याख्या

उपरोक्त उदाहरण में:

हमने पहले एक बटन CREATE बनाया जो यूज़र द्वारा क्लिक किए जाने पर headerCreate() मेथड को एक्ज़िक्यूट करता है:

<button onclick="createH1()">CREATE</button>

CreateH1() मेथड document ऑब्जेक्ट पर createElement() मेथड का उपयोग करके एक <h1> हेडिंग तत्व बनाता है और इसे वेरिएबल h में असाइन करता है। हम फिर document ऑब्जेक्ट के createTextNode() मेथड का उपयोग करके इसके लिए एक टेक्स्ट नोड बनाते हैं। टेक्स्ट नोड को appendChild() मेथड का उपयोग करके <h1> तत्व में जोड़ा जाता है। अंत में टेक्स्ट नोड के साथ <h1> तत्व को appendChild() मेथड का उपयोग करके दस्तावेज़ के बॉडी के चाइल्ड के रूप में जोड़ा जाता है:

function createH1() { 
  var h = document.createElement("H1"); 
  var txt = document.createTextNode("H1 तत्व बनाया गया है"); 
  h.appendChild(txt); 
  document.body.appendChild(h); 
}