Hướng dẫn javascript select all elements with class - javascript chọn tất cả các phần tử với lớp

Tôi muốn sửa đổi tất cả các lớp với JS. Có cách nào để chọn chúng mà không cần đặt chỉ mục mảng theo cách thủ công (ví dụ: [0] hoặc [1] hoặc [184])?

Mã ví dụ:

<div class='message'>something:</div>
<div class='message'>something</div>

const element = document.querySelectorAll(".message");
element.classList.add("color");

Nó chỉ hoạt động khi tôi thêm [0] và chỉ cho phần tử đầu tiên có lớp. Nhưng tôi muốn sửa đổi tất cả các yếu tố với lớp.

Đã hỏi ngày 23 tháng 3 năm 2019 lúc 15:26Mar 23, 2019 at 15:26

OliveroliverOliver

2912 Huy hiệu vàng4 Huy hiệu bạc21 Huy hiệu đồng2 gold badges4 silver badges21 bronze badges

2

Điều quan trọng là phải tìm hiểu những gì cú pháp ngôn ngữ cơ bản trước tiên. [0] đang chọn chỉ mục 0 của một mảng (hoặc đối tượng giống như mảng). Vì vậy, để hoạt động trên tất cả chúng, bạn có thể sử dụng một vòng lặp với một biến được tăng lên bắt đầu từ 0 và tiếp tục cho đến khi nó đi ra khỏi giới hạn của mảng.

function replaceEmotes() {
    var messages = document.querySelectorAll(".message");
    for (var i = 0; i < messages.length; i++) {
        var str = messages[i].innerHTML.replace(":smile:", "<i class='em em-smile'></i>");
        messages[i].innerHTML = str;
    }
}

Có nhiều cách khác, nhưng đây là một cú pháp cơ bản có lẽ nên được học trước.

Đã trả lời ngày 23 tháng 3 năm 2019 lúc 15:29Mar 23, 2019 at 15:29

Ziggy Wiggyziggy Wiggyziggy wiggy

1.0295 huy hiệu bạc6 Huy hiệu đồng5 silver badges6 bronze badges

2

Sử dụng foreach để lặp lại trên tất cả các nút tin nhắn và thay thế các emote. Cũng lưu ý rằng tôi đang sử dụng RegEXP toàn cầu để thay thế tất cả các chuỗi

const element = document.querySelectorAll(".message");
element.classList.add("color");

function replaceEmotes() {
    var messages = document.querySelectorAll(".message");

    messages.forEach(message => {
       message.innerHTML = message.innerHTML.replace(/:smile:/g, "<i class='em em-smile'></i>");
    });
}

Đã trả lời ngày 23 tháng 3 năm 2019 lúc 15:36Mar 23, 2019 at 15:36

Abadalyanabadalyanabadalyan

1.1807 Huy hiệu bạc13 Huy hiệu đồng7 silver badges13 bronze badges

const element = document.querySelectorAll(".message");
element.classList.add("color");

var elements = document.querySelectorAll('.className');
for(var i = 0; i < elements.length; i++){
    var str = elements[i].innerHTML;
    elements[i].innerHTML = str.replace(":smile:", "<i class='em em-smile'></i>");
}

Bạn cũng có thể làm điều tương tự bằng cách sử dụng

const element = document.querySelectorAll(".message");
element.classList.add("color");

var elements = document.getElementsByClassName('.className');
for(var i = 0; i < elements.length; i++){
    // Same like above...
}

Đã trả lời ngày 23 tháng 3 năm 2019 lúc 15:41Mar 23, 2019 at 15:41

Adnan Tokyadnan TokyAdnan Toky

1.6221 Huy hiệu vàng10 Huy hiệu bạc19 Huy hiệu đồng1 gold badge10 silver badges19 bronze badges

Bạn có thể sử dụng

const element = document.querySelectorAll(".message");
element.classList.add("color");

Đã trả lời ngày 23 tháng 3 năm 2019 lúc 15:31Mar 23, 2019 at 15:31

9-11

Thí dụ

Chọn tất cả các thành phần với lớp = "Ví dụ":

Document.QuerySelectorall (". Ví dụ");

Hãy tự mình thử »

Thêm ví dụ dưới đây.

Định nghĩa và cách sử dụng

Phương thức

const element = document.querySelectorAll(".message");
element.classList.add("color");

Phương thức

const element = document.querySelectorAll(".message");
element.classList.add("color");

Phương thức const element = document.querySelectorAll(".message"); element.classList.add("color"); 4 ném ngoại lệ cú pháp_err nếu (các) bộ chọn không hợp lệ

Sự khác biệt giữa một htmlcollection và một cái gật đầuNodeList and an HTMLcollection is very much the same thing.

Một cái nút và một htmlcollection là rất giống nhau.

Cả hai đều là các bộ sưu tập giống như mảng (danh sách) của các nút (phần tử) được trích xuất từ ​​một tài liệu. Các nút có thể được truy cập bằng các số chỉ mục. Chỉ số bắt đầu ở 0.length property that returns the number of elements in the list (collection).

Cả hai đều có một thuộc tính độ dài trả về số lượng các phần tử trong danh sách (bộ sưu tập).document elements.

Nodelist là một tập hợp các nút tài liệu (nút phần tử, nút thuộc tính và nút văn bản).document nodes (element nodes, attribute nodes, and text nodes).

Các mục HTMLCollection có thể được truy cập bằng tên, ID hoặc số chỉ mục của chúng.

Các mục Nodelist chỉ có thể được truy cập bằng số chỉ mục của chúng.

Một htmlcollection luôn là một bộ sưu tập trực tiếp. Ví dụ: Nếu bạn thêm một phần tử vào danh sách trong DOM, danh sách trong HTMLCollection cũng sẽ thay đổi.live collection. Example: If you add a

const element = document.querySelectorAll(".message");
element.classList.add("color");

const element = document.querySelectorAll(".message");
element.classList.add("color");

const element = document.querySelectorAll(".message");
element.classList.add("color");

function replaceEmotes() {
    var messages = document.querySelectorAll(".message");
    for (var i = 0; i < messages.length; i++) {
        var str = messages[i].innerHTML.replace(":smile:", "<i class='em em-smile'></i>");
        messages[i].innerHTML = str;
    }
}