Trong JavaScript, sẽ có lúc bạn cần truy cập một phần tử HTML. Phương thức querySelector là một Web API chọn phần tử đầu tiên khớp với bộ chọn CSS được chỉ định truyền vào nó. Nhưng cách thức hoạt động chi tiết của nó như thế nào? Trong bài viết này, chúng ta sẽ xem xét một số ví dụ về cách sử dụng phương thức querySelector cũng như phương thức querySelectorAll.
Cú pháp cơ bản của phương thức querySelector()
Phương thức querySelector được gọi trên đối tượng document và nhận một đối số đại diện cho bộ chọn CSS của phần tử bạn muốn chọn.
document.querySelector(selector);
Nếu bộ chọn khớp với một phần tử trong tài liệu, phương thức sẽ trả về phần tử khớp đầu tiên. Nếu không có kết quả khớp, phương thức sẽ trả về null.
Cách sử dụng phương thức querySelector() với Bộ chọn loại
Bộ chọn loại trong CSS đề cập đến tên của một phần tử HTML. Ví dụ về điều này sẽ là button, div, p, v.v. Trong ví dụ đầu tiên này, chúng ta có một phần tử button bên trong tài liệu HTML.
<button>Show Alert</button>
Nếu chúng ta muốn truy cập phần tử đó bên trong tệp JavaScript của mình, chúng ta có thể sử dụng phương thức querySelector như thế này:
const buttonElement = document.querySelector("button");
Dòng mã này chọn nút đầu tiên mà nó nhìn thấy trên trang và gán kết quả đó cho một biến const có tên là buttonElement. Nếu chúng ta ghi biến buttonElement này vào bảng điều khiển, đây sẽ là kết quả đầu ra:
console.log(buttonElement);
Chúng ta có thể sử dụng biến buttonElement đó và thêm một trình lắng nghe sự kiện để hiển thị alert khi nút được nhấp vào.
buttonElement.addEventListener("click", () => { alert("Button was clicked!");
});
Cách sử dụng phương thức querySelector() với Bộ chọn lớp
Bộ chọn lớp trong CSS đề cập đến tên của một lớp được sử dụng trong một phần tử HTML. Ví dụ về điều này sẽ là .container, .button, v.v.
Giả sử chúng ta muốn xây dựng một trò chơi solitaire và muốn ẩn/hiện các quy tắc của trò chơi khi nhấp vào một nút. Chúng ta có thể sử dụng phương thức querySelector để chọn nút và vùng chứa quy tắc.
Đây là HTML bắt đầu:
<h1>Let's play solitaire!</h1>
<main> <button class="rules-btn">Show Rules</button> <section class="rules-container"> <h2>Rules to the game</h2> <ul> <li>There are 7 columns of cards</li> <li>First column has 1 card, second has 2, third has 3, and so on</li> <li>First card in each column is face up, rest are face down</li> <li>Move cards to build 4 stacks of cards in ascending order</li> <li>Start with aces and build up to kings</li> <li>Move cards by dragging and dropping</li> </ul> </section>
</main>
Bên trong tệp JavaScript, chúng ta có thể sử dụng phương thức querySelector để chọn nút quy tắc và vùng chứa quy tắc.
const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");
Sau đó, chúng ta có thể thêm một trình lắng nghe sự kiện vào biến rulesBtn để hiển thị/ẩn vùng chứa quy tắc khi nhấp vào nút. Chúng ta đang sử dụng thuộc tính classList để chuyển đổi lớp của "show" trên phần tử vùng chứa quy tắc.
rulesBtn.addEventListener("click", () => { rulesContainer.classList.toggle("show");
});
Đây là một ví dụ tương tác, nơi bạn có thể thấy vùng chứa quy tắc được hiển thị và ẩn khi nhấp vào nút.
Xử lý lỗi và hoàn thiện chức năng ẩn/hiện quy tắc
Ví dụ về NodeList.
Mặc dù nút chuyển đổi đang hoạt động ở đây, nhưng có một lỗi nhỏ trong mã. Theo mặc định, các quy tắc sẽ bị ẩn và văn bản nút hiển thị "Show Rules". Khi các quy tắc được hiển thị, văn bản nút sẽ thay đổi thành "Hide Rules", nhưng hiện tại thì không.
Bên trong trình lắng nghe sự kiện, chúng ta có thể cập nhật nội dung văn bản cho nút để hiển thị "Hide Rules" khi các quy tắc được hiển thị và "Show Rules" khi các quy tắc bị ẩn.
rulesBtn.textContent = rulesContainer.classList.contains("show") ? "Hide Rules" : "Show Rules";
Bây giờ văn bản nút sẽ thay đổi dựa trên trạng thái của vùng chứa quy tắc. Đây là mã JavaScript đầy đủ:
const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container"); rulesBtn.addEventListener("click", () => { rulesContainer.classList.toggle("show"); rulesBtn.textContent = rulesContainer.classList.contains("show") ? "Hide Rules" : "Show Rules";
});
Cách sử dụng phương thức querySelectorAll()
Phương thức querySelectorAll tương tự như phương thức querySelector, nhưng thay vì trả về phần tử khớp đầu tiên, nó trả về NodeList của tất cả các phần tử khớp. NodeList là một đối tượng giống như mảng chứa tất cả các phần tử khớp với bộ chọn được chỉ định.
Trong ví dụ này, chúng ta có một danh sách không có thứ tự về các môn thể thao và chúng ta muốn tạo màu nền ngẫu nhiên cho mỗi mục danh sách.
Đây là HTML bắt đầu:
<button class="btn">Generate Random Background Colors</button>
<ul class="sports-list"> <li>Football</li> <li>Basketball</li> <li>Tennis</li> <li>Golf</li> <li>Swimming</li>
</ul>
Để chọn tất cả các mục danh sách bên trong danh sách không có thứ tự, chúng ta có thể sử dụng phương thức querySelectorAll như thế này:
const sportsList = document.querySelectorAll(".sports-list li");
Nếu chúng ta ghi biến sportsList vào bảng điều khiển, đây sẽ là kết quả đầu ra:
console.log(sportsList);
Sau đó, chúng ta cần sử dụng phương thức querySelector để chọn nút.
const randomColorBtn = document.querySelector(".btn");
Sau đó, chúng ta có thể tạo một danh sách màu ngẫu nhiên.
const lightColorsArr = [ "#FFDAB9", "#FFE4B5", "#FFFFE0", "#FAFAD2", "#F0FFF0", "#E0FFFF", "#AFEEEE", "#00CED1", "#00BFFF", "#1E90FF", "#ADD8E6", "#7FFFD4", "#7CFC00", "#7FFF00", "#32CD32", "#ADFF2F", "#FFFF00", "#FFD700", "#FFA500", "#FF6347",
];
Mỗi khi người dùng nhấp vào nút, chúng ta muốn xáo trộn danh sách màu và chọn 5 màu sáng ngẫu nhiên từ mảng.
Tạo màu nền ngẫu nhiên và thuật toán xáo trộn Fisher-Yates
Chúng ta có thể sử dụng thuật toán xáo trộn Fisher-Yates để xáo trộn mảng, đây là cách phổ biến để xáo trộn mảng trong JavaScript.
function shuffleArray(arr) { let currentIndex = arr.length; let randomIndex; while (currentIndex !== 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [arr[currentIndex], arr[randomIndex]] = [ arr[randomIndex], arr[currentIndex], ]; } return arr;
}
Sau đó, chúng ta có thể thêm một trình lắng nghe sự kiện vào nút và xáo trộn mảng.
randomColorBtn.addEventListener("click", () => { const shuffledColors = shuffleArray(lightColorsArr);
});
Đối với mỗi mục danh sách, chúng ta có thể đặt màu nền thành một màu ngẫu nhiên từ mảng đã xáo trộn.
sportsList.forEach((list, index) => { list.style.backgroundColor = shuffledColors[index];
});
Đây là mã đầy đủ:
const sportsList = document.querySelectorAll(".sports-list li");
const randomColorBtn = document.querySelector(".btn"); console.log(sportsList); const lightColorsArr = [ "#FFDAB9", "#FFE4B5", "#FFFFE0", "#FAFAD2", "#F0FFF0", "#E0FFFF", "#AFEEEE", "#00CED1", "#00BFFF", "#1E90FF", "#ADD8E6", "#7FFFD4", "#7CFC00", "#7FFF00", "#32CD32", "#ADFF2F", "#FFFF00", "#FFD700", "#FFA500", "#FF6347",
]; // fisher-yates shuffle algorithm function shuffleArray(arr) { let currentIndex = arr.length; let randomIndex; while (currentIndex !== 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [arr[currentIndex], arr[randomIndex]] = [ arr[randomIndex], arr[currentIndex], ]; } return arr;
} randomColorBtn.addEventListener("click", () => { const shuffledColors = shuffleArray(lightColorsArr); sportsList.forEach((list, index) => { list.style.backgroundColor = shuffledColors[index]; });
});
Đây là ví dụ tương tác với mã JavaScript đầy đủ. Nhấp vào nút và bạn sẽ thấy các mục danh sách thay đổi thành màu nền ngẫu nhiên.
Phương thức querySelector và querySelectorAll là các Web API hữu ích cho phép bạn truy cập các phần tử trong DOM. Bạn có thể sử dụng các phương thức này để chọn phần tử theo loại, lớp, id, thuộc tính, bộ chọn giả lớp và bộ chọn giả phần tử.
Tôi khuyên bạn nên thử nghiệm những phương pháp này và xem bạn có thể nghĩ ra điều gì cho dự án của riêng mình.
Tôi hy vọng bạn thấy bài viết này hữu ích và nhiều thông tin. Cảm ơn các bạn đã theo dõi.