Rate this post
DOM (Mô hình Đối tượng Tài liệu) là một API thể hiện các phần tử của tài liệu HTML và XML dưới dạng các đối tượng ngôn ngữ lập trình. Cấu trúc của DOM cho bất kỳ tài liệu nào cũng giống với cấu trúc thực tế của phần đánh dấu tài liệu đó. Một nhà phát triển web có thể thao tác lập trình DOM để sửa đổi một trang web, trước hoặc trong khi nó được người dùng xem.
Các bài viết liên quan:
Ngôn ngữ lập trình phổ biến nhất được sử dụng trong DOM là JavaScript, được sử dụng trên hầu hết các trang web. Sử dụng JavaScript cho phép thực hiện các thay đổi động đối với DOM, bao gồm ẩn, di chuyển và tạo hoạt ảnh cho các phần tử HTML nhất định (chẳng hạn như văn bản, bảng, hình ảnh và toàn bộ phần chia).
Trước đây, DOM có sự khác biệt cơ bản giữa các trình duyệt, nhưng ngày nay đã trở nên tiêu chuẩn hóa hơn nhiều, cho phép các nhà phát triển thực hiện tập lệnh trên nhiều trình duyệt dễ dàng hơn.
Ví dụ về DOM sử dụng HTML
Hãy xem xét tài liệu HTML sau:
<html> <head> <title> Ví dụ </title> </head> <body> <h1> Trang mẫu </h1> <p> Đây là một trang mẫu. </p> </body> </html>
DOM cho trang này bao gồm tất cả các phần tử và bất kỳ nút văn bản nào trong các phần tử đó. Đoạn mã trong ví dụ trước tạo ra một hệ thống phân cấp đối tượng như được hiển thị bên dưới.
Đối với mỗi phần tử dưới gốc tài liệu (<html>), có một nút phần tử và các nút phần tử này có các nút văn bản chứa văn bản trong phần tử. Nếu có một phần tử có thuộc tính, một nút thuộc tính sẽ được tạo cho phần tử đó. Bất kỳ văn bản nào cho thuộc tính sẽ tạo một nút văn bản bên dưới nút thuộc tính đó.
DOM là gì?
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ì?
Chúng ta sẽ xem xét cách chọn các phần tử từ tài liệu HTML, cách tạo các phần tử, cách thay đổi kiểu CSS nội tuyến và cách lắng nghe các sự kiện.
DOM là viết tắt của Document Object Model. 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 sự kiện vào các phần 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 như một 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.
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à phần tử <html>. Phần tử <html> chứa hai phần tử con là phần tử <head> và <body>.
Cả hai phần tử <head> và <body> đều có phần tử con của riêng chúng.
Đây là một cách khác để hình dung cây các 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à thực hiện các thay đổi đối vớ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 phần tử trong tài liệu
Có một số phương pháp khác nhau để chọn một phần tử 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, id được sử dụng làm số nhận dạng 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 một tên id cho hai phần tử khác nhau.
Điều này sẽ sai:
<p id="para">This is my first paragraph.</p> <p id="para">This is my second paragraph.</p>
Bạn sẽ phải đảm bảo rằng những id đó 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 tên id.
document.getElementById("id name goes here")
Đoạn mã này yêu cầu máy tính lấy phần tử <p> với id là para1 và in phần tử đó ra bảng đ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 thuộc tính textContent 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 tôi:
<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ảng điều khiển phần tử h1, thì 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ảng điều khiển, thì tôi sẽ sử dụng .list bên trong querySelector ().
Các . trước danh sách 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 thì bạn sẽ sử dụng 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ử phù hợ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ả các mục <li> trong ví dụ của chúng tôi, tôi có thể sử dụng bộ tổ hợp con> để tìm tất cả các mục con của <ul>.
const listItems = document.querySelectorAll("ul > li");
console.log(listItems);
Nếu chúng tôi muốn in ra các mục thực tế với các chương trình truyền hình, chúng tôi có thể sử dụng 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>
Hiện tại, tôi chỉ có thẻ <h1> trên trang. Nhưng tôi muốn thêm danh sách các lý do tại sao tôi thích freeCodeCamp bên dưới thẻ <h1> đó bằng JavaScript.
Đầu tiên chúng ta có thể tạo một phần tử <ul> bằng document.createElement (). Tôi sẽ gán điều đó cho một biến có tên là unarderedList.
let unorderedList = document.createElement("ul");
Sau đó, chúng ta cần thêm phần tử <ul> đó vào tài liệu bằng phương thức appendChild ().
document.body.appendChild(unorderedList);
Phần tiếp theo là thêm một vài phần tử <li> bên trong phần tử <ul> bằng phương thức createElement ().
let listItem1 = document.createElement("li");
let listItem2 = document.createElement("li");
Sau đó, chúng ta có thể sử dụng thuộc tính textContent để thêm văn bản cho các mục danh sách của chúng ta.
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 phương thức appendChild () để 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ả đầu ra trên trang:
Cách sử dụng Thuộc tính Kiểu để Thay đổi Kiểu CSS Nội tuyến
Thuộc tính style 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 văn bản h1 từ màu đen sang màu xanh lam bằng cách sử dụng thuộc tính style.
Đâ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 thẻ h1 bằng phương thức querySelector ().
const h1 = document.querySelector("h1");
Sau đó, chúng tôi sử dụng h1.style.color để thay đổi văn bản h1 từ màu đen sang màu xanh lam.
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 thuộc tính kiểu này để thay đổi một số kiểu nội tuyến CSS bao gồm màu nền, kiểu đường viền, kích thước phông chữ và hơn thế nữa.
Xem thêm Tự học HTML: text
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 giống 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 là 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 phương thức getElementById () và gán phần tử đó cho biến được gọi là nút.
const button = document.getElementById("btn");
AddEventListener () nhận một loại sự kiện và một hàm. Loại sự kiện sẽ là sự kiện nhấp chuột 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 biến nút.
button.addEventListener("click", () => {
alert("Thank you for clicking me");
});
Cách sử dụng DOM trong các dự án 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ó rất nhiều ví dụ khác mà chúng tôi không đề cập 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 mình.
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 sự kiện vào các phần 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 CSS nội tuyến của các phần tử bằng cách sử dụng thuộc tính style.
Nếu bạn muốn thêm sự kiện vào các phần tử như 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 bạn may mắn trên hành trình JavaScript của mình.
Xem thêm Câu hỏi và câu trả lời phỏng vấn HTML hàng đầu
