Mô hình đối tượng tài liệu [DOM] là biểu diễn dữ liệu của các đối tượng bao gồm cấu trúc và nội dung của tài liệu trên web. Hướng dẫn này sẽ giới thiệu DOM, xem cách DOM đại diện cho một tài liệu HTML trong bộ nhớ và cách sử dụng API để tạo nội dung và ứng dụng web.Document Object Model [DOM] is the data representation of the objects that comprise the structure and content of a document on the web. This guide will introduce the DOM, look at how the DOM represents an HTML document in memory and how to use APIs to create web content and applications. 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 DOM là gì?
1 trong đoạn mã này phải trả về danh sách tất cả các 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"]
2 trong tài liệu:# 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"]
3 đại diện cho chính tài liệu, bất kỳ đố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"]
4 nào thực hiện giao diện DOM # 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"]
5 để truy cập các bảng HTML, v.v., tất cả các đối tượng.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"]
6 hay được đưa vào trang web, bạn có thể bắt đầu sử dụng API cho 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"]
3 hoặ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"]
8 để thao tác tài liệu hoặc bất kỳ yếu tố nào khác nhau trong trang web [ Các yếu tố hậu duệ của tài liệu]. Lập trình DOM của bạn có thể là một cái gì đó đơn giản như ví dụ sau, hiển thị thông báo trên bảng điều khiển bằng cách sử dụng hàm # 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"]
9:
…
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ử
…
0 mới, thêm văn bản vào phần tử đó và sau đó thêm nó vào cây cho tài liệu:
// 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.
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
…
1 nào là
…
2, và để gọi một mảng các nút DOM là
…
3. Bạn sẽ tìm thấy các thuật ngữ này và các thuật ngữ khác sẽ được giới thiệu và sử dụng trong suốt tài liệu.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
…
4 có thuộc tính
…
5 từ giao diện
…
6 nhưng thuộc tính
…
7 của nó từ giao diện
…
8. Trong cả hai trường hợp, tài sản bạn muốn là trong đối tượng hình thức đó.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"]
5 chuyên dụng, bao gồm các phương thức như
// 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];
};
0 và
// 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];
};
1. Nhưng vì nó cũng là một thành phần 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"]
4 thực hiện giao diện
// 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];
};
3 được mô tả trong chương tham chiếu DOM
// 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];
};
3. Và cuối cùng, vì một phần tử HTML cũng có liên quan đến DOM, một nút trong cây các nút tạo ra mô hình đối tượng cho trang HTML hoặc XML, đối tượng bảng cũng thực hiện giao diện
// 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];
};
5 cơ bản hơn, từ mà
// 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];
};
3 xuất phát.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"]
4, như trong ví dụ sau, bạn thường xuyên sử dụng cả ba giao diện này có thể thay thế cho đối tượng, có lẽ không biết nó.const table = document.getElementById["table"];
const tableAttrs = table.attributes; // Node/Element interface
for [let i = 0; i
// 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];
};
3 kế thừa từ giao diện
// 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];
};
5 chung và cùng nhau, hai giao diện này cung cấp nhiều phương thức và thuộc tính bạn sử dụng trên các yếu tố riêng lẻ. Các yếu tố này cũng có thể có các giao diện cụ thể để xử lý loại dữ liệu mà các yếu tố mà các yếu tố giữ, như trong 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"]
4 trong phần trước.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.
0const table = document.getElementById["table"]; const tableAttrs = table.attributes; // Node/Element interface for [let i = 0; i Set text content Clear text content
1Set text content Clear text content
2Set text content Clear text content
3Set text content Clear text content
4Set text content Clear text content
5Set text content Clear text content
6Set text content Clear text content
Ví dụ
Đặt nội dung văn bản
Ví dụ này sử dụng phần tử
Set text content
Clear text content
7 chứa các phần tử
Set text content
Clear text content
8 và hai
Set text content
Clear text content
9. Khi người dùng nhấp vào nút đầu tiên, chúng tôi đặt một số văn bản trong
Set text content
Clear text content
8. Khi người dùng nhấp vào nút thứ hai, chúng tôi xóa văn bản. Chúng tôi sử dụng:
1 để truy cập.container { display: flex; gap: 0.5rem; flex-direction: column; } button { width: 200px; }
8 và nútSet text content Clear text content
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..container { display: flex; gap: 0.5rem; flex-direction: column; } button { width: 200px; }
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ử
Set text content
Clear text content
7 chứa các phần tử
Set text content
Clear text content
7 và hai
Set text content
Clear text content
9. Khi người dùng nhấp vào nút đầu tiên, chúng tôi tạo một phần tử mới và thêm nó dưới dạng con của
Set text content
Clear text content
7. Khi người dùng nhấp vào nút thứ hai, chúng tôi sẽ xóa phần tử con. Chúng tôi sử dụng:
1 để truy cập.container { display: flex; gap: 0.5rem; flex-direction: column; } button { width: 200px; }
7 và các nútSet text content Clear text content
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..container { display: flex; gap: 0.5rem; flex-direction: column; } button { width: 200px; }
- 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"]
0Kết quả
Thêm một phần tử trẻ em
1 để truy cập 7 và các nút |