JavaScript - Đối tượng Document

Xin chào các bạn học lập trình! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của Đối tượng Document trong JavaScript. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ dẫn dắt bạn từng bước trong hành trình này, giống như tôi đã làm cho hàng trăm sinh viên trong những năm dạy học của mình. Hãy cùng bắt đầu cuộc phiêu lưu này nhé!

JavaScript - Document Object

Đối tượng Window Document

Khi bạn làm việc với JavaScript trong trình duyệt web, một trong những điều quan trọng nhất bạn sẽ tương tác là Đối tượng Document. Nhưng trước khi chúng ta đi vào đó, hãy hiểu về đối tượng cha của nó: Đối tượng Window.

Hãy tưởng tượng trình duyệt web của bạn như một ngôi nhà. Đối tượng Window đại diện cho toàn bộ ngôi nhà, trong khi Đối tượng Document giống như phòng khách chính nơi xảy ra phần lớn các hoạt động. Mọi thứ bạn thấy trong cửa sổ trình duyệt đều là phần của Đối tượng Window, và nội dung trang web cụ thể là phần của Đối tượng Document.

Dưới đây là một ví dụ đơn giản để minh họa điều này:

console.log(window.document === document); // Output: true

Điều này cho thấy document thực sự là một thuộc tính của đối tượng window, nhưng chúng ta có thể truy cập nó trực tiếp bằng document để tiện lợi.

Thuộc tính của Đối tượng Document trong JavaScript

Bây giờ chúng ta đã hiểu Đối tượng Document nằm ở đâu, hãy khám phá một số thuộc tính của nó. Những thuộc tính này cho phép chúng ta truy cập và manipulatie các phần khác nhau của trang web của mình.

1. document.title

Thuộc tính này cho phép bạn lấy hoặc đặt tiêu đề của trang web của bạn - bạn biết đấy, văn bản xuất hiện trong thẻ tab của trình duyệt.

console.log(document.title); // Xuất tiêu đề trang hiện tại
document.title = "Trang web tuyệt vời của tôi"; // Thay đổi tiêu đề trang

2. document.body

Điều này cho bạn quyền truy cập vào phần tử <body> của tài liệu HTML của bạn.

document.body.style.backgroundColor = "lightblue";

Dòng này sẽ thay đổi màu nền của toàn bộ trang của bạn thành xanh lam. Rất tuyệt phải không?

3. document.URL

Thuộc tính này chỉ đọc cho bạn URL đầy đủ của trang hiện tại.

console.log(document.URL); // Xuất điều gì đó như "https://www.example.com/page.html"

Phương thức của Đối tượng Document trong JavaScript

Phương thức giống như những siêu năng lực của Đối tượng Document. Chúng cho phép chúng ta làm nhiều điều thú vị với trang web của mình.

1. document.getElementById()

Đây có lẽ là phương thức bạn sẽ sử dụng thường xuyên nhất. Nó cho phép bạn lấy một phần tử từ HTML bằng ID của nó.

let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "Xin chào, tôi đã được thay đổi bởi JavaScript!";

Trong ví dụ này, chúng ta đang tìm một phần tử có ID "mySpecialDiv" và thay đổi nội dung của nó.

2. document.createElement()

Phương thức này cho phép bạn tạo mới các phần tử HTML từ đầu!

let newParagraph = document.createElement("p");
newParagraph.textContent = "Tôi là đoạn văn mới, rất vui được gặp bạn!";
document.body.appendChild(newParagraph);

Ở đây, chúng ta tạo một phần tử đoạn văn mới, đặt nội dung của nó và thêm nó vào cuối phần thân của tài liệu.

3. document.querySelector()

Phương thức mạnh mẽ này cho phép bạn chọn các phần tử bằng cách sử dụng các bộ chọn CSS.

let firstButton = document.querySelector("button");
firstButton.style.color = "red";

Điều này sẽ tìm nút đầu tiên trên trang của bạn và làm cho văn bản của nó đỏ.

Danh sách Thuộc tính của Đối tượng Document

Hãy tóm tắt một số thuộc tính quan trọng của Đối tượng Document trong bảng tiện lợi:

Thuộc tính	Mô tả
document.title	Tiêu đề của tài liệu hiện tại
document.body	Phần tử `<body>`
document.head	Phần tử `<head>`
document.URL	URL đầy đủ của tài liệu
document.domain	Tên miền của máy chủ tài liệu
document.lastModified	Ngày tài liệu最后一次修改

Danh sách Phương thức của Đối tượng Document

Và đây là bảng của một số phương thức quan trọng của Đối tượng Document:

Phương thức	Mô tả
document.getElementById()	Trả về phần tử có ID được chỉ định
document.getElementsByClassName()	Trả về một bộ sưu tập các phần tử có tên class được chỉ định
document.getElementsByTagName()	Trả về một bộ sưu tập các phần tử có tên thẻ được chỉ định
document.querySelector()	Trả về phần tử đầu tiên khớp với bộ chọn CSS
document.querySelectorAll()	Trả về tất cả các phần tử khớp với bộ chọn CSS
document.createElement()	Tạo một phần tử HTML mới
document.write()	Ghi các biểu thức HTML hoặc mã JavaScript vào tài liệu

Nhớ rằng, học manipulatie Đối tượng Document giống như học trở thành một phù thủy trong thế giới phát triển web. Với những công cụ này, bạn có thể làm cho các trang web của mình sống động và phản ứng với các hành động của người dùng theo những cách kỳ diệu.

Khi chúng ta kết thúc bài học này, tôi nhớ lại một sinh viên tôi đã từng có, người ban đầu rất lo lắng trước tất cả các thuộc tính và phương thức này. Nhưng với sự thực hành, cô ấy đã trở nên thành thạo đến mức có thể manipulatie các trang web trong giấc ngủ! (Như gần như vậy.) Ch关键是 để thử nghiệm và vui chơi với nó.

Vậy, các bạn học sinh yêu quý của tôi, đừng sợ hãi khi chơi với các khái niệm này. Thử thay đổi tiêu đề của trang này, hoặc tạo một phần tử mới và thêm nó vào phần thân. Càng thực hành nhiều, bạn sẽ càng thấy tự nhiên. Trước khi bạn nhận ra, bạn sẽ tạo ra các trải nghiệm web tương tác như một chuyên gia!

Chúc các bạn lập trình vui vẻ, và nhớ rằng - trong thế giới lập trình, sự tò mò là tài sản lớn nhất của bạn. Tiếp tục khám phá, tiếp tục hỏi và quan trọng nhất, tiếp tục lập trình!

Credits: Image by storyset

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

JavaScript - Đối tượng Cửa sổ

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

JavaScript - Đối tượng Màn hình