Hướng dẫn how does html dom work? - html dom hoạt động như thế nào?

DOM là gì?

Mô hình đối tượng tài liệu (DOM) là giao diện lập trình cho các tài liệu web. Nó đại diện cho trang để các chương trình có thể thay đổi cấu trúc tài liệu, kiểu dáng và nội dung. DOM đại diện cho tài liệu là các nút và đối tượng; Bằng cách đó, ngôn ngữ lập trình có thể tương tác với trang.

Một trang web là một tài liệu có thể được hiển thị trong cửa sổ trình duyệt hoặc là nguồn HTML. Trong cả hai trường hợp, đó là cùng một tài liệu nhưng biểu diễn mô hình đối tượng tài liệu (DOM) cho phép nó được thao tác. Là một biểu diễn hướng đối tượng của trang web, nó có thể được sửa đổi với một ngôn ngữ kịch bản như JavaScript.

Ví dụ: DOM chỉ định rằng phương thức

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

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

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

Tất cả các thuộc tính, phương thức và sự kiện có sẵn để thao tác và tạo các trang web được tổ chức thành các đối tượng. Ví dụ: đối tượng

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

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

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

DOM được xây dựng bằng nhiều API hoạt động cùng nhau. DOM cốt lõi xác định các thực thể mô tả bất kỳ tài liệu và các đối tượng trong đó. Điều này được mở rộng khi cần bởi các API khác để thêm các tính năng và khả năng mới vào DOM. Ví dụ: API HTML DOM bổ sung hỗ trợ để đại diện cho các tài liệu HTML vào Core DOM và API SVG bổ sung hỗ trợ để đại diện cho các tài liệu SVG.

Dom và JavaScript

Ví dụ ngắn trước đó, giống như gần như tất cả các ví dụ, là JavaScript. Điều đó có nghĩa là, nó được viết bằng JavaScript, nhưng sử dụng DOM để truy cập vào tài liệu và các yếu tố của nó. DOM không phải là ngôn ngữ lập trình, nhưng không có nó, ngôn ngữ JavaScript sẽ không có bất kỳ mô hình hoặc khái niệm nào về các trang web, tài liệu HTML, tài liệu SVG và các bộ phận thành phần của chúng. Toàn bộ tài liệu, đầu, bảng trong tài liệu, tiêu đề bảng, văn bản trong các ô bảng và tất cả các yếu tố khác trong tài liệu là một phần của mô hình đối tượng tài liệu cho tài liệu đó. Tất cả chúng có thể được truy cập và thao tác bằng cách sử dụng ngôn ngữ viết và ngôn ngữ kịch bản như JavaScript.

DOM không phải là một phần của ngôn ngữ JavaScript, mà thay vào đó là một API web được sử dụng để xây dựng các trang web. JavaScript cũng có thể được sử dụng trong các bối cảnh khác. Ví dụ: Node.js chạy các chương trình JavaScript trên máy tính, nhưng cung cấp một bộ API khác và API DOM không phải là một phần cốt lõi của thời gian chạy Node.js.

DOM được thiết kế độc lập với bất kỳ ngôn ngữ lập trình cụ thể nào, làm cho biểu diễn cấu trúc của tài liệu có sẵn từ một API nhất quán duy nhất. Ngay cả khi hầu hết các nhà phát triển web sẽ chỉ sử dụng DOM thông qua JavaScript, việc triển khai DOM có thể được xây dựng cho bất kỳ ngôn ngữ nào, vì ví dụ Python này chứng minh:

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

Để biết thêm thông tin về những công nghệ nào có liên quan đến việc viết JavaScript trên web, hãy xem Tổng quan về JavaScript Technologies.

Truy cập DOM

Bạn không cần phải làm bất cứ điều gì đặc biệt để bắt đầu sử dụng DOM. Bạn sử dụng API trực tiếp trong JavaScript từ bên trong cái được gọi là tập lệnh, một chương trình do trình duyệt chạy.

