Как нажать на все блоки с данным классом на странице с помощью JS?

Question

[MaxBat]

На странице есть несколько блоков с классом "CLASSNAME". В консоли браузера выполняю следующий скрипт

var elems = document.getElementsByClassName('CLASSNAME');
for (let i =0; i<elems.length; i++){
    alert(i);
    elems[i].click();
}

Нажатие фиксируется только в первом элементе. Если писать по одному, например

var elems = document.getElementsByClassName('CLASSNAME');
elems[5].click();

То нажатие на 5 элементе фиксируется без проблем.

Answer 1

[Михаил Р.]

1. Получаем все элементы методом .querySelectorAll().
2. Перебираем п1. методом .forEach().
3. Печатаем элемент и его номер из п1. (для наглядности) + кликаем по элементу п2. методом .click().

document.querySelectorAll('.CLASSNAME').forEach((el, i) => {
    console.log(`Element №${i}, `, el);
    el.click();
});

Пример с ожидаем в 1 секунду, перед сбором и кликом по элементам:

setTimeout(() => {
    document.querySelectorAll('.CLASSNAME').forEach((el, i) => {
        console.log(`Клик по элементу №${i}, `, el);
        el.click();
    });
}, 1000);

Comments

[MaxBat]

Моя цель - лайкнуть все комментарии видео в тикток. Выполняя ваш скрипт, лайк ставиться только на первый комментарий.

[Михаил Р.]

MaxBat, нет, он кликает на все полученные элементы, которые присутствуют на момент их получения. Попробуйте использовать метод setTimeout(), чтобы запустить скрипт спустя время, чтобы метод querySelectorAll() мог получить все элементы.

[MaxBat]

Михаил Р., вы можете проверить сами на любом из видео. Возможно тик ток ограничивает скорость лайков или еще что-то

[Михаил Р.]

MaxBat,

Возможно тик ток ограничивает скорость лайков или еще что-то

Возможно все, но поставленная Вами задача "Как нажать на все блоки с данным классом на странице с помощью JS?" была решена.

[MaxBat]

Михаил Р., а как в ваш пример встроить setTimeout()?

[Михаил Р.]

MaxBat, обновил ответ. На момент клика по элементу - этот элемент должен существовать. Так же, зайдите в консоль браузера, чтобы посмотреть информацию, по каким элементам происходит клик (Chrome: F12 > Console). Либо, Вы можете самостоятельно вставить код в консоль браузера и выполнить его (нажав enter).

[MaxBat]

Михаил Р., по итогу скрипт ждет просто перед выполнением, предполагаю, что нужно чтобы ожидал он между каждым кликом

[Михаил Р.]

MaxBat, ссылку дайте на конкретную страницу, где Вы выполняете клики.

[MaxBat]

Михаил Р., https://www.tiktok.com/@vladikshawtyy/video/735630...

[MaxBat]

Михаил Р., на данной странице в консоли ввожу код

setTimeout(() => {
    document.querySelectorAll('.css-1tvtgfz-DivLikeIcon').forEach((el, i) => {
        console.log(`Клик по элементу №${i}, `, el);
        el.click();
    });
}, 1000);

[MaxBat]

Михаил Р.,
вот в таком формате открываю

[szQocks]

MaxBat,

const elems = Array.from(document.querySelectorAll('.css-1tvtgfz-DivLikeIcon'));

(async () => {
  for(const elem of elems){
    await new Promise((resolve) => setTimeout(resolve, 1000))
    elem.click()
  }
})();

[Михаил Р.]

szQocks, не, там проблема была в том, что тикток ставит паузу между лайками, видимо лайко-спамеров полно ;)

[szQocks]

MaxBat, Если не сработает над будет попробовать с setTimeout вначале и время между кликами увеличить

setTimeout(() => {
  (async () => {
  for(const elem of elems){
    await new Promise((resolve) => setTimeout(resolve, 1600))
    elem.click()
  }
})();
}, 3000)

[szQocks]

Михаил Р., я написал интервал между кликами в 1 сек, надеюсь поможет

[Михаил Р.]

szQocks, мало, даже 2 секунды лаго-тикток не успевает обтработать иногда ;)