Written by dammecode

Frontend cơ bản – DOM

Hamburg_Dom_08

DOM là gì?

DOM = Document Object Model (Mô hình đối tượng Document)

Trong đó Document là HTML hay XML document.

Có thể hiểu DOM là một giao diện lập trình cho các file HTML hay XML, khi chúng ta muốn tương tác tới một trang web (bằng code JavaScript chẳng hạn) thì bắt buộc phải biễu diễn trang web dưới dạng dữ liệu có cấu trúc.

Lấy ví dụ với một HTML document đơn giản như sau:

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
   
src=“awesome-photo.jpg”>

 


  </body>
</html>

HTML document này mô tả một trang web với mối liên hệ giữa các tag với nhau theo kiểu quan hệ cha-con. Do vậy một trang web HTML sẽ được biễu diễn dưới dạng DOM document bao gồm các node và object dưới dạng cấu trúc cây như hình dưới đây:

Để tương tác với DOM bằng JavaScript, chúng ta có thể dùng hàm getElementsByTagName

var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

DOM và JavaScript

DOM không phải là một ngôn ngữ lập trình nhưng thiếu nó thì JavaScript không thể hiểu được HTML/XML document và các thành phần của nó. Mọi thành phần trong một document (bao gồm document nói chung, head, table trong document, table header, text trong table cell) là một phần của Document Object Model của document đó, vì vậy mà chúng có thể được truy cập và thay đổi bởi một ngôn ngữ kịch bản như JavaScript.

Nói như vậy có nghĩa là DOM là một giao diện độc lập với bất kỳ ngôn ngữ lập trình nào, mặc dù JavaScript là ngôn ngữ được dùng phổ biến để truy cập DOM, các ngôn ngữ lập trình khác cũng có khả năng tương tự. Chẳng hạn với đoạn mã Python sau:

# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

Một số ví dụ

Hiển thị alert text khi document đã load xong (DOM đã sẵn sàng phục vụ)

<body onload="window.alert('Welcome to my home page!');">

Tạo một thẻ H1 mới trong DOM và add text vào cho thẻ này

<html>
  <head>
    <script>
       // run this function when the document is loaded
       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>

 

Leave a comment