Khi bạn tạo tập lệnh, cho dù nội tuyến trong phần tử

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

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

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

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

<body onload="console.log('Welcome to my home page!');">
  …
</body>

Vì thường không nên trộn cấu trúc của trang (được viết bằng HTML) và thao tác của DOM (được viết bằng JavaScript), các phần JavaScript sẽ được nhóm lại với nhau ở đây và tách ra khỏi HTML.

Ví dụ: hàm sau tạo một phần tử

<body onload="console.log('Welcome to my home page!');">
  …
</body>

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

Các loại dữ liệu cơ bản

Trang này cố gắng mô tả các đối tượng và loại khác nhau theo thuật ngữ đơn giản. Nhưng có một số loại dữ liệu khác nhau được truyền xung quanh API mà bạn nên biết.

Lưu ý: Bởi vì phần lớn mã sử dụng DOM xoay quanh việc thao túng các tài liệu HTML, nên việc chỉ các nút trong DOM là các phần tử là các phần tử, mặc dù nói đúng không phải mọi nút đều là một yếu tố. Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as elements, although strictly speaking not every node is an element.

Bảng sau đây mô tả ngắn gọn các loại dữ liệu này.

Ngoài ra còn có một số xem xét thuật ngữ phổ biến để ghi nhớ. Ví dụ, việc gọi bất kỳ nút

<body onload="console.log('Welcome to my home page!');">
  …
</body>

<body onload="console.log('Welcome to my home page!');">
  …
</body>

<body onload="console.log('Welcome to my home page!');">
  …
</body>

Giao diện DOM

Hướng dẫn này là về các đối tượng và những thứ thực tế bạn có thể sử dụng để thao tác với hệ thống phân cấp Dom. Có nhiều điểm mà hiểu làm thế nào những công việc này có thể gây nhầm lẫn. Ví dụ: đối tượng đại diện cho phần tử HTML

<body onload="console.log('Welcome to my home page!');">
  …
</body>

<body onload="console.log('Welcome to my home page!');">
  …
</body>

<body onload="console.log('Welcome to my home page!');">
  …
</body>

<body onload="console.log('Welcome to my home page!');">
  …
</body>

<body onload="console.log('Welcome to my home page!');">
  …
</body>

Nhưng mối quan hệ giữa các đối tượng và các giao diện mà chúng thực hiện trong DOM có thể gây nhầm lẫn và do đó, phần này cố gắng nói một chút gì đó về các giao diện thực tế trong đặc tả DOM và cách chúng có sẵn.

Giao diện và đối tượng

Nhiều đối tượng thực hiện một số giao diện khác nhau. Ví dụ, đối tượng bảng thực hiện giao diện

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

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

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

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

Khi bạn nhận được một tham chiếu đến một đối tượng

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

