Выбор всех классов в разных DOM

#javascript #class #dom #button

#javascript #класс #dom #кнопка

Вопрос:

Пожалуйста, скажите мне, проблема заключается в использовании JavaScript, найти все ссылки с class .button и выполнить действие над ними (вызов модального окна) Запрос selectorall не помогает, потому что классы, по-видимому, находятся в разных DOM. Что делать? Есть какие-то хаки или я что-то совсем недопонял?

Пример html:

 <header>
    <a href="" class="button"></a>
</header>
<main>
    <a href="" class="button"></a>
    <a href="" class="button"></a>
    <a href="" class="button"></a>
</main>
<footer>
    <a href="" class="button"></a>
</footer>
  

JS

 var link=document.querySelector(".button");
var popup = document.querySelector(".modal-window");
var close = document.querySelector(".close-form");

    link.addEventListener("click", function(event) {
    event.preventDefault();
    popup.classList.add("modal-window-see");
    }, false);

    close.addEventListener("click", function(event) {
    event.preventDefault();
    popup.classList.remove("modal-window-see");
    }, false);
  

Комментарии:

1. Честно говоря, я не уверен, о чем вы пытаетесь спросить; document.querySelectorAll('.button') следует найти все элементы с именем класса «button» (на веб-странице есть только один DOM (за исключением shadow-DOM и <iframe> элементов), поиск по которым будет осуществляться этим методом). Можете ли вы создать демонстрационную версию JS Fiddle или аналогичную, чтобы воспроизвести вашу проблему?

2. друг, который поможет мне и отправит готовый код jsfiddle.net/Hr5Cn/1

3. И как мы должны взаимодействовать с <a> элементами, у которых нет содержимого? Воспроизведите вашу проблему разумно и с некоторым учетом потребностей пользователя.