Làm cách nào để chọn phần tử HTML js?

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ư sau

let allDivs = document.querySelectorAll('div');

Bây giờ chúng ta có thể nhắm mục tiêu mọ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';
});

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ụ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, 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 đây

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ỉ 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

<div id="my-id">div>

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

Làm cách nào để chọn tất cả các thành phần HTML trong JavaScript?

Làm cách nào để lấy một phần tử trong JavaScript?

Làm cách nào để chọn JavaScript phần tử đầu vào?

Làm cách nào để chọn một div trong js?