Nếu bạn mới bắt đầu học JavaScript, bạn có thể đã nghe nói về DOM. Nhưng nó chính xác là gì?
Trong bài viết này, tôi sẽ giải thích DOM là gì và cung cấp một số ví dụ mã JavaScript.
Chúng ta sẽ xem cách chọn các thành phần từ tài liệu HTML, cách tạo các thành phần, cách thay đổi kiểu CSS nội tuyến và cách lắng nghe các sự kiện.
DOM là gì?
DOM là viết tắt của Mô hình đối tượng tài liệu. Nó là một giao diện lập trình cho phép chúng ta tạo, thay đổi hoặc xóa các phần tử khỏi tài liệu. Chúng tôi cũng có thể thêm các sự kiện vào các yếu tố này để làm cho trang của chúng tôi năng động hơn.
DOM xem một tài liệu HTML dưới dạng cây các nút. Một nút đại diện cho một phần tử HTML.
Chúng ta hãy xem mã HTML này để hiểu rõ hơn về cấu trúc cây DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM tree structure</title>
</head>
<body>
<h1>DOM tree structure</h1>
<h2>Learn about the DOM</h2>
</body>
</html>Tài liệu của chúng tôi được gọi là nút gốc và chứa một nút con là nút <html> thành phần. Các <html> phần tử chứa hai phần tử con là <head> và <body> phần tử.
cả hai <head> và <body> các phần tử có con của riêng chúng.
Đây là một cách khác để hình dung cây nút này.
Chúng tôi có thể truy cập các phần tử này trong tài liệu và thay đổi chúng bằng JavaScript.
Hãy xem một vài ví dụ về cách chúng ta có thể làm việc với DOM bằng JavaScript.
Cách chọn các thành phần trong tài liệu
Có một vài phương pháp khác nhau để chọn một thành phần trong tài liệu HTML.
Trong bài viết này, chúng tôi sẽ tập trung vào ba trong số các phương pháp đó:
getElementById()querySelector()querySelectorAll()
getElementById()
Trong HTML, ids được sử dụng làm mã định danh duy nhất cho các phần tử HTML. Điều này có nghĩa là bạn không thể có cùng id đặt tên cho hai phần tử khác nhau.
Điều này sẽ không chính xác:
<p id="para">This is my first paragraph.</p>
<p id="para">This is my second paragraph.</p>Bạn sẽ phải chắc chắn rằng những ids là duy nhất như thế này:
<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p> Trong JavaScript, chúng ta có thể lấy một thẻ HTML bằng cách tham chiếu id Tên.
document.getElementById("id name goes here")Đoạn mã này yêu cầu máy tính lấy <p> phần tử với id của para1 và in phần tử ra bàn điều khiển.
const paragraph1 = document.getElementById("para1");
console.log(paragraph1);
Nếu chúng ta chỉ muốn đọc nội dung của đoạn văn, thì chúng ta có thể sử dụng textContent tài sản bên trong console.log().
const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);
querySelector()
Bạn có thể sử dụng phương pháp này để tìm các phần tử có một hoặc nhiều bộ chọn CSS.
Tôi đã tạo ví dụ HTML này về các chương trình truyền hình yêu thích của mình:
<h1>Favorite TV shows</h1>
<ul class="list">
<li>Golden Girls</li>
<li>Archer</li>
<li>Rick and Morty</li>
<li>The Crown</li>
</ul>Nếu tôi muốn tìm và in ra bàn điều khiển thì h1 phần tử, sau đó tôi có thể sử dụng tên thẻ đó bên trong querySelector().
const h1Element = document.querySelector("h1");
console.log(h1Element);
Nếu tôi muốn nhắm mục tiêu class="list" để in danh sách không có thứ tự ra bàn điều khiển, sau đó tôi sẽ sử dụng .list bên trong querySelector().
Các . trước list yêu cầu máy tính nhắm mục tiêu một tên lớp. Nếu bạn muốn nhắm mục tiêu một id sau đó bạn sẽ sử dụng một # ký hiệu trước tên.
const list = document.querySelector(".list");
console.log(list);
querySelectorAll()
Phương thức này tìm tất cả các phần tử khớp với bộ chọn CSS và trả về danh sách tất cả các nút đó.
Nếu tôi muốn tìm tất cả <li> các mục trong ví dụ của chúng tôi, tôi có thể sử dụng > tổ hợp con để tìm tất cả các phần tử con của <ul>.
const listItems = document.querySelectorAll("ul > li");
console.log(listItems); 
Nếu chúng tôi muốn in ra thực tế <li> các mục với các chương trình truyền hình, chúng ta có thể sử dụng một forEach() để lặp qua NodeList và in ra từng mục.
const listItems = document.querySelectorAll("ul > li");
listItems.forEach((item) => {
console.log(item);
});
Cách thêm các phần tử mới vào tài liệu
Chúng ta có thể sử dụng document.createElement() để thêm các phần tử mới vào cây DOM.
Hãy xem ví dụ này:
<h1>Reasons why I love freeCodeCamp:</h1>Ngay bây giờ, tôi chỉ có một <h1> đánh dấu trên trang. Nhưng tôi muốn thêm một danh sách lý do tại sao tôi yêu thích freeCodeCamp bên dưới đó <h1> thẻ bằng JavaScript.
Đầu tiên chúng ta có thể tạo một <ul> yếu tố sử dụng document.createElement(). Tôi sẽ gán nó cho một biến gọi là unorderedList.
let unorderedList = document.createElement("ul");
Sau đó, chúng ta cần phải thêm rằng <ul> phần tử vào tài liệu bằng cách sử dụng appendChild() phương pháp.
document.body.appendChild(unorderedList);Phần tiếp theo là thêm một vài <li> các phần tử bên trong <ul> phần tử sử dụng createElement() phương pháp.
let listItem1 = document.createElement("li");
let listItem2 = document.createElement("li");Sau đó, chúng ta có thể sử dụng textContent thuộc tính để thêm văn bản cho các mục danh sách của chúng tôi.
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
Phần cuối cùng là sử dụng appendChild() phương pháp để các mục danh sách có thể được thêm vào danh sách không có thứ tự.
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);Đây là những gì mã trông giống như tất cả cùng nhau.
let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);
let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);Đây là kết quả trông như thế nào trên trang:
Cách sử dụng thuộc tính kiểu để thay đổi kiểu CSS nội tuyến
Các style thuộc tính cung cấp cho bạn khả năng thay đổi CSS trong tài liệu HTML của bạn.
Trong ví dụ này, chúng ta sẽ thay đổi h1 văn bản từ đen sang xanh bằng cách sử dụng style tài sản.
Đây là HTML của chúng tôi.
<h1>I was changed to blue using JavaScript</h1>
Đầu tiên chúng ta cần lấy h1 gắn thẻ bằng cách sử dụng querySelector() phương pháp.
const h1 = document.querySelector("h1");Sau đó chúng tôi sử dụng h1.style.color để thay đổi h1 văn bản từ màu đen sang màu xanh.
const h1 = document.querySelector("h1");
h1.style.color = "blue";Đây là kết quả trông như thế nào trong trình duyệt:
Bạn có thể sử dụng cái này style thuộc tính để thay đổi một số kiểu nội tuyến CSS bao gồm background-color, border-style, font-size và hơn thế nữa.
Cách sử dụng addEventListener() để lắng nghe các sự kiện trên trang
Phương pháp này cho phép bạn đính kèm một sự kiện vào một phần tử HTML như một nút.
Trong ví dụ này, khi người dùng nhấp vào nút, một thông báo cảnh báo sẽ bật lên.
Trong HTML của chúng tôi, chúng tôi có một phần tử nút với id của btn.
<button id="btn">Show alert</button>
Chúng tôi có thể nhắm mục tiêu phần tử đó trong JavaScript của mình bằng cách sử dụng getElementById() phương thức và gán nó cho biến được gọi là button.
const button = document.getElementById("btn");
Các addEventListener() nhận một loại sự kiện và một chức năng. Loại sự kiện sẽ là một click sự kiện và chức năng sẽ kích hoạt thông báo cảnh báo.
Đây là mã để thêm trình xử lý sự kiện vào button Biến đổi.
button.addEventListener("click", () => {
alert("Thank you for clicking me");
});Đây là mã hoàn chỉnh nơi bạn có thể nhấp vào nút và thông báo cảnh báo sẽ bật lên:
Cách sử dụng DOM trong các dự án trong thế giới thực
Đó là phần giới thiệu ngắn gọn về một số phương pháp DOM mà bạn có thể sử dụng. Còn rất nhiều ví dụ khác mà chúng tôi không đề cập đến trong bài viết này.
Nếu bạn muốn bắt đầu xây dựng các dự án JavaScript dành cho người mới bắt đầu và làm việc với DOM, thì tôi khuyên bạn nên xem bài viết 40 Dự án JavaScript dành cho người mới bắt đầu của tôi.
Phần kết luận
DOM là viết tắt của Document Object Model và là một giao diện lập trình cho phép chúng ta tạo, thay đổi hoặc xóa các phần tử khỏi tài liệu. Chúng tôi cũng có thể thêm các sự kiện vào các yếu tố này để làm cho trang của chúng tôi năng động hơn.
Bạn có thể chọn các phần tử trong JavaScript bằng các phương thức như getElementById(), querySelector()và querySelectorAll().
Nếu bạn muốn thêm các phần tử mới vào tài liệu, bạn có thể sử dụng document.createElement().
Bạn cũng có thể thay đổi kiểu phần tử CSS nội tuyến bằng cách sử dụng style tài sản.
Nếu bạn muốn thêm các sự kiện vào các phần tử như các nút thì bạn có thể sử dụng addEventListener().
Tôi hy vọng bạn thích bài viết này và chúc may mắn trên hành trình JavaScript của bạn.
