Cách chọn getElementsByClassName hiệu quả

Có thể nói việc chọn getElementsByClassName thực sự là một công cụ Js hiệu quả, tuy vậy phải nói là lệnh này chỉ trả về khi Class chúng ta xác định rõ ràng là ở vị trí thứ mấy

Ví dụ tôi muốn target vào nút bấm có class “myBtn” đầu tiên thì Code js sẽ là

var btn = getElementsByClassName("myBtn")[0]

Tuy nhiên, nếu bạn muốn target tất cả các class có chứa myBtn & thực hiện hành động khi click vào nút đó thì sao?

Hãy sử dụng Code này nhé

var btn = document.getElementsByClassName(
"myBtn"
);

for (var i=0; i < btn.length; i++) {
    btn[i].onclick = function(){
        alert("Finaly!");
    }
};

Nguồn: stackoverflow

Chúng ta định nghĩa 1 biến là btn target các đối tượng có Class là “myBtn” – Đây có thể là đối tượng mà ta sử dụng để target các nút bấm rất hiệu quả. Tiếp đó, bạn sử dụng code ở dưới, đó là với bao nhiêu thành phần trong page có class như vậy thì biến btn[i] đều có một chức năng giống nhau. Như vậy bạn đã thực hiện một vòng lặp

Rất dễ dàng phải không nào

About nguyenbahoangnam

Đam mê Digital Marketing, Web Development, Fitness & Healthy Diet đồng thời cũng là Fan cuồng của lối sống tối giản ^^!. Quyết tâm khai quật nghiệp "nhà văn"

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *