Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng chân trang DOM HTML

Đối tượng HTML DOM Footer được liên kết với phần tử HTML

. Phần tử
là một loại thẻ ngữ nghĩa và được giới thiệu trong HTML5. Sử dụng đối tượng Footer, chúng ta có thể tạo và lấy phần tử
bằng cách sử dụng phương thức createElement () và getElementById () tương ứng.

Cú pháp

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

Tạo đối tượng footer - 

var p = document.createElement("FOOTER");

Ví dụ

Chúng ta hãy xem một ví dụ về đối tượng Footer - 

<!DOCTYPE html>
<html>
<head>
<script>
   function createFoot() {
      var f = document.createElement("FOOTER");
      document.body.appendChild(f);
      var p = document.createElement("P");
      var txt = document.createTextNode("Copyright ©, 2019");
      p.appendChild(txt);
      f.appendChild(p);
   }
</script>
</head>
<body>
<h1>Footer object example</h1>
<p>Create a footer for this webpage by clicking the below button</p>
<button onclick="createFoot()">CREATE</button>
</body>
</html>

Đầu ra

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

Đối tượng chân trang DOM HTML

Khi nhấp vào nút TẠO -

Đối tượng chân trang DOM HTML

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức createFoot () khi người dùng nhấp vào. 

<button onclick="createFoot()">CREATE</button>

Phương thức createFoot () tạo một phần tử footer bằng cách sử dụng phương thức createElement () của đối tượng tài liệu. Sau đó, chúng tôi nối phần tử footer vào phần thân tài liệu bằng phương thức appendChild () và tạo phần tử

khác bằng phương thức createElement ().

Sau đó, một nút văn bản được tạo bằng phương thức createTextNode () của đối tượng tài liệu. Sau đó, nút văn bản được nối vào đoạn văn bằng phương thức appendChild () trên đoạn. Cuối cùng, đoạn văn cùng với nút văn bản được thêm vào dưới dạng phần tử con của phần tử footer bằng phương thức appendChild () trên phần tử footer - 

function createFoot() {
   var f = document.createElement("FOOTER");
   document.body.appendChild(f);
   var p = document.createElement("P");
   var txt = document.createTextNode("Copyright ©, 2019");
   p.appendChild(txt);
   f.appendChild(p);
}