Làm thế nào để kích hoạt sự kiện nhấp chuột sử dụng JavaScript trên querySelectorAll

Question

Trong jQuery tôi có đoạn mã sau

$("li#credit").trigger('click'); 

Mã này gây nên sự kiện nhấp chuột duy nhất trên li có tín dụng id.

Bây giờ để làm điều này sử dụng JavaScript

document.querySelectorAll("li#credit").click(); 

Tôi nhận được lỗi:

click() is not a function

Trang tôi đang làm việc có nhiều yếu tố với id "tín dụng", tôi cần phải kích hoạt một nhấp chuột sự kiện chỉ trên <li> có tín dụng id.

Answer 1

querySelectorAll trả về đối tượng NodeList (source) và không phải là phần tử DOM. Một đối tượng NodeList chứa các phần tử DOM.

Mã của bạn cần phải thay đổi để có được những yếu tố đầu tiên và sau đó gọi click():

document.querySelectorAll("li#credit")[0].click(); 

Nếu bạn muốn kích hoạt sự kiện .click() cho tất cả các yếu tố mà bạn có thể thực hiện một vòng lặp for

for(var i = 0; i<elems.length; i++) { 
    elems[i].click(); 
} 

Answer 2

Tôi thấy cái này sạch sẽ và đơn giản.

Array.from(document.querySelectorAll("ali#credit")).forEach(button=>button.click()) 

từ trang web này: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/#comment-1602558