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

<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="{"target":"avatar"}"><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?

Дополнительно:

Ответы:

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

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

  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();

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

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

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

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

• Алексей Ярков, Там просто много 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="{"target":"avatar"}"><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="{"target":"avatar"}"><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="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="{"target":"avatar"}"><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="{"target":"avatar"}"><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,
  

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

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

• kirill0962, ничего не понятно, но очень интересно. Есть много элементов li, внутри каждого есть эта кнопка. Вам нужно кликнуть определенную или все в каждом li?
• Danny Arty, есть много li но у них разный id внутри и там же внутри есть class по которому нужно нажать
  если я возьму кликну так

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

  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">

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

• kirill0962,
  

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

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

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

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

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

• Алексей Ярков, понял а как тогда привязать id?
• kirill0962, вам уже написали как
• kirill0962, скажите честно, вы эту доку читали?
• Danny Arty, читал,

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

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

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

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

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();

• а если два элемента id как по обоим кликнуть? send-present-friend-593199183122 и такой send-present-friend-553199583626 остальное все одинаково.
• Например, очивидным образом - по очереди: снчала - на один, потом - на другой(подставьте id его карточки, и класс самого элемента, если он другой). Что не устраивает?
• MVV, это понятно, думал может по другому можно