Vì vậy, bạn muốn chọn một phần tử trên trang web bằng JavaScript? Đó là điểm đặc biệt của getElementById phương thức, cái gọi là vua của phần tử getters trong JavaScript.
getElementById cho phép bạn chọn một phần tử dựa trên ID của nó. Đó là một tên phương pháp khá dễ hiểu khi bạn nghĩ về nó.
Trong hướng dẫn này, chúng ta sẽ nói về những gì getElementById là, nó hoạt động như thế nào và khi nào bạn nên sử dụng nó trong mã của mình. Chúng ta sẽ xem qua một ví dụ về nút văn bản “Hiển thị / ẩn” trong bản trình diễn document.getElementById của chúng tôi.
Hãy đi sâu vào!
getElementById là gì?
getElementById() là một phương thức Tài liệu chọn một phần tử từ DOM HTML trên một trang dựa trên thuộc tính ID phần tử mà bạn đã chỉ định.
Hãy xem xét đoạn mã sau:
index.html
<button id="mainButton">This is a button!</button>
scripts.js
const button = document.getElementById("mainButton");
Trong mã HTML của mình, chúng tôi đã xác định một <button> phần tử có ID mainButton . Mã JavaScript của chúng tôi sẽ truy xuất thành phần này bằng cách sử dụng getElementById() phương pháp.
Phương pháp này hữu ích nếu bạn muốn truy xuất một phần tử duy nhất trên một trang. Nếu nghĩ lại việc học HTML và CSS, bạn sẽ biết rằng các ID phải là duy nhất. Điều này làm cho getElementById() hoàn hảo để truy xuất các phần tử đơn lẻ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Bạn có thể chọn sử dụng phương pháp này nếu bạn đã chỉ định ID cho một phần tử. Thay vì sử 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 một tiêu chí cụ thể, bạn có thể truy xuất một phần tử bằng cách sử dụng getElementById() .
getElementById() là một phương pháp phổ biến được sử dụng để truy xuất một mục trên một trang web.
Những điều bạn cần biết về getElementById
Trước khi đi sâu vào một ví dụ, chúng ta sẽ nói về những sai lầm mà người mới bắt đầu thường mắc phải khi sử dụng phương pháp này.
Bạn luôn cảm thấy khó chịu khi bạn đang học một điều gì đó mới và nó không hoạt động, vì vậy hãy trò chuyện về những lỗi phổ biến bạn có thể mắc phải khi hiểu rõ về getElementById() .
Đầu tiên, getElementById() phân biệt chữ hoa chữ thường. Trong khi thuật ngữ ID thường được viết hoa trong lập trình, bạn cần sử dụng trường hợp lạc đà Id khi bạn đang sử dụng phương pháp này. Nếu không, phương pháp này sẽ không hoạt động.
Thứ hai, ID mà bạn chỉ định không được bao gồm dấu thăng (hashtag). Hãy xem xét mã này:
const button = document.getElementById("#mainButton");
Ví dụ này có thể giống như nó sẽ truy xuất phần tử có ID mainButton , nhưng đó không phải là trường hợp. Bạn chỉ nên chỉ định ID của phần tử bạn muốn truy xuất:
const button = document.getElementById("mainButton"); Bây giờ thì đã xong, chúng ta có thể xem qua một ví dụ.
Cách sử dụng getElementById
Khi duyệt web, bạn có thể gặp các thẻ có nội dung “Đọc thêm”. Một trang web có thể hiển thị một vài câu của một đoạn văn bản, sau đó yêu cầu bạn nhấn vào nút đó để bạn có thể xem phần còn lại của văn bản.
Chúng tôi sẽ xây dựng tính năng đó bằng cách sử dụng getElementById() nơi trú ẩn. 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 người dùng
Hãy bắt đầu bằng cách tạo giao diện người dùng đơn giản bằng HTML và CSS. Tạo một tệp mới có tên là index.html và dán vào 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 này, chúng tôi đã xác định một hộp chứa thông tin về getElementById() phương pháp. Hộp của chúng tôi chứa một tiêu đề, hai đoạn văn bản và một thẻ HTML mở rộng mà chúng tôi sẽ sử dụng để hiển thị đoạn cuối cùng.
Mở một tệp có tên styles.css và dán vào mã này:
<!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> Mã này cung cấp cho trang của chúng tôi một số màu để làm cho trang bắt mắt hơn. Khi bạn mở trang web, bạn sẽ thấy như sau:
Có một vấn đề:thẻ “Đọc thêm” của chúng tôi không có tác dụng gì và đoạn văn bản cuối cùng của chúng tôi vẫn hiển thị. Đó là bởi vì chúng tôi chưa thêm vào mã JavaScript của mình. Hãy viết chức năng JavaScript cho trang web của chúng tôi.
Thêm mã JavaScript
Hãy bắt đầu bằng cách chọn các yếu tố mà chúng ta sẽ làm việc. Các yếu tố chúng tôi cần chọn là <span> của chúng tôi (chứa văn bản “Đọc thêm” của chúng tôi) và đoạn mà chúng tôi muốn chuyển đổi giữa hiển thị và ẩn.
Tạo một tệp có tên scripts.js và dán vào mã này:
var paragraph = document.getElementById("hiddenText");
paragraph.style.display = "none";
Trong mã của chúng tôi, chúng tôi đã sử dụng getElementById() để lấy đoạn văn của chúng tôi từ tài liệu DOM. chọn đối tượng tài liệu hiddenText và ẩn nó. Tiếp theo, chúng tôi sẽ tạo một hàm chuyển đổi văn bản của chúng tôi:
function toggleText() {
if (paragraph.style.display === "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
}
}
Chúng tôi đã bắt đầu bằng cách chọn phần tử có ID hiddenText . Điều này đề cập đến đoạn văn bản mà chúng tôi muốn xuất hiện hoặc biến mất khi nhấp vào "Đọc thêm".
Chúng tôi đã viết một if câu lệnh kiểm tra xem đoạn văn đó có hiển thị hay không. Nếu nó không hiển thị, thì display giá trị của đoạn sẽ được đặt thành block , điều này sẽ làm cho nó xuất hiện; nếu không, display của đoạn văn giá trị sẽ được đặt thành none , và vì vậy nó sẽ biến mất.
Mã của chúng tôi vẫn chưa hoàn thành. Tiếp theo, chúng ta sẽ tạo một trình xử lý sự kiện sẽ kích hoạt khi chúng ta nhấp vào văn bản “Đọc thêm”:
var showButton = document.getElementById("showMore");
showButton.addEventListener("click", toggleText);
Mã này chọn Read more văn bản trên trang của chúng tôi. Sau đó, nó thiết lập một trình xử lý sự kiện sẽ kích hoạt toggleText() của chúng tôi khi nhấp vào văn bản “Đọc thêm”.
Bây giờ, hãy mở trang web của chúng tôi và thử nhấp vào Read more bản văn:
Mã của chúng tôi có chức năng! Khi bạn nhấp vào văn bản “Đọc thêm”, văn bản sẽ xuất hiện. Khi bạn nhấp vào nó một lần nữa, văn bản sẽ biến mất.
Kết luận
getElementById() getter cho phép bạn truy xuất một phần tử dựa trên ID của nó từ một trang web.
Bạn đang tìm kiếm một thử thách? Sử dụng getElementById() getter để thay đổi giá trị của “Đọc thêm” thành “Đọc ít hơn” khi văn bản hiển thị. Để đi xa hơn, bạn có thể thêm một vài hình ảnh vào trang và tạo một nút ẩn tất cả những hình ảnh đó khi nhấp vào nút.
Bây giờ bạn đã sẵn sàng để bắt đầu sử dụng getElementById() getter như một lập trình viên chuyên nghiệp!