HTML DOM header ऑब्जेक्ट

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

सिंटैक्स

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

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

उदाहरण

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

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

आउटपुट

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

HTML DOM header ऑब्जेक्ट

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

HTML DOM header ऑब्जेक्ट

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

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

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

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

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

function headerCreate() { 
  var h = document.createElement("HEADER"); 
  document.body.appendChild(h); 
  var h2 = document.createElement("H2"); 
  var txt = document.createTextNode("h2 तत्व युक्त Header तत्व अब बनाया गया है"); 
  h2.appendChild(txt); 
  h.appendChild(h2); 
}