JavaScript - Đối tượng tài liệu (DOM)

DOM là gì?

Đối tượng tài liệu, thường được gọi là DOM, là một giao diện lập trình cho các tài liệu HTML và XML. Nó đại diện cho cấu trúc của một tài liệu dưới dạng một cây phân cấp hình cây của các đối tượng, trong đó mỗi đối tượng tương ứng với một phần của tài liệu, chẳng hạn như một phần tử, thuộc tính hoặc nút văn bản.

JavaScript - HTML DOM

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà bằng những khối Lego. DOM giống như một bản đồ ma thuật không chỉ cho bạn biết ngôi nhà được xây dựng như thế nào mà còn cho phép bạn điều chỉnh và sắp xếp lại các khối bằng JavaScript. Đây là một công cụ mạnh mẽ giúp kết nối giữa các trang web và ngôn ngữ lập trình.

Các khái niệm chính của DOM

Node: Mỗi phần của tài liệu đều là một node. Các phần tử, thuộc tính và văn bản đều là các loại node khác nhau.
Cấu trúc cây: DOM đại diện cho tài liệu dưới dạng một cây, với đối tượng document ở gốc.
Duyệt: Bạn có thể duyệt qua cây DOM bằng cách sử dụng các phương thức và thuộc tính khác nhau.
Thao tác: DOM cho phép bạn thay đổi cấu trúc, phong cách và nội dung của tài liệu một cách động.

Hãy xem một ví dụ đơn giản để minh họa các khái niệm này:

<!DOCTYPE html>
<html>
<head>
    <title>My First DOM Example</title>
</head>
<body>
    <h1 id="mainHeading">Welcome to DOM</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Trong tài liệu HTML này, cây DOM sẽ trông giống như sau:

document
└── html
    ├── head
    │   └── title
    │       └── "My First DOM Example"
    └── body
        ├── h1
        │   └── "Welcome to DOM"
        └── p
            └── "This is a paragraph."

HTML DOM là gì?

HTML DOM là một mô hình đối tượng tiêu chuẩn và giao diện lập trình cho HTML. Nó xác định:

Các phần tử HTML là các đối tượng
Các thuộc tính của tất cả các phần tử HTML
Các phương thức để truy cập tất cả các phần tử HTML
Các sự kiện cho tất cả các phần tử HTML

Về bản chất, HTML DOM là một tiêu chuẩn về cách lấy, thay đổi, thêm hoặc xóa các phần tử HTML.

Làm việc với HTML DOM

Hãy cùng khám phá một số thao tác phổ biến bằng HTML DOM:

Truy cập các phần tử

// Lấy một phần tử theo ID
const heading = document.getElementById('mainHeading');

// Lấy các phần tử theo tên thẻ
const paragraphs = document.getElementsByTagName('p');

// Lấy các phần tử theo tên class
const highlights = document.getElementsByClassName('highlight');

// Sử dụng querySelector để chọn phức tạp hơn
const firstParagraph = document.querySelector('p');

Trong các ví dụ này, chúng ta đang sử dụng các phương thức khác nhau để chọn các phần tử từ tài liệu HTML của mình. Đó giống như sử dụng một cây phép để chỉ vào các phần cụ thể của trang web!

Thay đổi nội dung

// Thay đổi nội dung văn bản của một phần tử
heading.textContent = 'Welcome to the Wonderful World of DOM!';

// Thay đổi nội dung HTML của một phần tử
paragraphs[0].innerHTML = 'This paragraph has been <strong>modified</strong>!';

Ở đây, chúng ta đang cập nhật nội dung của các phần tử. Đó giống như xóa và viết lại các phần của trang web ngay lập tức!

Thay đổi phong cách

// Thay đổi phong cách của một phần tử
heading.style.color = 'blue';
heading.style.fontSize = '24px';

Với các dòng này, chúng ta đang thay đổi外观 của tiêu đề, thay đổi màu sắc và kích thước của nó. Đó giống như có một nhà thiết kế thời trang cho các phần tử web của bạn!

Tạo và xóa các phần tử

// Tạo một phần tử mới
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a newly created paragraph.';

// Thêm phần tử mới vào tài liệu
document.body.appendChild(newParagraph);

// Xóa một phần tử
document.body.removeChild(paragraphs[0]);

Trong ví dụ này, chúng ta đang đóng vai một kiến trúc sư trang web - xây dựng các phần tử mới và phá hủy các phần tử cũ chỉ với một vài dòng mã!

