Đối tượng Article trong HTML DOM

Đối tượng Article trong HTML DOM đại diện cho phần tử HTML <article> được giới thiệu trong HTML5. Một article là một khu vực tự chứa trong tài liệu HTML. Nó là một phần của các thẻ ngữ nghĩa (semantic tags) được giới thiệu trong HTML5.

Cú pháp

Tạo một đối tượng article:

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

Ví dụ

Dưới đây là ví dụ về đối tượng HTML DOM article:

<!DOCTYPE html> <html> <body> <h3>TIÊU ĐỀ BÀI VIẾT</h3> <article id="ArticleObj"> <h1>Tiêu đề</h1> <p>Văn bản bài viết mẫu</p> </article> <p>Click nút bên dưới để thay đổi kích thước và màu sắc của article</p> <button onclick="ChangeArticle()">THAY ĐỔI</button> <button onclick="AddArticle()">THÊM</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("Bài viết được thêm");       heading.appendChild(txt1);       document.getElementById("myArticle").appendChild(heading);    } </script> </body> </html>

Kết quả

Ví dụ này sẽ cho kết quả sau:

Click nút “THAY ĐỔI”:

Click nút “THÊM”:

Giải thích ví dụ:

Chúng ta trước tiên tạo một article với id “ArticleObj” và một header cùng một đoạn văn trong đó:

<article id="ArticleObj"> <h1>Tiêu đề</h1> <p>Văn bản bài viết mẫu</p> </article>

Sau đó tạo hai nút tên là THAY ĐỔI và THÊM để thực thi các hàm ChangeArticle() và AddArticle() tương ứng:

<button onclick="ChangeArticle()">THAY ĐỔI</button> <button onclick="AddArticle()">THÊM</button>

Hàm ChangeArticle() lấy phần tử với id “ArticleObj” và thay đổi màu sắc và cỡ chữ:

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

Hàm AddArticle() tạo một phần tử kiểu article trước. Sau đó sử dụng phương thức setAttribute gán cho nó id “myArticle”. Phần tử article sau đó được thêm vào body của tài liệu. Tiêu đề được tạo và một số văn bản được thêm vào nó bằng thuộc tính appendChild. Cuối cùng tiêu đề cùng nội dung văn bản được thêm vào article 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); }