HTML DOM Article অবজেক্ট

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」 বাটনে ক্লিক করলে:

উপরের উদাহরণে:

আমরা প্রথমে id "ArticleObj" সহ একটি আর্টিকেল তৈরি করেছি এবং সেটিতে একটি হেডার ও একটি প্যারাগ্রাফ রাখেছি:

<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() ফাংশন id "ArticleObj" সহ এলিমেন্টটি পেয়ে তার রঙ এবং ফন্ট সাইজ পরিবর্তন করে:

function ChangeArticle() {    var x = document.getElementById("ArticleObj");    x.style.color = "green";    x.style.fontSize = "25px"; }

AddArticle() ফাংশন প্রথমে article টাইপের একটি এলিমেন্ট তৈরি করে। তারপর setAttribute মেথড ব্যবহার করে এটিকে "myArticle" id দেয়। আর্টিকেল এলিমেন্টটি ডকুমেন্ট বডিতে অ্যাপেন্ড করা হয়। একটি হেডিং তৈরি করা হয় এবং append child প্রোপার্টি ব্যবহার করে সেটিতে কিছু টেক্সট অ্যাপেন্ড করা হয়। হেডিংটি টেক্সট কন্টেন্টসহ আর্টিকেলে id "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); }