Tại sao DOM cần thiết?

DOM rất quan trọng vì nhiều lý do:

Trang web động: Nếu không có DOM, các trang web sẽ là tĩnh. DOM cho phép chúng ta tạo ra các trải nghiệm web tương tác và động.
Phân tách các mối quan tâm: DOM cung cấp một cách để manipulatie nội dung và cấu trúc của một trang web bằng JavaScript, giữ nó tách biệt khỏi HTML và CSS.
Tương thích cross-browser: DOM cung cấp một giao diện lập trình tiêu chuẩn hoạt động trên các trình duyệt khác nhau, đảm bảo sự nhất quán trong phát triển web.
Xử lý sự kiện: DOM cho phép chúng ta gắn các bộ xử lý sự kiện vào các phần tử, cho phép chúng ta phản hồi các tương tác người dùng như nhấp chuột, nhấn phím và di chuyển chuột.
AJAX và các ứng dụng trang đơn: DOM rất quan trọng cho việc cập nhật các phần của trang web mà không cần tải lại toàn bộ trang, nền tảng của các ứng dụng web hiện đại.

Hãy xem một ví dụ kết hợp nhiều khái niệm này:

<!DOCTYPE html>
<html>
<head>
    <title>Todo List</title>
    <style>
        .completed { text-decoration: line-through; }
    </style>
</head>
<body>
    <h1>My Todo List</h1>
    <input type="text" id="newTodo">
    <button id="addTodo">Add Todo</button>
    <ul id="todoList"></ul>

    <script>
        const newTodoInput = document.getElementById('newTodo');
        const addTodoButton = document.getElementById('addTodo');
        const todoList = document.getElementById('todoList');

        addTodoButton.addEventListener('click', function() {
            const todoText = newTodoInput.value;
            if (todoText) {
                const li = document.createElement('li');
                li.textContent = todoText;

                li.addEventListener('click', function() {
                    this.classList.toggle('completed');
                });

                todoList.appendChild(li);
                newTodoInput.value = '';
            }
        });
    </script>
</body>
</html>

Ví dụ này minh họa một ứng dụng danh sách công việc đơn giản. Nó thể hiện:

Truy cập các phần tử bằng DOM
Tạo các phần tử mới
Thay đổi nội dung và phong cách của các phần tử
Xử lý sự kiện
Cập nhật trang web động mà không cần tải lại

Bằng cách sử dụng DOM, chúng ta đã tạo ra một ứng dụng tương tác mà phản hồi với các tương tác người dùng và cập nhật theo thời gian thực. Đây là sức mạnh của DOM trong hành động!

Các phương thức và thuộc tính DOM phổ biến

Dưới đây là bảng một số phương thức và thuộc tính DOM thường được sử dụng:

Phương thức/Thuộc tính	Mô tả
`getElementById()`	Trả về phần tử có ID được chỉ định
`getElementsByClassName()`	Trả về một bộ sưu tập các phần tử có tên class được chỉ định
`getElementsByTagName()`	Trả về một bộ sưu tập các phần tử có tên thẻ được chỉ định
`querySelector()`	Trả về phần tử đầu tiên khớp với bộ chọn CSS
`querySelectorAll()`	Trả về tất cả các phần tử khớp với bộ chọn CSS
`createElement()`	Tạo một phần tử mới
`appendChild()`	Thêm một phần tử con mới
`removeChild()`	Xóa một phần tử con
`innerHTML`	Lấy hoặc đặt nội dung HTML bên trong một phần tử
`textContent`	Lấy hoặc đặt nội dung văn bản của một phần tử
`style`	Lấy hoặc đặt phong cách nội tuyến của một phần tử
`classList`	Cho phép manipulatie các class của một phần tử
`addEventListener()`	Gắn một bộ xử lý sự kiện vào một phần tử

Cuối cùng, DOM là một công cụ mạnh mẽ mang lại sự sống cho các trang web. Nó cho phép chúng ta tạo ra các trải nghiệm web tương tác và động. Khi bạn tiếp tục hành trình phát triển web của mình, bạn sẽ thấy DOM là một đồng minh không thể thiếu trong việc tạo ra các ứng dụng web hấp dẫn và phản hồi. Chúc bạn may mắn trong việc lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - từ khóa var

Hướng Dẫn Tiếp Theo:

JavaScript - Phương thức DOM