HTML DOM Article ऑब्जेक्ट HTML <article> एलिमेंट को दर्शाता है जिसे HTML5 में पेश किया गया था। एक आर्टिकल HTML दस्तावेज़ में एक स्व-निहित क्षेत्र होता है। यह HTML5 में पेश किए गए सिमेंटिक टैग्स का एक हिस्सा है।
सिंटैक्स
निम्नलिखित सिंटैक्स है -
एक आर्टिकल ऑब्जेक्ट बनाना
var a = document.createElement("ARTICLE");
उदाहरण
आइए HTML DOM article ऑब्जेक्ट का एक उदाहरण देखें -
<!DOCTYPE html> <html> <body> <h3>ARTICLE HEADING</h3> <article id="ArticleObj"> <h1>Heading</h1> <p>Sample Article Text</p> </article> <p>Click the below button to change article size and color</p> <button onclick="ChangeArticle()">CHANGE</button> <button onclick="AddArticle()">ADD</button> <script> function ChangeArticle() { var x = document.getElementById("ArticleObj"); x.style.color = "green"; x.style.fontSize = "25px"; } function AddArticle() { var x = document.createElement("ARTICLE"); x.setAttribute("id", "myArticle"); document.body.appendChild(x); var heading = document.createElement("H1"); var txt1 = document.createTextNode("Append Article"); heading.appendChild(txt1); document.getElementById("myArticle").appendChild(heading); } </script> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
“CHANGE” बटन पर क्लिक करें−
“ADD” बटन पर क्लिक करें −
उपरोक्त उदाहरण में -
हमने पहले “ArticleObj” id के साथ एक आर्टिकल बनाया और उसमें एक हेडर और एक पैराग्राफ रखा -
<article id="ArticleObj"> <h1>Heading</h1> <p>Sample Article Text</p> </article>
फिर हमने CHANGE और ADD नाम के दो बटन बनाए जो क्रमशः ChangeArticle() और AddArticle() फ़ंक्शन को निष्पादित करते हैं
<button onclick="ChangeArticle()">CHANGE</button> <button onclick="AddArticle()">ADD</button>
ChangeArticle() फ़ंक्शन इससे जुड़े “ArticleObj” id वाले एलिमेंट को प्राप्त करता है और इसके रंग और फ़ॉन्ट आकार को बदलता है -
function ChangeArticle() { var x = document.getElementById("ArticleObj"); x.style.color = "green"; x.style.fontSize = "25px"; }
AddArticle() फ़ंक्शन पहले article प्रकार का एक एलिमेंट बनाता है। फिर यह setAttribute मेथड का उपयोग करके इसे “myArticle” id असाइन करता है। आर्टिकल एलिमेंट को फिर document body में जोड़ा जाता है। हेडिंग बनाई जाती है और append child प्रॉपर्टी का उपयोग करके इसमें कुछ टेक्स्ट जोड़ा जाता है। टेक्स्ट कंटेंट के साथ हेडिंग को फिर “myArticle” id वाले आर्टिकल में जोड़ा जाता है -
function AddArticle() { var x = document.createElement("ARTICLE"); x.setAttribute("id", "myArticle"); document.body.appendChild(x); var heading = document.createElement("H1"); var txt1 = document.createTextNode("Append Article"); heading.appendChild(txt1); document.getElementById("myArticle").appendChild(heading); }
