Tìm hiểu cách sử dụng bộ chọn DOM
Mô hình Đối tượng Tài liệu (DOM) là biểu diễn cấu trúc của một tài liệu HTML. DOM là một cây các nút mà trình duyệt tạo cho mỗi trang web trên internet.
DOM là hướng đối tượng. Mỗi phần tử trong DOM có bộ thuộc tính và phương thức riêng mà bạn có thể truy cập bằng JavaScript.
Trong bài viết hướng dẫn này, bạn sẽ học cách sử dụng các chức năng của bộ chọn DOM để truy cập các phần tử của trang web.
Mục Lục
Cách truy cập các phần tử DOM
Bạn có thể truy cập phần tử DOM cấp cao nhất của trang web thông qua đối tượng tài liệu chung. Ví dụ: nếu bạn có một trang web như sau:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="home">
<h1>Welcome</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
</p>
</section>
<section id="about">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
</p>
</section>
<section id="blog">
<h2>Articles</h2>
<div class="articles" id="article-1">
<h3>Article Title One</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
</p>
<a href="#"> Read More </a>
</div>
<div class="articles" id="article-2">
<h3>Article Title Two</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
</p>
<a href="#"> Read More </a>
</div>
<div class="articles" id="article-3">
<h3>Article Title Three</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
</p>
<a href="#"> Read More </a>
</div>
<div class="articles" id="article-4">
<h3>Article Title Four</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.
</p>
<a href="#"> Read More </a>
</div>
</section>
</body>
</html>
Đánh máy tài liệu trong bảng điều khiển trình duyệt của bạn và nhấn enter sẽ tạo ra kết quả sau:
Đầu ra trong bảng điều khiển của bạn là tương tác. Bạn có thể click vào cái đầu và phần thân để mở rộng chúng. Làm như vậy sẽ tạo ra kết quả sau:
Mỗi phần tử phần trong thẻ cũng có thể mở rộng. Tùy thuộc vào cấu trúc của một trang web, các phần tử sẽ tiếp tục mở rộng để hiển thị nhiều phần tử hơn. Điều này sẽ giúp bạn hiểu rõ hơn về cấu trúc của DOM.
Đối tượng tài liệu có một thuộc tính đặc biệt, phần thân, đại diện cho phần tử body. Vì vậy, để truy cập phần tử body, bạn có thể nhập như sau vào bảng điều khiển:
document.body
Điều này sẽ tạo ra kết quả sau:
Nhưng đây là chừng mực bạn có thể sử dụng các thuộc tính đối tượng. Mỗi trang đều có phần đầu và phần thân nhưng về mặt khác là duy nhất. Vì vậy, đánh máy document.body.section hoặc bất cứ điều gì tương tự sẽ không hoạt động như bạn có thể muốn. Thay vào đó, có những phương thức mà bạn có thể gọi trên đối tượng tài liệu để truy cập các phần tử cụ thể.
Bộ chọn phần tử DOM là gì?
Bộ chọn phần tử DOM là một nhóm các phương thức JavaScript mà bạn có thể sử dụng trên đối tượng tài liệu để truy cập các phần tử trong một trang web. Bộ chọn phần tử DOM có hai danh mục — bộ chọn đơn và nhiều bộ chọn.
Các hàm này hoạt động theo cách tương tự như các bộ chọn CSS. Chúng cho phép bạn truy xuất các phần tử dựa trên tên thẻ hoặc thuộc tính id và lớp của chúng. Bạn thậm chí có thể tìm nạp các phần tử bằng bất kỳ bộ chọn CSS nào.
Các bộ chọn phần tử đơn là:
-
getElementById ()
-
querySelector ()
Các bộ chọn nhiều phần tử là:
-
getElementsByTagName ()
-
getElementsByClassName ()
-
querySelectorAll ()
Bộ chọn phần tử DOM mà bạn sử dụng sẽ phụ thuộc vào (các) phần tử mà bạn đang cố gắng truy cập.
Sử dụng các bộ chọn phần tử DOM đơn lẻ
Bạn hầu như sẽ thấy các bộ chọn trong các ứng dụng JavaScript. Vì vậy, hãy di chuyển ra khỏi bảng điều khiển. Tạo một tệp JavaScript và liên kết nó với tệp HTML của bạn bằng cách sử dụng thẻ script sau:
<script src="main.js"></script>
Trong đó giá trị src là tên của tệp JavaScript của bạn. Đặt thẻ script này ngay trước thẻ nội dung đóng của bạn, .
Các getElementById () phương thức cung cấp quyền truy cập vào một phần tử trên trang web bằng cách sử dụng giá trị ID của nó. Trong tài liệu HTML ở trên có một số phần tử có ID. Để nhắm mục tiêu div với ID “article-3”, bạn có thể thêm mã sau vào tệp JavaScript của mình:
value = document.getElementById('article-3')
Bây giờ phần tử div với bài báo-3 ID và tất cả các thuộc tính tương ứng của nó đều có thể truy cập được từ giá trị Biến đổi. Bạn có thể in giá trị biến thành bảng điều khiển bằng cách sử dụng dòng mã sau:
console.log(value)
Bạn sẽ thấy tên lớp được gán cho phần tử div cũng như các thuộc tính quan trọng khác, chẳng hạn như HTML bên trong.
Bộ chọn phần tử đơn lẻ khác là querySelector (). Hàm này linh hoạt hơn, vì bạn có thể chuyển nó vào bất kỳ chuỗi bộ chọn CSS nào. Tuy nhiên, bạn vẫn chỉ có thể sử dụng nó để chọn một phần tử tại một thời điểm.
Ví dụ: có một lớp duy nhất trong bố cục HTML ở trên — các bài báo. Bốn phần tử div sử dụng lớp này, nhưng querySelector () hàm sẽ chỉ trả về phần tử đầu tiên có lớp “article”.
Sử dụng querySelector () Với một lớp
Thêm mã sau vào cuối tập lệnh của bạn:
value = document.querySelector('.articles')
console.log(value)
Điều này sẽ chỉ trả về đầu tiên div phần tử có lớp “bài báo”. Lưu ý rằng bạn chỉ định bộ chọn ở định dạng giống như bộ chọn CSS. Trong CSS, dấu chấm ở đầu chỉ định tên lớp.
Sử dụng querySelector () Với một ID
value = document.querySelector('#article-3')
console.log(value)
Mã này sẽ trả về phần tử duy nhất có ID “article-3”, phần tử thứ ba div phần tử có lớp “bài báo”. Một lần nữa, chuỗi bộ chọn sử dụng cú pháp CSS chuẩn, với # biểu tượng chỉ định một ID.
Sử dụng nhiều bộ chọn phần tử DOM
Các chức năng bộ chọn còn lại truy xuất các nhóm phần tử. họ đang getElementsByTagName (), getElementsByClassName (), và querySelectorAll ().
Sử dụng getElementsByTagName ()
Các getElementsByTagName () bộ chọn tìm nạp một nhóm các phần tử có cùng tên thẻ. Ví dụ: nếu bạn muốn chọn tất cả h2 trên một trang web, bạn có thể sử dụng mã sau:
value = document.getElementsByTagName('h2')
console.log(value)Điều này lưu trữ tất cả các phần tử h2 trong một tập hợp HTML được gọi là giá trị.
Sử dụng getElementsByClassName ()
Các getElementsByClassName () bộ chọn trả về một tập hợp các phần tử có cùng tên lớp.
value = document.getElementsByClassName('articles')
console.log(value)
Chèn mã ở trên vào tệp JavaScript của bạn sẽ trả về bốn phần tử div có tên lớp “article” trong bảng điều khiển trình duyệt.
Sử dụng querySelectorAll ()
Các querySelectorAll () phương thức trả về một danh sách nút của tất cả các phần tử phù hợp với bộ chọn đã cho. Để truy cập tất cả các phần tử đoạn trong phần blog, bạn có thể sử dụng mã sau:
value = document.querySelectorAll('#blog p')
console.log(value)Bạn thậm chí có thể bao gồm một số bộ chọn trong chuỗi, phân tách từng bộ bằng dấu phẩy, giống như trong CSS:
value = document.querySelectorAll('h2, .articles')
console.log(value)Sử dụng bộ chọn DOM để tạo trang web động
Tại thời điểm này, bạn nên hiểu rõ về DOM và cách nó hoạt động. Bạn cũng nên biết các bộ chọn đơn và nhiều bộ khác nhau, cũng như cách sử dụng chúng.
Tuy nhiên, giành quyền truy cập vào các phần tử HTML chỉ là bước đầu tiên trong những gì bạn có thể làm với bộ chọn DOM. Bộ chọn DOM sẽ giúp bạn phát triển các khía cạnh chức năng của trang web, chẳng hạn như xử lý các sự kiện onclick và onscroll.
Đọc tiếp
Giới thiệu về tác giả
