Trong Javascript, có thể chọn một phần tử HTML thông qua mã của bạn. Điều đó cho phép chúng tôi tương tác trực tiếp với các yếu tố cụ thể và thay đổi mọi thứ về chúng
Tại sao chúng ta chọn các phần tử HTML?
Có một số lý do chúng tôi muốn nhắm mục tiêu một phần tử HTML cụ thể. Có thể là thêm một sự kiện vào đó - để chúng ta có thể làm gì đó khi người dùng nhấp vào một nút chẳng hạn. Một lý do khác, có thể là thay đổi CSS của một phần tử theo chương trình. Vì bất kỳ lý do gì chúng tôi làm điều đó, có một số chức năng chúng tôi có sẵn để làm điều này trong Javascript
Cách chọn tất cả các phần tử phù hợp trong Javascript
Chúng tôi có thể tìm thấy các phần tử cụ thể trong Javascript bằng cách sử dụng cùng bộ chọn mà chúng tôi sử dụng trong CSS. Để chọn tất cả các phần tử với một bộ chọn cụ thể, chúng ta có thể sử dụng
let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
5. Ví dụ: nếu chúng tôi muốn nhắm mục tiêu tất cả các let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
6, chúng tôi có thể viết như saulet allDivs = document.querySelectorAll['div'];
Bây giờ chúng ta có thể nhắm mục tiêu mọi
6 và làm điều gì đó với nó. Khi chúng tôi nhắm mục tiêu nhiều phần tử HTML như thế này, nó sẽ trả về một NodeList. Thông thường, chúng tôi có thể lặp lại từng phần tử này bằng cách sử dụnglet allDivs = document.querySelectorAll['div']; allDivs.forEach[function[item] { // the variable 'item' is each of our divs. // So we can change it. The code below will make all divs have red text! item.style.color = 'red'; }];
let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
0, tuy nhiên, không phải tất cả các trình duyệt đều thực hiện điều này. Bạn có thể đọc về điều ấy nhiều hơn tại đâylet allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
Chỉ chọn phần tử phù hợp đầu tiên
Tương tự như
let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
5, chúng ta có thể sử dụng let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
2 để chỉ chọn phần tử khớp đầu tiên. Điều đó có nghĩa là chúng tôi không phải lặp lại kết quả của mình với let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
0// The below only targets the first div it finds.
let oneDivOnly = document.querySelector['div'];
Chọn phần tử theo ID
Chúng ta cũng có thể chọn các phần tử theo ID của chúng. Lý do chúng tôi có thể sử dụng điều này là vì việc chọn thứ gì đó theo ID của nó nhanh hơn nhiều so với việc tìm kiếm tài liệu dựa trên bộ chọn truy vấn. Ví dụ: giả sử chúng tôi đã cấp cho một phần tử HTML một ID gọi là 'my-id'. Chúng tôi có thể chọn nó bằng cách sử dụng
let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
4
let myId = document.getElementById['my-id'];
Chờ tải tài liệu
Đôi khi chúng tôi chạy Javascript trước khi tải HTML. Điều này có thể xảy ra nếu bạn có Javascript trong phần đầu tài liệu của mình. Nếu Javascript của bạn ở cuối trang, có lẽ bạn không cần phải lo lắng
Tuy nhiên, nếu Javascript của bạn ở đầu trang, bạn sẽ muốn đợi cho đến khi tài liệu được tải. Nếu không, HTML sẽ chưa được tải, vì vậy tệp Javascript sẽ không thể chọn các phần tử HTML - điều này sẽ gây ra lỗi. Chúng tôi có thể làm điều đó bằng cách sử dụng Trình xử lý sự kiện và chờ tải nội dung DOM. Mã cho nó trông như thế này
// Using the below line, we can wait for the HTML to load in the page
document.addEventListener['DOMContentLoaded', function[] {
// Everything inside this function, will run after the HTML document has loaded
let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
}]
Chọn phần tử theo lớp
Đối với hầu hết các trường hợp sử dụng,
let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
2 và let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
4 sẽ đáp ứng hầu hết các nhu cầu. Đối với một số trường hợp, bạn có thể thích sử dụng let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
7. Vấn đề với let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
7 là nó trả về một HTMLCollection mà chúng ta không thể sử dụng let allDivs = document.querySelectorAll['div'];
allDivs.forEach[function[item] {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
}];
0 trên. Như vậy, chúng ta phải sử dụng một chút thủ thuật mảng Javascript để làm điều gì đó với từng phần tử phù hợp