home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วัตถุบทความ HTML DOM

ออบเจ็กต์ HTML DOM Article แสดงถึงองค์ประกอบ 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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

วัตถุบทความ HTML DOM

คลิกปุ่ม "เปลี่ยน" -

วัตถุบทความ HTML DOM

คลิกปุ่ม “เพิ่ม” −

วัตถุบทความ HTML DOM

ในตัวอย่างข้างต้น −

ขั้นแรกเราสร้างบทความที่มี 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() สร้างองค์ประกอบของบทความประเภทก่อน จากนั้นใช้วิธี 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);
}