1.1 Các khái niệm cơ bản về DOM
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ó biểu diễn cấu trúc tài liệu như một cây các nút, trong đó mỗi nút là một phần của tài liệu, như phần tử, văn bản, nhận xét, v.v... Hiểu DOM và các nút của nó là một khía cạnh cơ bản trong việc làm việc với công nghệ web.
Các khái niệm cơ bản về DOM
DOM là gì?
DOM (Document Object Model) là cấu trúc phân cấp mô tả nội dung của một tài liệu HTML. Nó cho phép các chương trình và script truy cập động vào nội dung của tài liệu và thay đổi cấu trúc, phong cách và nội dung của nó.
Các nút và phần tử
Trong ngữ cảnh của DOM, mọi phần của tài liệu được xem như là các nút (node). Các nút có một vài loại:
- Nút phần tử: biểu diễn các thẻ HTML.
- Nút văn bản: biểu diễn văn bản nằm bên trong các nút phần tử.
- Nút nhận xét: biểu diễn các nhận xét trong HTML.
- Nút tài liệu: biểu diễn chính tài liệu.
Cây nút
DOM biểu diễn một cấu trúc cây, trong đó mỗi nút có thể có các con (nút con). Nút gốc là đối tượng document, đại diện cho toàn bộ tài liệu HTML.
Ví dụ cấu trúc DOM:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Đối với tài liệu này, cây DOM sẽ trông như sau:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Các loại nút
1. Nút phần tử
Nút phần tử tương ứng với các thẻ HTML. Ví dụ, nút cho thẻ <body> được gọi là nút phần tử.
Ví dụ:
Trong ví dụ này, <body> và <h1> là các nút phần tử.
<body>
<h1>Hello, World!</h1>
</body>
2. Nút văn bản
Nút văn bản chứa văn bản bên trong các nút phần tử. Nút văn bản là con của các nút phần tử và chứa dữ liệu dạng chuỗi.
Ví dụ:
Trong ví dụ này, văn bản "Hello, World!" là nút văn bản, là con của nút <h1>.
<h1>Hello, World!</h1>
3. Nút nhận xét
Nút nhận xét đại diện cho các nhận xét trong HTML, bắt đầu bằng <!-- và kết thúc bằng -->.
Ví dụ:
Trong ví dụ này, <!-- This is a comment --> là một nút nhận xét.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Nút tài liệu
Nút tài liệu biểu diễn nút gốc của cây DOM và là nút cha của tất cả các nút khác trong tài liệu.
Ví dụ:
Đối tượng document trong JavaScript biểu diễn một nút tài liệu:
console.log(document);
1.3 Tương tác với các nút DOM
1. Lấy thông tin về các nút
Thuộc tính của đối tượng nút cho phép lấy thông tin về nút cụ thể. Ví dụ, có thể biết được loại nút, tên và nội dung của nó.
Ví dụ:
<html>
<head>
<title>Trang web của tôi</title>
</head>
<body>
<h1>Xin chào, thế giới!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Sẽ hiển thị: H1
console.log(heading.nodeType); // Sẽ hiển thị: 1 (Nút phần tử)
console.log(heading.textContent); // Sẽ hiển thị: "Xin chào, thế giới!"
2. Thay đổi nội dung của các nút
Nội dung của nút có thể được thay đổi bằng các thuộc tính và phương thức của DOM.
Ví dụ:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. Làm việc với các nút con
Mỗi nút DOM có thể có nút con mà có thể truy cập và thay đổi được.
Ví dụ:
<html>
<head>
<title>Trang web của tôi</title>
</head>
<body>
<ul>
<li>Về chúng tôi</li>
<li>Nghề nghiệp</li>
<li>Liên hệ</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Sẽ hiển thị văn bản của phần tử đầu tiên trong danh sách
console.log(lastItem.textContent); // Sẽ hiển thị văn bản của phần tử cuối cùng trong danh sách
1.4 Các thuộc tính hữu ích
1. Các thuộc tính nodeName và nodeType
nodeNametrả về tên của nútnodeTypetrả về loại của nút (ví dụ, 1 cho nút phần tử, 3 cho nút văn bản)
Ví dụ:
<html>
<head>
<title>Trang web của tôi</title>
</head>
<body>
<h1>Xin chào, thế giới!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Sẽ hiển thị: H1
console.log(element.nodeType); // Sẽ hiển thị: 1
2. Các thuộc tính textContent và innerHTML
textContenttrả về hoặc thiết lập nội dung văn bản của nútinnerHTMLtrả về hoặc thiết lập nội dung HTML của nút
Ví dụ:
<html>
<head>
<title>Trang web của tôi</title>
</head>
<body>
<p>Thực sự <b>thú vị</b> và <b>có ích</b> đoạn văn!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Sẽ hiển thị nội dung văn bản của đoạn văn
console.log(element.innerHTML); // Sẽ hiển thị nội dung HTML của đoạn văn
3. Các thuộc tính parentNode, childNodes, firstChild và lastChild
parentNodetrả về nút chachildNodestrả về tập hợp tất cả các nút confirstChildtrả về nút con đầu tiênlastChildtrả về nút con cuối cùng
Ví dụ:
<html>
<head>
<title>Trang web của tôi</title>
</head>
<body>
<ul>
<li>Về chúng tôi</li>
<li>Nghề nghiệp</li>
<li>Liên hệ</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Sẽ hiển thị nút cha
console.log(element.childNodes); // Sẽ hiển thị tập hợp các nút con
console.log(element.firstChild); // Sẽ hiển thị nút con đầu tiên
console.log(element.lastChild); // Sẽ hiển thị nút con cuối cùng
GO TO FULL VERSION