HTML DOM आर्टिकल ऑब्जेक्ट HTML <लेख> तत्व का प्रतिनिधित्व करता है जिसे HTML5 में पेश किया गया था। एक लेख एक HTML दस्तावेज़ में एक स्व-निहित क्षेत्र है। यह HTML5 में पेश किए गए सिमेंटिक टैग का एक हिस्सा है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैएक लेख वस्तु बनाना
var a = document.createElement("ARTICLE"); उदाहरण
आइए हम HTML DOM आलेख वस्तु का एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"बदलें" बटन पर क्लिक करें-
"जोड़ें" बटन पर क्लिक करें -
उपरोक्त उदाहरण में -
हमने सबसे पहले "ArticleObj" आईडी के साथ एक लेख बनाया और उसमें एक हेडर और एक पैराग्राफ -
<article id="ArticleObj"> <h1>Heading</h1> <p>Sample Article Text</p> </article>
फिर हमने चेंजआर्टिकल () और एडआर्टिकल () फंक्शन को क्रमशः निष्पादित करने के लिए चेंज और एडीडी नाम के दो बटन बनाए
<button onclick="ChangeArticle()">CHANGE</button> <button onclick="AddArticle()">ADD</button>
फ़ंक्शन चेंजआर्टिकल () को इसके साथ जुड़े आईडी "आर्टिकलऑब्ज" के साथ तत्व मिलता है और इसका रंग और फ़ॉन्ट आकार बदलता है -
function ChangeArticle() {
var x = document.getElementById("ArticleObj");
x.style.color = "green";
x.style.fontSize = "25px";
} फ़ंक्शन AddArticle() पहले प्रकार के लेख का एक तत्व बनाता है। यह तब setAttribute विधि का उपयोग करके इसे "myArticle" आईडी प्रदान करता है। लेख तत्व को तब दस्तावेज़ के मुख्य भाग में जोड़ा जाता है। हैडिंग बनाई जाती है और एपेंड चाइल्ड प्रॉपर्टी का उपयोग करके इसमें कुछ टेक्स्ट जोड़ा जाता है। टेक्स्ट सामग्री के साथ शीर्षक को "myArticle" आईडी के साथ लेख में जोड़ दिया जाता है -
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);
}