DOM là gì? Hướng dẫn hậu trường


Hiểu cách DOM và sự kiện hoạt động trong JavaScript là chìa khóa nếu bạn muốn trở thành nhà phát triển giao diện người dùng hiệu quả.

Trong bài viết này, bạn sẽ tìm hiểu DOM là gì và nó hoạt động như thế nào.

DOM là gì?

DOM là viết tắt của Mô hình đối tượng tài liệu. Đó là giao diện giữa JavaScript và trình duyệt web.

Với sự trợ giúp của DOM, bạn có thể viết JavaScript để tạo, sửa đổi và xóa các phần tử HTML, đặt kiểu, lớp và thuộc tính cũng như lắng nghe và phản hồi các sự kiện.

Cây DOM được tạo ra từ một tài liệu HTML mà sau đó bạn có thể tương tác với nó. DOM là một API rất phức tạp có các phương thức và thuộc tính để tương tác với cây DOM.

Khung-70-1
Minh họa DOM

Bạn có thể hình dung cây DOM tại đây.

Cách thức hoạt động của DOM – Hậu trường

DOM được tổ chức một cách thực sự thông minh. Phần tử cha được gọi là EventTarget. Bạn có thể hiểu rõ hơn về cách thức hoạt động của nó với sự trợ giúp của sơ đồ bên dưới:

DOM-hậu trường-1

Giao diện EventTarget được triển khai bởi các đối tượng có thể nhận sự kiện và có thể có người nghe cho chúng. Nói cách khác, bất kỳ mục tiêu nào của sự kiện đều thực hiện ba phương thức được liên kết với giao diện này. Thành phầnvà con của nó, cũng như Tài liệu Cửa sổ là mục tiêu sự kiện phổ biến nhất, nhưng các đối tượng khác cũng có thể là mục tiêu sự kiện.

Window đại diện cho cửa sổ của trình duyệt. Tất cả các đối tượng, hàm và biến JavaScript toàn cục sẽ tự động trở thành thành viên của đối tượng cửa sổ. Biến toàn cục là thuộc tính của đối tượng cửa sổ. Các chức năng toàn cầu là các phương thức của đối tượng cửa sổ. Ngay cả đối tượng tài liệu (của HTML DOM) cũng là thuộc tính của đối tượng cửa sổ.

window.document.getElementById("header");

// Both are same

document.getElementById("header");

Các nút nằm trong DOM hay còn gọi là mô hình Đối tượng Tài liệu. Trong DOM, tất cả các phần của tài liệu, chẳng hạn như phần tử, thuộc tính, văn bản, v.v. được tổ chức theo cấu trúc dạng cây phân cấp bao gồm cha mẹ và con cái. Những phần riêng lẻ này của tài liệu được gọi là các nút.

Nút trong sơ đồ trên được đại diện bởi một đối tượng JavaScript. Chúng tôi chủ yếu làm việc với tài liệu có các phương thức được sử dụng phổ biến nhất như document.queryselector(), document.getElementBy Id(), v.v.

Bây giờ chúng ta sẽ xem qua tài liệu.

Cách chọn, tạo và xóa các phần tử bằng DOM

Với sự trợ giúp của DOM, chúng ta có thể chọn, xóa và tạo phần tử trong JavaScript.

Cách chọn phần tử

Có nhiều cách chúng ta có thể chọn các phần tử HTML trong JavaScript. Đây là những phương pháp chúng ta sẽ xem xét ở đây:

  • document.getElementById();
  • document.getElementByClassName();
  • document.getElementByTagName();
  • document.querySelector();
  • document.querySelectorAll();

Làm thế nào để sử dụng document.getElementById() phương pháp

Các getElementById() phương thức trả về một phần tử có id khớp với một chuỗi đã truyền. Vì id của các phần tử HTML được cho là duy nhất nên đây là cách nhanh hơn để chọn một phần tử có id.

Đọc thêm  Mẹo và thủ thuật gỡ lỗi cho người mới bắt đầu JavaScript

