JavaScript - DOM Document: Hướng dẫn dành cho người mới bắt đầu
Xin chào, những người học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của JavaScript và Document Object Model (DOM). Đừng lo lắng nếu những术语 này听起来 có vẻ đáng sợ - vào cuối bài hướng dẫn này, bạn sẽ có khả năng manipulates các trang web như một chuyên gia!
HTML DOM Document là gì?
Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bản vẽ của ngôi nhà đó giống như tài liệu HTML của bạn, và ngôi nhà thực tế là điều bạn thấy trong trình duyệt. Bây giờ, nếu bạn muốn thay đổi màu sắc của một bức tường hoặc thêm một cửa sổ mới sau khi ngôi nhà đã được xây dựng, DOM sẽ ra vào cuộc!
HTML DOM (Document Object Model) là một giao diện lập trình cho tài liệu HTML. Nó đại diện cho cấu trúc của một tài liệu dưới dạng một hierarchies như cây, trong đó mỗi node là một đối tượng đại diện cho một phần của tài liệu.
Đối tượng Document
Tại gốc của cây này là đối tượng document. Nó giống như nền móng của ngôi nhà chúng ta - mọi thứ khác đều được xây dựng trên nó.
Hãy bắt đầu với một ví dụ đơn giản:
<!DOCTYPE html>
<html>
<head>
<title>Trang DOM Đầu Tiên Của Tôi</title>
</head>
<body>
<h1>Chào mừng đến với DOM!</h1>
<p>Đây là một đoạn văn.</p>
</body>
</html>Trong cấu trúc HTML này, document ở trên cùng, tiếp theo là html, sau đó là head và body, và cứ thế.
Truy cập vào Đối tượng Document
Bây giờ chúng ta đã hiểu DOM là gì, hãy học cách truy cập vào nó. Trong JavaScript, chúng ta có thể dễ dàng truy cập vào đối tượng tài liệu bằng cách sử dụng từ khóa document.
Dưới đây là một ví dụ đơn giản:
console.log(document);Nếu bạn chạy đoạn mã này trong console của trình duyệt, bạn sẽ thấy toàn bộ đối tượng tài liệu. Đó giống như có cái nhìn toàn cảnh từ trên cao xuống ngôi nhà của chúng ta!
Các Thuộc tính của Đối tượng Document
Đối tượng tài liệu có nhiều thuộc tính cho phép chúng ta truy cập vào các phần khác nhau của tài liệu HTML. Hãy cùng khám phá một số thuộc tính này:
Thuộc tính childElementCount
Thuộc tính childElementCount trả về số lượng phần tử con mà một phần tử có. Đối với đối tượng tài liệu, nó trả về số lượng phần tử con trực tiếp của phần tử <html>.
console.log(document.childElementCount);Thông thường, thuộc tính này sẽ trả về 1, vì phần tử <html> thường chỉ có một phần tử con trực tiếp: phần tử <body>.
Thuộc tính links
Thuộc tính links trả về một bộ sưu tập tất cả các phần tử <a> và <area> trong tài liệu có thuộc tính href.
console.log(document.links);Điều này giống như hỏi, "Ngôi nhà của chúng ta có bao nhiêu cửa ra vào (liên kết)?"
Thuộc tính title
Thuộc tính title lấy hoặc đặt tiêu đề của tài liệu hiện tại.
console.log(document.title);
document.title = "Tiêu đề Mới Của Tôi";Điều này giống như thay đổi biển tên trên ngôi nhà của bạn!
Các Ví dụ Thực tế
Hãy áp dụng kiến thức của chúng ta vào một số ví dụ thực tế:
Ví dụ 1: Thay đổi Tiêu đề Trang
document.title = "Chào mừng đến với " + document.title;
console.log("Tiêu đề mới là: " + document.title);Đoạn mã này thêm "Chào mừng đến với " vào đầu tiêu đề trang hiện tại. Điều này giống như thêm một lời chào thân thiện vào biển tên của ngôi nhà!
Ví dụ 2: Đếm Liên kết
let linkCount = document.links.length;
console.log("Trang này có " + linkCount + " liên kết.");Đoạn mã này đếm số lượng liên kết trên trang của bạn. Điều này giống như đếm số lượng cách để ra khỏi ngôi nhà!
Ví dụ 3: Thay đổi Nội dung Trang
let newHeading = document.createElement("h2");
newHeading.textContent = "Đây là tiêu đề được thêm vào bởi JavaScript!";
document.body.appendChild(newHeading);Đoạn mã này tạo một phần tử <h2> mới, đặt nội dung văn bản của nó và thêm nó vào cuối <body>. Điều này giống như thêm một phòng mới vào ngôi nhà của bạn bằng JavaScript!
Các Phương thức Thường gặp của Document
Dưới đây là bảng một số phương thức thường gặp của Document:
| Phương thức | Mô tả |
|---|---|
document.getElementById(id) |
Trả về phần tử có ID được chỉ định |
document.getElementsByClassName(name) |
Trả về một bộ sưu tập các phần tử có tên class được chỉ định |
document.getElementsByTagName(name) |
Trả về một bộ sưu tập các phần tử có tên thẻ được chỉ định |
document.createElement(name) |
Tạo một phần tử node |
document.createTextNode(text) |
Tạo một node văn bản |
document.querySelector(selector) |
Trả về phần tử đầu tiên khớp với một bộ chọn CSS |
document.querySelectorAll(selector) |
Trả về tất cả các phần tử khớp với một bộ chọn CSS |
Kết luận
Xin chúc mừng! Bạn đã迈出了第一步进入JavaScript的DOM操作世界。 Nhớ rằng, DOM là công cụ của bạn để xây dựng các trang web động và tương tác. Nó giống như một cây phép có thể thay đổi bất kỳ phần nào của trang web của bạn theo ý muốn!
Trong hành trình tiếp theo của bạn, bạn sẽ khám phá thêm nhiều cách thú vị để sử dụng DOM. Hãy tiếp tục thực hành, 保持好奇心, và đừng ngại thử nghiệm. Trước khi bạn nhận ra, bạn sẽ xây dựng các trang web nhảy theo nhịp điệu của JavaScript của bạn!
Chúc mừng lập trình, những pháp sư web tương lai!
Credits: Image by storyset