Краткий способ поиска элемента DOM и выполнения действий с ним, если и только если он найден? - PullRequest
Новая
       34

Краткий способ поиска элемента DOM и выполнения действий с ним, если и только если он найден?

0 голосов
/ 11 марта 2020

Я выполняю DOM-манипуляции, используя чистый JavaScript (нет jQuery), в котором мне нужно искать элемент, и, если он найден, выполнить действие с ним, например, щелкнув по нему.

Я не должен делать: 

document.querySelector('.target-class').click();

... потому что, если элемент не найден, я получу ошибку, т.е. Uncaught TypeError: Cannot read property 'click' of null

Вкл. с другой стороны, я мог бы сделать: 

var el = document.querySelector('.target-class');
if (el) {
    el.click();    
}

... но это создает переменную для одной цели и кажется расточительным.

С другой стороны, это позволяет избежать создания единого -purpose переменная, но кажется излишним: 

Array.prototype.forEach.call(document.querySelectorAll('.target-class'), function (element) {
    element.click();
});

Это дает преимущество в том, что .click() выполняется только для соответствующего элемента DOM, а не для NULL. (Это также единственный способ, с помощью которого я могу подумать о том, чтобы выполнить серию щелчков (или аналогичных операций) для ряда совпадающих элементов, а не только для одного элемента.)

Но, безусловно, есть более краткий способ поиска один элемент DOM по атрибуту и ​​щелкните () по нему (или аналогичной операции), если и только если он найден.

Есть идеи?

1 Ответ

1 голос
/ 11 марта 2020

document.querySelectorAll() возвращает NodeList , который может быть пустым и который имеет метод forEach:

Так что если вы wi sh в примените один и тот же обратный вызов к нескольким элементам, это все, что вам нужно (и полизаполнение для старых браузеров). 

onclick = (evt) => console.log( evt.target );

document.querySelectorAll('.target-class').forEach( (el) => el.click() );

document.querySelectorAll('.another-class').forEach( (el) => el.click() );
<div class="target-class">1</div>
<div class="target-class">2</div>
...