const table = document.getElementById("table");
const tableAttrs = table.attributes; // Node/Element interface
for (let i = 0; i < tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if (tableAttrs[i].nodeName.toLowerCase() === "border") {
    table.border = "1";
  }
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

Giao diện lõi trong DOM

Phần này liệt kê một số giao diện được sử dụng phổ biến nhất trong DOM. Ý tưởng không phải là để mô tả những gì các API này làm ở đây mà là để cung cấp cho bạn ý tưởng về các loại phương thức và thuộc tính bạn sẽ thấy rất thường xuyên khi bạn sử dụng DOM. Các API phổ biến này được sử dụng trong các ví dụ dài hơn trong chương ví dụ DOM ở cuối cuốn sách này.

Các đối tượng

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

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

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

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

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h2");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

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

Sau đây là một danh sách ngắn gọn về các API phổ biến trong tập lệnh trang Web và XML bằng DOM.

• const table = document.getElementById("table");
  const tableAttrs = table.attributes; // Node/Element interface
  for (let i = 0; i < tableAttrs.length; i++) {
    // HTMLTableElement interface: border attribute
    if (tableAttrs[i].nodeName.toLowerCase() === "border") {
      table.border = "1";
    }
  }
  // HTMLTableElement interface: summary attribute
  table.summary = "note: increased border";
  

  5

• const table = document.getElementById("table");
  const tableAttrs = table.attributes; // Node/Element interface
  for (let i = 0; i < tableAttrs.length; i++) {
    // HTMLTableElement interface: border attribute
    if (tableAttrs[i].nodeName.toLowerCase() === "border") {
      table.border = "1";
    }
  }
  // HTMLTableElement interface: summary attribute
  table.summary = "note: increased border";
  

  6

• const table = document.getElementById("table");
  const tableAttrs = table.attributes; // Node/Element interface
  for (let i = 0; i < tableAttrs.length; i++) {
    // HTMLTableElement interface: border attribute
    if (tableAttrs[i].nodeName.toLowerCase() === "border") {
      table.border = "1";
    }
  }
  // HTMLTableElement interface: summary attribute
  table.summary = "note: increased border";
  

  7

• const table = document.getElementById("table");
  const tableAttrs = table.attributes; // Node/Element interface
  for (let i = 0; i < tableAttrs.length; i++) {
    // HTMLTableElement interface: border attribute
    if (tableAttrs[i].nodeName.toLowerCase() === "border") {
      table.border = "1";
    }
  }
  // HTMLTableElement interface: summary attribute
  table.summary = "note: increased border";
  

  8

• const table = document.getElementById("table");
  const tableAttrs = table.attributes; // Node/Element interface
  for (let i = 0; i < tableAttrs.length; i++) {
    // HTMLTableElement interface: border attribute
    if (tableAttrs[i].nodeName.toLowerCase() === "border") {
      table.border = "1";
    }
  }
  // HTMLTableElement interface: summary attribute
  table.summary = "note: increased border";
  

  9

• <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  0

• <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  1

• <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  2

• <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  3

• <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  4

• <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  5

• <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  6

Ví dụ

Đặt nội dung văn bản

Ví dụ này sử dụng phần tử

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

• .container {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
  }
  
  button {
    width: 200px;
  }
  
  

  1 để truy cập

  <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  8 và nút

• .container {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
  }
  
  button {
    width: 200px;
  }
  
  

  3 để nghe các lần nhấp vào nút

• .container {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
  }
  
  button {
    width: 200px;
  }
  
  

  4 để đặt và xóa văn bản.

HTML

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

CSS

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 200px;
}

JavaScript

const story = document.body.querySelector(".story");

const setText = document.body.querySelector("#set-text");
setText.addEventListener("click", () => {
  story.textContent = "It was a dark and stormy night...";
});

const clearText = document.body.querySelector("#clear-text");
clearText.addEventListener("click", () => {
  story.textContent = "";
});

Kết quả

Thêm một phần tử trẻ em

Ví dụ này sử dụng phần tử

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

• .container {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
  }
  
  button {
    width: 200px;
  }
  
  

  1 để truy cập

  <div class="container">
    <textarea class="story"></textarea>
    <button id="set-text" type="button">Set text content</button>
    <button id="clear-text" type="button">Clear text content</button>
  </div>
  

  7 và các nút

• .container {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
  }
  
  button {
    width: 200px;
  }
  
  

  3 để nghe các lần nhấp vào nút

• .container {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
  }
  
  button {
    width: 200px;
  }
  
  

  4 để đặt và xóa văn bản.
• HTML
• CSS

HTML

<div class="container">
  <div class="parent">parent</div>
  <button id="add-child" type="button">Add a child</button>
  <button id="remove-child" type="button">Remove child</button>
</div>

CSS

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 100px;
}

div.parent {
  border: 1px solid black;
  padding: 5px;
  width: 100px;
  height: 100px;
}

div.child {
  border: 1px solid red;
  margin: 10px;
  padding: 5px;
  width: 80px;
  height: 60px;
  box-sizing: border-box;
}

JavaScript

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

Kết quả