Ví dụ:

const ele = document.getElementById("IDName");
console.log(ele); // This will log the whole HTML element

Làm thế nào để sử dụng document.getElementByClassName() phương pháp

Các document.getElementByClassName() phương thức trả về một HTMLCollection của các phần tử khớp với tên của lớp đã truyền. Chúng ta có thể tìm kiếm nhiều tên lớp bằng cách chuyển các tên lớp được phân tách bằng khoảng trắng. Nó sẽ trả về một HTMLCollection trực tiếp.

Vậy HTMLCollection “sống” có nghĩa là gì? Chà, điều đó có nghĩa là một khi chúng ta nhận được HTMLCollection cho một tên lớp, nếu chúng ta thêm một phần tử có cùng tên lớp, thì HTMLCollection sẽ tự động được cập nhật.

Ví dụ:

const ele = document.getElementByClassName("ClassName");
console.log(ele); // Logs Live HTMLCollection

Làm thế nào để sử dụng document.getElementByTagName(); phương pháp

Các document.getElementByTagName() phương thức trả về HTMLCollection của các phần tử khớp với tên thẻ đã truyền. Nó có thể được gọi trên bất kỳ phần tử HTML nào. Nó trả về một HTMLCollection là một bộ sưu tập trực tiếp.

Ví dụ:

const paragraph = document.getElementByTagName("p");
const heading = document.getElementByTagName("h1");

console.log(paragraph); // p element HTMLCollection
console.log(heading); // h1 element HTMLCollection

Cách sử dụng phương thức document.querySelector()

Các document.querySelector() phương thức trả về phần tử đầu tiên khớp với bộ chọn đã truyền. Bây giờ ở đây, chúng ta có thể chuyển tên lớp, id và tên thẻ. Hãy xem ví dụ dưới đây:

const id = document.querySelector("#idname"); // using id
const classname = document.querySelector(".classname"); // using class
const tag = document.querySelector("p"); // using tagname

