Hướng dẫn what does dom stand for in javascript? - dom đứng trong javascript là gì?

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 
 element
// paragraphs[1] is the second 
 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"]

  …

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ử

  …

  
    
      // 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];
      };
    
  
  

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.

  …

# 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"]

# 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"]

  …

  …

  
    
      // 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];
      };
    
  
  

  
    
      // 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];
      };
    
  
  

  
    
      // 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];
      };
    
  
  

  
    
      // 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];
      };
    
  
  

  
    
      // 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];
      };
    
  
  

  
    
      // 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];
      };
    
  
  

  
    
      // 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];
      };
    
  
  

  …

  …

# 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 Clear text content

  
  Set text content
  Clear text content

  
  Set text content
  Clear text content

  
  Set text content
  Clear text content

const table = document.getElementById["table"];
const tableAttrs = table.attributes; // Node/Element interface
for [let i = 0; i 
  
  Set text content
  Clear text content

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

const table = document.getElementById["table"];
const tableAttrs = table.attributes; // Node/Element interface
for [let i = 0; i 
  Set text content
  Clear text content

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

button {
  width: 200px;
}

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

button {
  width: 200px;
}

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

button {
  width: 200px;
}

  
    
      // 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];
      };
    
  
  

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"]

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

button {
  width: 200px;
}

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

button {
  width: 200px;
}

# 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"]

  …

  …

  …

  …

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 
  …

  …

# 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.

• 
    parent
    Add a child
    Remove child
  
  

  0

• 
    parent
    Add a child
    Remove child
  
  

  1

• 
    parent
    Add a child
    Remove child
  
  

  2

• 
    parent
    Add a child
    Remove child
  
  

  3

• 
    parent
    Add a child
    Remove child
  
  

  4

• 
    parent
    Add a child
    Remove child
  
  

  5

• 
    parent
    Add a child
    Remove child
  
  

  6

• 
    parent
    Add a child
    Remove child
  
  

  7

• 
    parent
    Add a child
    Remove child
  
  

  8

• 
    parent
    Add a child
    Remove child
  
  

  9

• .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;
  }
  

  0

• .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;
  }
  

  1

Ví dụ

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

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

.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;
}

.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;
}

.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;
}

.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;
}

• .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;
  }
  

  6 để truy cập

  .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;
  }
  

  3 và nút

• .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;
  }
  

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

• .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;
  }
  

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

HTML

  
  Set text content
  Clear text content

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ử

.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;
}

.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;
}

.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;
}

.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;
}

• .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;
  }
  

  6 để truy cập

  .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;
  }
  

  2 và các nút

• .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;
  }
  

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

• .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;
  }
  

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

HTML

  parent
  Add a child
  Remove child

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ả