Как кликнуть по ID элемнета?

Question

[kirill0962]

<li class="item it">
   <div data-view="sendPresentToFriendCard" data-friend-id="593199183122" id="send-present-friend-593199183122" class="async-gift-sending">
      <div class="content-card __aside-right friend-list-card __center-align">
         <div class="content-card_avatar">
            <div class="sz50 common-avatar __compact-ol" data-log-click="{&quot;target&quot;:&quot;avatar&quot;}"><a class="u-ava sz50 " href=""><img class="u-ava_img sz50 " src="" alt=""></a></div>
         </div>
         <div class="content-card_data">
            <div class="content-card_data_inner"><span class="icons-set  "><span class="ic-set_tx "><span class="emphased usr">Петя</span></span></span></div>
            <div class="content-card_data_text">
               <div class="content-card_data_text_wrapper "></div>
            </div>
         </div>
         <div class="content-card_aside __right">
            <div class="async-gift-sending_send-button friend-card_send-present-button"><span class="friend-card_send-present-button-text">Отправить</span></div>
            <div class="async-gift-sending_sent-text">Отправлено</div>
         </div>
      </div>
      <div class="async-gift-sending_process-line-w">
         <div class="async-gift-sending_process-line"></div>
      </div>
      <div data-func="send" class="async-gift-sending_send"></div>
      <div data-func="reject" class="async-gift-sending_rejection">
         <span class="async-gift-sending_rejection-button">Отменить</span>
         <div class="async-gift-sending_rejection-info"> отправляется...</div>
      </div>
   </div>
</li>

Вот код, как найти элемент id этот send-present-friend-593199183122 и кликнуть по class элемену async-gift-sending_send-button friend-card_send-present-button?

Answer 1

[Алексей Ярков]

Найти используя CSS селекторы и document.querySelector.
Кликнуть вызвав метод click на нужном элементе.

Comments

[kirill0962]

По клику я разобрался

document.querySelector('[class="async-gift-sending_send-button friend-card_send-present-button"]').click();

а вот как найти id не понимаю

[Алексей Ярков]

kirill0962,

а вот как найти не понимаю

А как пробовали?

Кстати для поиска по имени класса лучше использовать такое выражение:

document.querySelector('.async-gift-sending_send-button.friend-card_send-present-button').click();

[Danny Arty]

kirill0962, вы бы хоть доку открыли

[Danny Arty]

kirill0962, судя по вашему коду, у вас элемент с классом friend-card_send-present-button является дочерним для элемента с классом async-gift-sending_send-button, хотя на деле это два класса одного элемента. Поэтому будет так:

document.querySelector('.async-gift-sending_send-button.friend-card_send-present-button').click();

[kirill0962]

Алексей Ярков, Там просто много li и отправка у все класс одинаковый, только id разный

примет

<li class="item it">
   <div data-view="sendPresentToFriendCard" data-friend-id="658899183102" id="send-present-friend-658899183102" class="async-gift-sending">
      <div class="content-card __aside-right friend-list-card __center-align">
         <div class="content-card_avatar">
            <div class="sz50 common-avatar __compact-ol" data-log-click="{&quot;target&quot;:&quot;avatar&quot;}"><a class="u-ava sz50 " href=""><img class="u-ava_img sz50 " src="" alt=""></a></div>
         </div>
         <div class="content-card_data">
            <div class="content-card_data_inner"><span class="icons-set  "><span class="ic-set_tx "><span class="emphased usr">Петя</span></span></span></div>
            <div class="content-card_data_text">
               <div class="content-card_data_text_wrapper "></div>
            </div>
         </div>
         <div class="content-card_aside __right">
            <div class="async-gift-sending_send-button friend-card_send-present-button"><span class="friend-card_send-present-button-text">Отправить</span></div>
            <div class="async-gift-sending_sent-text">Отправлено</div>
         </div>
      </div>
      <div class="async-gift-sending_process-line-w">
         <div class="async-gift-sending_process-line"></div>
      </div>
      <div data-func="send" class="async-gift-sending_send"></div>
      <div data-func="reject" class="async-gift-sending_rejection">
         <span class="async-gift-sending_rejection-button">Отменить</span>
         <div class="async-gift-sending_rejection-info"> отправляется...</div>
      </div>
   </div>
