Cách chuyển đổi DOM bằng JavaScript
Hiểu DOM là điều cần thiết trong sự nghiệp phát triển web của bạn. Bạn nên biết cách chọn các phần tử khác nhau trong DOM, vì vậy bạn có thể đọc nội dung của chúng hoặc sửa đổi chúng.
Trình duyệt DOM mô tả cách điều hướng cấu trúc dạng cây mà tài liệu HTML tạo ra. Đây là hướng dẫn đầy đủ về cách duyệt qua DOM bằng JavaScript.
Mục Lục
DOM Traversing là gì?
Mô hình Đối tượng Tài liệu, viết tắt là DOM, là một biểu diễn dạng cây của một tài liệu HTML. Nó cung cấp một API cho phép bạn, với tư cách là nhà phát triển web, tương tác với một trang web bằng JavaScript.
Mọi mục trong DOM được gọi là một nút. Chỉ thông qua DOM, bạn mới có thể điều khiển cấu trúc, nội dung và kiểu tài liệu HTML của mình.
DOM traversal (còn được gọi là đi bộ hoặc điều hướng DOM) là hành động chọn các nút trong cây DOM từ các nút khác. Có thể bạn đã quen thuộc với một số phương thức để truy cập các phần tử trong cây DOM bằng id, lớp hoặc tên thẻ của chúng. Bạn có thể sử dụng các phương pháp như document.querySelector () và document.getElementById () làm như vậy.
Có những phương pháp khác mà bạn có thể sử dụng kết hợp để điều hướng DOM theo những cách hiệu quả và mạnh mẽ hơn. Như bạn có thể tưởng tượng, tốt hơn là tìm kiếm từ một điểm đã biết trên bản đồ hơn là tìm kiếm toàn bộ.
Ví dụ: chọn một phần tử con từ phần tử cha của nó dễ dàng và hiệu quả hơn so với việc tìm kiếm nó trong toàn bộ cây.
Một tài liệu mẫu để duyệt
Khi bạn có quyền truy cập vào một nút nhất định trong cây DOM, bạn có thể truy cập các nút liên quan của nó theo những cách khác nhau. Bạn có thể di chuyển xuống dưới, lên trên hoặc sang ngang trong cây DOM từ nút đã chọn của bạn.
Phương pháp đầu tiên liên quan đến việc tìm kiếm một phần tử bắt đầu bằng một nút trên cùng (như nút tài liệu) và di chuyển xuống dưới.
Cách thứ hai thì ngược lại: bạn di chuyển từ một phần tử bên trong lên trên cây, tìm kiếm một phần tử bên ngoài. Phương pháp cuối cùng là khi bạn tìm kiếm một phần tử từ một phần tử khác ở cùng cấp (nghĩa là hai phần tử là anh em ruột) trong cây tài liệu.
Để chứng minh, hãy xem xét tài liệu HTML mẫu nà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>Sample page</title>
</head><body>
<main>
<h1>My Page Title</h1>
<p>Nice caption goes here</p>
<article class="first__article">
<h2>List of amazing fruits</h2>
<p>Must eat fruits</p>
<div class="wrapper-1">
<ul class="apple-list">
<li class="apple">Apples</li>
<li class="orange">Oranges</li>
<li class="avocado">Avocados</li>
<li class="grape">
Grapes
<ul>
<li class="type-1">Moon drops</li>
<li>Sultana</li>
<li>Concord</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li class="banana">Bananas</li>
</ul>
<button class="btn-1">Read full list</button>
</div>
</article>
<article class="second__article">
<h2>Amazing places in Kenya</h2>
<p>Must visit places in Kenya</p>
<div class="wrapper-2">
<ul class="places-list">
<li>Maasai Mara</li>
<li>Diani Beach</li>
<li>Watamu Beach</li>
<li>Amboseli national park</li>
<li>Lake Nakuru</li>
</ul>
<button class="btn-2">Read full list</button>
</div>
</article>
</main>
</body>
</html>
Đi ngang qua DOM xuống dưới
Bạn có thể duyệt DOM xuống dưới bằng một trong hai phương pháp. Phương pháp đầu tiên là phương pháp bộ chọn phổ biến (element.querySelector hoặc element.querySelectorAll). Thứ hai, bạn có thể sử dụng bọn trẻ hoặc trẻ em tài sản. Ngoài ra còn có hai thuộc tính đặc biệt khác, đó là con cuối cùng và firstChild.
Sử dụng phương pháp bộ chọn
Các phương thức querySelector () cho phép bạn tìm kiếm một hoặc nhiều phần tử phù hợp với một bộ chọn nhất định. Ví dụ: bạn có thể tìm kiếm phần tử đầu tiên có lớp “bài viết đầu tiên” bằng cách sử dụng document.querySelector (‘. first-article’). Và để tìm nạp tất cả h2 trong tài liệu, bạn có thể sử dụng querySelectorAll phương pháp: document.querySelectorAll (‘h2’). Các querySelectorAll phương thức trả về một danh sách nút gồm các phần tử phù hợp; bạn có thể chọn từng mục bằng cách sử dụng ký hiệu trong ngoặc:
const headings = document.querySelectorAll('h2');
const firstHeading = headings[0];
const secondHeading = headings[1]; Điểm lưu ý chính khi sử dụng các phương thức bộ chọn là bạn phải sử dụng các ký hiệu thích hợp, nếu có thể, trước bộ chọn như bạn làm trong CSS. Ví dụ: “.classname” cho các lớp và “#id” cho id.
Hãy nhớ kết quả sẽ là một phần tử HTML, không chỉ là nội dung bên trong của phần tử đã chọn. Để truy cập nội dung, bạn có thể sử dụng nút của bên trongHTML tài sản:
document.querySelector('.orange').innerHTMLSử dụng thuộc tính child hoặc childNodes
Các bọn trẻ thuộc tính chọn tất cả các phần tử con nằm trực tiếp dưới một phần tử nhất định. Đây là một ví dụ về bọn trẻ tài sản đang hoạt động:
const appleList = document.querySelector('.apple-list');
const apples = appleList.children;
console.log(apples);Ghi nhật ký táo bảng điều khiển sẽ hiển thị một tập hợp tất cả các mục danh sách ngay dưới phần tử có lớp “apple-list” dưới dạng một tập hợp HTML. Tập hợp HTML là một đối tượng giống mảng, vì vậy bạn có thể sử dụng ký hiệu dấu ngoặc để chọn các mục, như với querySelectorAll.
Không giống như bọn trẻ tài sản, trẻ em trả về tất cả các nút con trực tiếp (không chỉ các phần tử con). Nếu bạn chỉ quan tâm đến các phần tử con, giả sử chỉ liệt kê các mục, hãy sử dụng bọn trẻ tài sản.
Sử dụng thuộc tính Special lastChild và firstChild
Hai phương pháp này không mạnh mẽ như hai phương pháp đầu tiên. Như tên của chúng gợi ý, con cuối cùng và firstChild thuộc tính trả về nút con cuối cùng và nút con đầu tiên của một phần tử.
const appleList = document.querySelector('.apple-list');
const firstChild = appleList.firstChild;
const lastChild = appleList.lastChild;Duyệt qua DOM trở lên
Bạn có thể điều hướng lên DOM bằng cách sử dụng cha mẹ (hoặc parentNode) và gần nhất đặc tính.
Sử dụng parentElement hoặc parentNode
Cả hai cha mẹ hoặc parentNode thuộc tính cho phép bạn chọn nút cha của phần tử đã chọn lên một cấp. Sự khác biệt quan trọng là cha mẹ chỉ chọn nút cha là một phần tử. Mặt khác, parentNode có thể chọn cha mẹ bất kể đó là một phần tử hay một loại nút khác.
Trong mẫu mã dưới đây, chúng tôi sử dụng cha mẹ để chọn div có lớp “wrapper-1” từ “apple-list”:
const appleList = document.querySelector('.apple-list');
const parentDiv = appleList.parentElement;
console.log(parentDiv); Sử dụng Thuộc tính gần nhất
Các gần nhất thuộc tính chọn phần tử mẹ đầu tiên phù hợp với một bộ chọn được chỉ định. Nó cho phép bạn chọn nhiều cấp thay vì một. Ví dụ: nếu chúng ta đã chọn nút có lớp “btn-1”, chúng ta có thể chọn chính phần tử sử dụng gần nhất tài sản như sau:
const btn1 = document.querySelector('.btn-1');
const mainEl = btn1.closest('main');
console.log(mainEl); Giống querySelector và querySelectorAllsử dụng các bộ chọn thích hợp trong gần nhất phương pháp.
Đi ngang qua DOM Sideways
Có hai phương pháp có sẵn để đi ngang DOM. Bạn có thể dùng nextElementSibling hoặc beforeElementSibling. Sử dụng nextElementSibling để chọn phần tử anh chị em sau và beforeElementSibling để chọn anh chị em trước đó.
const orange = document.querySelector('.orange');
const apple = orange.previousElementSibling;
const avocado = orange.nextElementSibling; Cũng có tương đương nextSibling và trước đây Anh chị em các thuộc tính cũng chọn từ tất cả các loại nút, không chỉ các phần tử.
Làm được nhiều việc hơn bằng cách xâu chuỗi các thuộc tính và phương thức truyền tải DOM
Tất cả các phương thức và thuộc tính ở trên có thể cho phép bạn chọn bất kỳ nút nào trong DOM. Tuy nhiên, trong một số trường hợp, bạn có thể muốn đi lên trước, sau đó đi xuống hoặc sang ngang. Trong trường hợp đó, việc xâu chuỗi các thuộc tính khác nhau lại với nhau sẽ tỏ ra hữu ích.