Vậy, bạn muốn chọn một phần tử trên trang web trong JavaScript? Đó là chuyên môn của phương thức getElementById, cái gọi là vua của các phương thức getters trong JavaScript.
getElementById cho phép chọn phần tử dựa trên ID của nó. Tên phương thức khá tự giải thích khi suy nghĩ.
Trong hướng dẫn này, chúng ta sẽ nói về getElementById là gì, cách hoạt động, và khi nào nên dùng trong mã. Chúng ta sẽ đi qua ví dụ nút "Hiện/Ẩn" văn bản trong demo document.getElementById.
Hãy đi sâu!
getElementById Là Gì?
getElementById() là phương thức Document chọn phần tử từ HTML DOM trên trang dựa trên thuộc tính ID phần tử bạn chỉ định.
Xem mã:
index.html <button id="mainButton">This is a button!</button>
scripts.js const button = document.getElementById("mainButton");
Trong mã HTML, định nghĩa phần tử <button> có ID mainButton. Mã JavaScript truy xuất thành phần này dùng phương thức getElementById().
Phương pháp này hữu ích nếu muốn truy xuất một phần tử đơn lẻ trên trang. Nếu quay lại học HTML và CSS, bạn biết ID phải duy nhất. Điều này làm getElementById() hoàn hảo cho truy xuất phần tử đơn lẻ.
Bạn có thể chọn phương pháp này nếu đã gán ID cho phần tử. Thay vì dùng getter rộng hơn như querySelector hoặc getElementByClass, trả về đối tượng phần tử đầu tiên đáp ứng tiêu chí, bạn có thể truy xuất phần tử dùng getElementById().
getElementById() là phương pháp phổ biến để truy xuất mục trên trang web.
Những Điều Cần Biết Về getElementById
Trước khi đi vào ví dụ, chúng ta nói về lỗi người mới thường gặp khi dùng phương thức này.
Luôn bực bội khi học điều mới mà không hoạt động, nên hãy nói về lỗi thường gặp khi bạn làm quen với getElementById().
Thứ nhất, getElementById() phân biệt chữ hoa/chữ thường (case sensitive). Mặc dù thuật ngữ ID thường viết hoa trong lập trình, bạn cần dùng camel case Id khi dùng phương thức này. Nếu không, phương thức không hoạt động.
Thứ hai, ID chỉ định không nên bao gồm dấu thăng (hashtag). Xem mã:
const button = document.getElementById("#mainButton");
Ví dụ này trông như sẽ truy xuất phần tử ID mainButton, nhưng không phải. Bạn chỉ nên chỉ định ID phần tử muốn truy xuất:
const button = document.getElementById("mainButton");
Đã xong phần đó, hãy đi qua ví dụ.
Cách Sử Dụng getElementById
Khi duyệt web, bạn có thể gặp thẻ "Đọc thêm". Trang web có thể hiển thị vài câu văn bản, rồi yêu cầu nhấn nút để xem phần còn lại.
Chúng ta sẽ xây dựng tính năng đó dùng getter getElementById(). Bạn có thể xem mã cuối cùng cho hướng dẫn này trên GitHub.
Tạo Giao Diện (Front-End)
Hãy bắt đầu tạo front-end đơn giản dùng HTML và CSS. Tạo file index.html và dán mã sau:
<!DOCTYPE html> <html> <head> <title>An Introduction to getElementById()</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div> <h1>JavaScript getElementById()</h1> <p>Are you looking to learn more about getElementById()? You've come to the right place.</p> <span id="showMore">Read more</span> <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p> </div> </body> <script src="scripts.js"></script> </html>
Trong tài liệu, định nghĩa hộp chứa thông tin về phương thức getElementById(). Hộp chứa tiêu đề, hai đoạn văn, và thẻ span HTML dùng để hiển thị đoạn cuối.
Mở file styles.css và dán mã:
/* CSS styles here */
Mã này trang trí trang web đẹp mắt. Khi mở trang web, bạn thấy giao diện như hình.
Có một vấn đề: thẻ "Đọc thêm" không làm gì, và đoạn văn cuối vẫn hiển thị. Đó là vì chưa thêm mã JavaScript. Hãy viết chức năng JavaScript cho trang web.
Thêm Mã JavaScript
Hãy bắt đầu chọn phần tử sẽ làm việc. Phần tử cần chọn là thẻ <span> (chứa văn bản "Đọc thêm"), và đoạn văn muốn chuyển đổi giữa hiển thị và ẩn.
Tạo file scripts.js và dán mã:
var paragraph = document.getElementById("hiddenText");
paragraph.style.display = "none";
Trong mã, dùng getElementById() truy xuất đoạn văn từ tài liệu DOM. chọn đối tượng hiddenText và ẩn nó. Tiếp theo, tạo hàm chuyển đổi văn bản:
function toggleText() {
if (paragraph.style.display === "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
}
}
Bắt đầu bằng chọn phần tử ID hiddenText. Điều này tham chiếu đoạn văn muốn hiện/ẩn khi "Đọc thêm" được nhấn.
Viết câu lệnh if kiểm tra đoạn văn có hiển thị không. Nếu không hiển thị, giá trị display của đoạn văn đặt thành block, làm nó hiện ra; ngược lại, đặt display thành none, làm nó biến mất.
Mã chưa xong. Tiếp theo, tạo trình lắng nghe sự kiện (event listener) kích hoạt khi nhấn vào văn bản "Đọc thêm":
var showButton = document.getElementById("showMore");
showButton.addEventListener("click", toggleText);
Mã chọn văn bản Đọc thêm trên trang. Thiết lập trình lắng nghe sự kiện kích hoạt phương thức toggleText() khi "Đọc thêm" được nhấn.
Bây giờ, mở trang web và thử nhấn Đọc thêm:
Mã hoạt động! Khi nhấn "Đọc thêm", văn bản xuất hiện. Nhấn lại, văn bản biến mất.
Kết Luận
Getter getElementById() cho phép truy xuất phần tử dựa trên ID từ trang web.
Bạn tìm kiếm thách thức? Dùng getElementById() thay giá trị "Đọc thêm" thành "Đọc bớt" khi văn bản hiển thị. Để tiến xa hơn, thêm vài hình ảnh và tạo nút ẩn tất cả hình ảnh khi nhấn nút.
Bây giờ bạn đã sẵn sàng bắt đầu dùng getter getElementById() như lập trình viên chuyên nghiệp!