Bộ chọn DOM JavaScript
Trong hướng dẫn này, bạn sẽ tìm hiểu cách chọn các phần tử DOM trong JavaScript.
Chọn các phần tử DOM trong JavaScript
JavaScript được sử dụng phổ biến nhất để lấy hoặc sửa đổi nội dung hoặc giá trị của các thành phần HTML trên trang cũng như áp dụng một số hiệu ứng như hiển thị, ẩn, hoạt ảnh, v.v. Tuy nhiên, trước khi có thể thực hiện bất kỳ hành động nào, bạn cần tìm hoặc chọn phần tử HTML mục tiêu.
Trong các phần sau, bạn sẽ thấy một số cách phổ biến để chọn các thành phần trên một trang và thực hiện điều gì đó với chúng bằng cách sử dụng JavaScript.
Chọn các phần tử trên cùng
Các phần tử trên cùng trong tài liệu HTML có sẵn trực tiếp dưới dạng thuộc tính document. Ví dụ: phần tử <html> có thể được truy cập bằng thuộc tính document.documentElement, trong khi phần tử <head> có thể được truy cập bằng thuộc tínhdocument.head và phần tử <body> có thể được truy cập bằng thuộc tính document.body. Đây là một ví dụ:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Topmost Elements</title>
</head>
<body>
<script>
// Display lang attribute value of html element
alert(document.documentElement.getAttribute("lang")); // Outputs: en
// Set background color of body element
document.body.style.background = "yellow";
// Display tag name of the head element's first child
alert(document.head.firstElementChild.nodeName); // Outputs: meta
</script>
</body>
</html>Nhưng hãy cẩn thận. Nếu document.bodyđược sử dụng trước thẻ <body> (ví dụ bên trong <head>), nó sẽ trả về null thay vì phần tử body. Bởi vì tại thời điểm tập lệnh được thực thi, thẻ<body> không được trình duyệt phân tích cú pháp, nên thực tế document.body là null tại thời điểm đó.
Chúng ta hãy xem ví dụ sau để hiểu rõ hơn về điều này:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Document.body Demo</title>
<script>
alert("From HEAD: " + document.body); // Outputs: null (since <body> is not parsed yet)
</script>
</head>
<body>
<script>
alert("From BODY: " + document.body); // Outputs: HTMLBodyElement
</script>
</body>
</html>Chọn phần tử theo ID
Bạn có thể chọn một phần tử dựa trên ID duy nhất của nó bằng hàm getElementById(). Đây là cách dễ nhất để tìm phần tử HTML trong cây DOM.
Ví dụ sau chọn và đánh dấu một phần tử có thuộc tính ID id="mark".
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Element by ID</title>
</head>
<body>
<p id="mark">This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
<script>
// Selecting element with id mark
let match = document.getElementById("mark");
// Highlighting element's background
match.style.background = "yellow";
</script>
</body>
</html>Hàm getElementById() sẽ trả về phần tử dưới dạng đối tượng nếu tìm thấy phần tử phù hợp hoặc nullnếu không tìm thấy phần tử phù hợp trong tài liệu.
Lưu ý: Bất kỳ phần tử HTML nào cũng có thể có thuộc tính id. Giá trị của thuộc tính này phải là duy nhất trong một trang, tức là không có hai phần tử nào trong cùng một trang có thể có cùng một ID.
Chọn các phần tử theo tên lớp
Tương tự, bạn có thể sử dụng hàm getElementsByClassName() này để chọn tất cả các thành phần có tên lớp cụ thể. Phương thức này trả về một đối tượng giống mảng gồm tất cả các phần tử con có tất cả các tên lớp đã cho. Hãy xem ví dụ sau:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Class Name</title>
</head>
<body>
<p class="test">This is a paragraph of text.</p>
<div class="block test">This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
// Selecting elements with class test
let matches = document.getElementsByClassName("test");
// Displaying the selected elements count
document.write("Number of selected elements: " + matches.length);
// Applying bold style to first element in selection
matches[0].style.fontWeight = "bold";
// Applying italic style to last element in selection
matches[matches.length - 1].style.fontStyle = "italic";
// Highlighting each element's background through loop
for(let elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>Chọn các thành phần theo tên thẻ
Bạn cũng có thể chọn các thành phần HTML theo tên thẻ bằng hàm getElementsByTagName() này. Phương thức này cũng trả về một đối tượng dạng mảng gồm tất cả các phần tử con có tên thẻ đã cho.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Tag Name</title>
</head>
<body>
<p>This is a paragraph of text.</p>
<div class="test">This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
// Selecting all paragraph elements
let matches = document.getElementsByTagName("p");
// Printing the number of selected paragraphs
document.write("Number of selected elements: " + matches.length);
// Highlighting each paragraph's background through loop
for(let elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>Chọn các phần tử bằng Bộ chọn CSS
Bạn có thể sử dụng hàm querySelectorAll() để chọn các thành phần phù hợp với bộ chọn CSS đã chỉ định . Bộ chọn CSS cung cấp một cách rất mạnh mẽ và hiệu quả để chọn các thành phần HTML trong tài liệu. Vui lòng xem phần hướng dẫn CSS để tìm hiểu thêm về chúng.
Hàm này trả về danh sách tất cả các phần tử khớp với các bộ chọn đã chỉ định. Bạn có thể kiểm tra nó giống như bất kỳ mảng nào, như trong ví dụ sau:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements with CSS Selectors</title>
</head>
<body>
<ul>
<li>Bread</li>
<li class="tick">Coffee</li>
<li>Pineapple Cake</li>
</ul>
<script>
// Selecting all li elements
let matches = document.querySelectorAll("ul li");
// Printing the number of selected li elements
document.write("Number of selected elements: " + matches.length + "<hr>")
// Printing the content of selected li elements
for(let elem of matches) {
document.write(elem.innerHTML + "<br>");
}
// Applying line through style to first li element with class tick
matches = document.querySelectorAll("ul li.tick");
matches[0].style.textDecoration = "line-through";
</script>
</body>
</html>Lưu ý: Hàm querySelectorAll()cũng hỗ trợ các lớp giả CSS như :first-child, :last-child, :hover, v.v. Tuy nhiên, đối với các phần tử giả CSS như ::before, ::after, ::first-line, v.v., phương thức này luôn trả về một danh sách trống.