Đối tượng bài viết HTML DOM

Đối tượng HTML DOM Article đại diện cho phần tử HTML

đã được giới thiệu trong HTML5. Một bài báo là một khu vực độc lập trong một tài liệu HTML. Nó là một phần của các thẻ ngữ nghĩa được giới thiệu trong HTML5.

Cú pháp

Sau đây là cú pháp cho -

Tạo đối tượng bài viết

var a = document.createElement("ARTICLE");

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng bài viết 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng bài viết HTML DOM

Nhấp vào nút “THAY ĐỔI ”−

Đối tượng bài viết HTML DOM

Nhấp vào nút “THÊM” -

Đối tượng bài viết HTML DOM

Trong ví dụ trên -

Đầu tiên, chúng tôi tạo một bài viết với id “ArticleObj” và một tiêu đề và một đoạn văn trong đó -

<article id="ArticleObj">
<h1>Heading</h1>
<p>Sample Article Text</p>
</article>

Sau đó, chúng tôi tạo hai nút có tên CHANGE và ADD để thực thi hàm ChangeArticle () và AddArticle () tương ứng

<button onclick="ChangeArticle()">CHANGE</button>
<button onclick="AddArticle()">ADD</button>

Hàm ChangeArticle () nhận phần tử có id “ArticleObj” được liên kết với nó và thay đổi màu sắc và kích thước phông chữ của nó -

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

Trước tiên, hàm AddArticle () tạo ra một phần tử có kiểu bài viết. Sau đó, nó sử dụng phương thức setAttribute sẽ gán cho nó id “myArticle”. Phần tử bài viết sau đó được nối vào phần nội dung tài liệu. Tiêu đề được tạo và một số văn bản được nối vào nó bằng cách sử dụng thuộc tính con append. Sau đó, tiêu đề cùng với nội dung văn bản được thêm vào bài viết với 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);
}