Quy tắc lựa chọn:

  • Khi chọn sử dụng lớp, hãy sử dụng dấu (.) ở đầu. Ví dụ (“.tên lớp”)
  • Khi chọn sử dụng id, hãy sử dụng (#) khi bắt đầu. Ví dụ (“#id”)
  • Khi chọn bằng thẻ, chỉ cần chọn trực tiếp. Ví dụ (“p”)

Cách sử dụng phương thức document.querySelectorAll()

Các document.querySelectorAll() phương pháp là một phần mở rộng của querySelector phương pháp. Phương thức này trả về tất cả các các phần tử khớp với bộ chọn đã qua. Nó trả về bộ sưu tập Nodelist không hoạt động.

const ele = document.querySelectorAll("p");
console.log(ele); // return nodelist collection of p tag

GHI CHÚ: HTMLCollection là một bộ sưu tập trực tiếp, trong khi bộ sưu tập Nodelist là một bộ sưu tập tĩnh.

Cách tạo các phần tử

Bạn có thể tạo các phần tử HTML bằng JavaScript và thêm chúng vào HTML một cách linh hoạt. Bạn có thể tạo bất kỳ phần tử HTML nào với document.createElement() bằng cách chuyển tên thẻ trong ngoặc đơn.

Sau khi tạo phần tử, bạn có thể thêm tên lớp, thuộc tính và nội dung văn bản vào phần tử đó.

Đây là một ví dụ:

const ele = document.createElement("a");
ele.innerText = "Click Me";
ele.classList.add("text-left");
ele.setAttribute("href", "www.google.com");

// update to existing element in HTML
document.querySelector(".links").prepend(ele);
document.querySelector(".links").append(ele);
document.querySelector(".links").befor(ele);
document.querySelector(".links").after(ele);

// Simalar to below anchor tag
// <a href="www.google.com">Click Me</a>

Trong ví dụ trên, chúng tôi đã tạo một thẻ neo trong JavaScript và thêm các thuộc tính và tên lớp vào thẻ neo đó. Chúng ta có bốn phương thức trong ví dụ trên để cập nhật phần tử đã tạo trong HTML.

  • prepend(): chèn dữ liệu vào đầu phần tử con đầu tiên của nó.
  • append(): chèn dữ liệu hoặc nội dung bên trong một phần tử ở chỉ mục cuối cùng.
  • before(): chèn dữ liệu trước phần tử được chọn.
  • after(): đặt phần tử sau phần tử đã chỉ định. Hoặc bạn có thể nói rằng nó chèn dữ liệu bên ngoài một phần tử (làm cho nội dung trở thành anh chị em của nó) trong tập hợp các phần tử phù hợp.

Cách xóa các phần tử

Chúng tôi biết cách tạo các phần tử trong JavaScript và đẩy chúng vào HTML. Nhưng nếu chúng ta muốn xóa các phần tử hiện có trong HTML thì sao? Thật dễ dàng – chúng ta chỉ cần sử dụng remove() phương thức trên phần tử đó.

Đây là một ví dụ:

const ele = document.querySelector("p");

// This will remove ele when clicked on
ele.addEventListner('click', function(){
	ele.remove();
})

Cách thao tác CSS từ JavaScript

Chúng tôi biết cách thao tác HTML từ JavaScript. Bây giờ chúng ta sẽ học cách thao tác CSS từ JavaScript. Điều này có thể giúp bạn thay đổi kiểu trang web của mình một cách linh hoạt.

Đọc thêm  JavaScript String.prototype.charCodeAt() - Mã Char tại Giải thích với các ví dụ - Hướng dẫn

Ví dụ: nếu bạn nhấp vào một phần tử, màu nền của phần tử đó sẽ thay đổi. Điều này có thể thực hiện được bằng cách thao tác CSS từ JavaScript.

Đây là một số cú pháp ví dụ:

const ele = document.querySelector("desired element");

ele.style.propertyName = value;

// E.g -
ele.style.color = red;

Khi thay đổi thuộc tính CSS bằng JavaScript, bạn cần đảm bảo rằng bất cứ khi nào có - trong CSS, bạn viết hoa chữ cái tiếp theo. Ví dụ, trong CSS bạn sẽ viết background-colornhưng trong JavaScript, backgroundColor (với chữ C viết hoa).

Đây là một ví dụ:

const ele = document.querySelector("div");
ele.style.backgroundColor = "red";

Bây giờ, giả sử bạn đã viết CSS cho dự án của mình và bạn muốn thêm các lớp bằng JavaScript. Chúng ta có thể làm điều đó bằng cách sử dụng classList trong JavaScript.

Đây là một ví dụ:

const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // add class bg-red to existing class list
ele.classList.remove("pb-4");// remove class bg-red from existing class list
ele.classList.toggle("bg-green"); // toggle class bg-red to existing class list which means if it already exists then it will be removed, if it doesn't exist it will be added.

Khi chúng ta sử dụng classList, nó sẽ thêm, xóa hoặc chuyển đổi các lớp trực tiếp vào phần tử. Nó giống như cập nhật với các lớp hiện có.

Không giống như Element.className, nó loại bỏ tất cả các lớp hiện có và thêm lớp đã cho.

Đây là một ví dụ:

const ele = document.querySelector(".link");
ele.classList.add("bg-red"); // add class bg-red to existing class list
ele.classList.remove("pb-4");// remove class bg-red from existing class list

ele.className = "p-10"; // Now this will remove all existing classes and add only "p-10 class to element."

Cách sử dụng Trình xử lý sự kiện

Sự thay đổi trạng thái của một đối tượng được gọi là Biến cố. Quá trình phản ứng với các sự kiện được gọi là Xử lý sự kiện.

Sự kiện xảy ra khi người dùng thực hiện thao tác nào đó như nhấp chuột, di chuột qua một phần tử, nhấn phím, v.v. Vì vậy, khi một sự kiện xảy ra và bạn muốn thực hiện một việc nào đó hoặc thao tác với bất kỳ thứ gì, bạn sử dụng trình xử lý sự kiện để kích hoạt sự kiện đó.

Chúng tôi sử dụng trình xử lý sự kiện để thực thi mã nhất định khi sự kiện cụ thể đó xảy ra. Có nhiều trình xử lý sự kiện trong JavaScript (đây là danh sách nhanh về chúng), nhưng bạn sử dụng quy trình tương tự để thêm trình xử lý sự kiện vào bất kỳ phần tử nào.

Đây là cú pháp:

const ele = document.querySelector("a");

ele.addEventListner("event", function(){
	// callback function
});

Một số sự kiện bạn có thể sử dụng:

  • nhấp chuột
  • Di chuột lên trên
  • di chuột ra ngoài
  • bấm phím
  • phím tắt

Và đây là một ví dụ về việc sử dụng sự kiện “nhấp chuột”:

const ele = document.querySelector("a");

ele.addEventListner("click", function(){
	ele.style.backgroundColor = "pink";
});

Tuyên truyền sự kiện: Bubling và Capture

Tuyên truyền sự kiện xác định thứ tự các phần tử nhận (các) sự kiện. Có hai cách để xử lý thứ tự lan truyền sự kiện này trong DOM: Sự kiện sủi bọt và Sự kiện bắt giữ.

Khung-71-1

Bong bóng sự kiện là gì?

Khi một sự kiện xảy ra trên một thành phần, trước tiên nó sẽ chạy trình xử lý sự kiện trên đó, sau đó chạy trên thành phần cha của nó, rồi tiếp tục chạy lên trên các thành phần của tổ tiên khác.

Theo mặc định, tất cả các trình xử lý sự kiện di chuyển theo thứ tự này từ sự kiện thành phần trung tâm đến sự kiện thành phần ngoài cùng.

Chụp sự kiện là gì?

Điều này ngược lại với hiện tượng sủi bọt. Trình xử lý sự kiện hoạt động đầu tiên trên thành phần cha của nó và sau đó trên thành phần mà nó thực sự được dùng để kích hoạt.

Nói tóm lại, điều này có nghĩa là sự kiện được nắm bắt đầu tiên bởi phần tử ngoài cùng và được truyền đến các phần tử bên trong. Nó cũng được gọi là nhỏ giọt xuống.

Đọc thêm  JavaScript cho 循环——如何在 JS 中循环遍历数组

Hãy thử ví dụ dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        nav{
            display: flex;
            justify-content: center;
            padding: 30px;
        }

        nav li{
            list-style: none;
            padding: 5px;
        }

        nav li a{
            text-decoration: none;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <div>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </div>

    <script>
        const navbar = document.querySelector("nav");
        navbar.addEventListener('click', function(){
            navbar.style.backgroundColor="green"
        });

        const anchor = document.querySelector("a");
        anchor.addEventListener("click", function(){
            anchor.style.backgroundColor="pink";
        })
    </script>
</body>
</html>

Mã này cung cấp cho chúng tôi như sau:

Ảnh chụp màn hình-2022-09-26-142920

Bây giờ hãy nghiên cứu kỹ ví dụ trên. Tôi đã thêm một trình lắng nghe sự kiện vào nav gắn thẻ và đến anchor nhãn. Khi bạn nhấp vào điều hướng, màu nền sẽ chuyển sang màu xanh lá cây. Khi bạn nhấp vào thẻ neo, màu nền sẽ chuyển sang màu hồng.

Nhưng khi bạn nhấp vào thẻ neo, màu nền của neo cũng như điều hướng sẽ thay đổi. Điều này bởi vì sự kiện sủi bọt.

Đây là điều xảy ra khi bạn chỉ nhấp vào phần tử điều hướng:

Khung-72--1-
Đây là điều xảy ra khi bạn chỉ nhấp vào phần tử điều hướng.

Đây là điều xảy ra khi bạn chỉ nhấp vào phần tử neo:

Khung-73--1-
Đây là điều xảy ra khi bạn chỉ nhấp vào phần tử neo

Để dừng lan truyền sự kiện, chúng ta có thể sử dụng stoppropagation() trên trình lắng nghe sự kiện do đó quá trình lan truyền sự kiện đang diễn ra. Nó sẽ ngăn trình nghe sự kiện phần tử điều hướng được kích hoạt trong ví dụ trên.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        nav{
            display: flex;
            justify-content: center;
            padding: 30px;
        }

        nav li{
            list-style: none;
            padding: 5px;
        }

        nav li a{
            text-decoration: none;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <div>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </div>

    <script>
        const navbar = document.querySelector("nav");
        navbar.addEventListener('click', function(){
            navbar.style.backgroundColor="green"
        });

        const anchor = document.querySelector("a");
        anchor.addEventListener("click", function(e){
            e.stopPropagation();
            anchor.style.backgroundColor="pink";
        })
    </script>
</body>
</html>

Cách duyệt qua DOM

“Một nhà phát triển JavaScript giỏi cần biết cách duyệt qua DOM— đó là hành động chọn một phần tử từ một phần tử khác. ” – Zell Liew

Bây giờ chúng ta sẽ xem tại sao duyệt qua DOM tốt hơn là sử dụng document.querySelector() phương pháp và cách duyệt như một người chuyên nghiệp.

Có 3 cách để duyệt qua DOM:

Cách di chuyển DOM lên trên

Có hai phương pháp giúp bạn duyệt DOM lên trên:

parentElement là một thuộc tính chọn phần tử cha, như thế này:

const ele = document.querySelector("a");
console.log(ele.parentElement); // <div>

ParentElement là tuyệt vời để chọn một cấp độ trở lên. Nhưng mà closest cho phép bạn tìm một phần tử có thể ở nhiều cấp trên phần tử hiện tại. closest cho phép bạn chọn phần tử tổ tiên gần nhất khớp với bộ chọn.

Đây là một ví dụ về việc sử dụng closest:

<div>
    <h3 class="demo">This is sample</h3>
    <h1 class="demo">This is heading</h1>
    <h2 class="heading"> This heading 2</h2>
</div>
const ele = document.querySelector(".heading");
console.log(ele.closest(".demo")); // This is heading

Trong đoạn mã trên, chúng tôi đang cố gắng lấy phần tử gần nhất với .heading trong đó có một lớp .demo.

Cách di chuyển DOM xuống dưới

Chúng ta có thể di chuyển xuống dưới bằng cách sử dụng children phương pháp trên một bộ chọn. Với phần tử con, bạn có thể chọn phần tử con trực tiếp của phần tử đã chọn.

Đây là một ví dụ:

<div>
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    <a href="#">Link-3</a>
    <a href="#">Link-4</a>
</div>
const ele = document.querySelector("div");
const child = ele.children;

console.log(child); // gives HTMLCollection
// 4 element inside div

Cách đi ngang qua DOM

Thật thú vị khi đi ngang qua DOM. Có hai phương pháp chủ yếu chúng ta có thể sử dụng:

  • trướcYếu tốAnh chị em
  • tiếp theoElementAnh chị em

Với sự giúp đỡ của previousElementSibling phương thức, chúng ta có thể chọn các phần tử trước đó trong HTML như thế này:

<div>
    <a href="#">Link-1</a>
    <h1>Heading</h1>
</div>
const ele = document.querySelector("h1");
console.log(ele.previousElementSibling); // <a href="#">Link-1</a>

Với sự giúp đỡ của nextElementSiblingchúng ta có thể chọn phần tử tiếp theo trong HTML như thế này:

<div>
    <a href="#">Link-1</a>
    <h1>Heading</h1>
</div>
const ele = document.querySelector("a");
console.log(ele.nextElementSibling); // <h1>Heading</h1>

kết thúc

Tôi hy vọng bây giờ bạn đã hiểu cách DOM hoạt động trong JavaScript. Cảm ơn bạn đã đọc!

Bạn có thể theo dõi tôi trên:



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status