</li>
<li class="item it">
   <div data-view="sendPresentToFriendCard" data-friend-id="593199183122" id="send-present-friend-593199183122" class="async-gift-sending">
      <div class="content-card __aside-right friend-list-card __center-align">
         <div class="content-card_avatar">
            <div class="sz50 common-avatar __compact-ol" data-log-click="{&quot;target&quot;:&quot;avatar&quot;}"><a class="u-ava sz50 " href=""><img class="u-ava_img sz50 " src="" alt=""></a></div>
         </div>
         <div class="content-card_data">
            <div class="content-card_data_inner"><span class="icons-set  "><span class="ic-set_tx "><span class="emphased usr">Петя</span></span></span></div>
            <div class="content-card_data_text">
               <div class="content-card_data_text_wrapper "></div>
            </div>
         </div>
         <div class="content-card_aside __right">
            <div class="async-gift-sending_send-button friend-card_send-present-button"><span class="friend-card_send-present-button-text">Отправить</span></div>
            <div class="async-gift-sending_sent-text">Отправлено</div>
         </div>
      </div>
      <div class="async-gift-sending_process-line-w">
         <div class="async-gift-sending_process-line"></div>
      </div>
      <div data-func="send" class="async-gift-sending_send"></div>
      <div data-func="reject" class="async-gift-sending_rejection">
         <span class="async-gift-sending_rejection-button">Отменить</span>
         <div class="async-gift-sending_rejection-info"> отправляется...</div>
      </div>
   </div>
</li>

пытался так https://stepik.org/lesson/267176/step/2 но не получается, надо найти конкретный id и потом нажать на class его

[Алексей Ярков]

kirill0962,

пытался так, но не получается

Ну читайте и пробуйте ещё раз. Там всё подробно описано.

[Danny Arty]

kirill0962, ничего не понятно, но очень интересно. Есть много элементов li, внутри каждого есть эта кнопка. Вам нужно кликнуть определенную или все в каждом li?

[kirill0962]

Danny Arty, есть много li но у них разный id внутри и там же внутри есть class по которому нужно нажать
если я возьму кликну так

document.querySelector('.async-gift-sending_send-button.friend-card_send-present-button').click();

то клинке по все классам, их там больше 100 а мне надо по конкретному id

или как кликнуть по li с id

<li class="item it">
   <div data-view="sendPresentToFriendCard" data-friend-id="658899183102" id="send-present-friend-658899183102" class="async-gift-sending">

[Алексей Ярков]

kirill0962,

то клинке по все классам, их там больше 100

Не льстите себе )) Вы так кликнете по первому из найденных. По всем только через цикл.

[Danny Arty]

kirill0962,
Советую нормально читать доки, там все написано, и вам не придется тратить время на ожидание ответа тут. А с вашим кодом так вы кликните по первому элементу, а не по всем.

document.querySelector('#send-present-friend-593199183122 .async-gift-sending_send-button.friend-card_send-present-button').click();

[kirill0962]

Алексей Ярков, понял а как тогда привязать id?

[Алексей Ярков]

kirill0962, вам уже написали как

[Danny Arty]

kirill0962, скажите честно, вы эту доку читали?

[kirill0962]

Danny Arty, читал,

document.querySelector('#send-present-friend-593199183122 .async-gift-sending_send-button.friend-card_send-present-button').click();

так не работает

[Danny Arty]

kirill0962, Значит нет элемента подходящего под условия, может классы другие или id. Раз вы читали и поняли как использовать вложенный селектор, то думаю сможете написать одну строку, видя HTML-разметку

[kirill0962]

Danny Arty, Да ок заработало

Answer 2

[MVV]

1. Элемент с нужным id ищется через document.getElementById(id)
2. Затем внутри этого элемента ищите элемент с нужным классом (через querySelector, к примеру, есть и другие варианты) и кликаете на него.
Короче, если безо всяких проверок, как-то так:

document.getElementById('send-present-friend-593199183122')
   .querySelector('.async-gift-sending_send-button.friend-card_send-present-button')
   .click();

Comments

[kirill0962]

а если два элемента id как по обоим кликнуть? send-present-friend-593199183122 и такой send-present-friend-553199583626 остальное все одинаково.

[MVV]

Например, очивидным образом - по очереди: снчала - на один, потом - на другой(подставьте id его карточки, и класс самого элемента, если он другой). Что не устраивает?

[kirill0962]

MVV, это понятно, думал может по другому можно