Приветствие: выберите псевдоэлемент

#javascript #html #jquery #cheerio

Вопрос:

У меня есть следующий HTML:

 <div class="media-body">

  <div class="avatar-photo pseudo-a" tabindex="0" data-href="https://" style="background-image: url(https://6fqap94ibfgqil3r47o1.jpeg);"></div>
  <div class="media-user-reviews">
    <div class="rating-stars rating-4"><i class="fas"></i><i class="fas"></i><i class="fas"></i><i class="fas"></i><i class="far"></i></div>                        <span class="rating-mini-count">76</span>
  </div>
</div>
 

И div .media-user-name имеет псевдо-элемент, подобный этому:

носитель-имя пользователя

Дело в том, что несколько лет назад я использовал библиотеку Xray для анализа элементов, и я убрал этот элемент с «status:» @data-online». Но что касается сейчас, я бы хотел заменить его на «Ура». и когда я пытаюсь:

     const page = cheerio.load(response.data);
    const test = page.html('body');
    // I tried even 'div.avatar-photo.pseudo-a::active'
    const status = page(node).find('div.avatar-photo.pseudo-a');

 

Кроме того, я пытался использовать .css('background') или что-либо еще, чтобы реагировать на элемент (на самом деле мне не нужен background сам элемент, но это тоже вариант.

Итак, мой вопрос в том, как добраться div.avatar-photo.pseudo-a::active (элемент на скриншоте)?

Потому что чиро выдает мне ошибку, то есть не поддерживает ее.

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

1. я чувствую, что, поскольку псевдоэлементы не являются частью DOM, они недоступны для JS, поэтому, возможно, это приводит к ошибке. даже мне интересно узнать больше

2. @boxdox забавно то, что устаревший Xray() на самом деле захватывает это @data-online или что-то в этом роде. Но я нигде не видел в HTML-коде этого data-online узла/селектора/свойства/или чего-либо еще.

3. Я думаю, что вы можете получить доступ по атрибутам , использовать input[type="password"] , так что это может сработать, просто псевдоэлементы отсутствуют в DOM, но атрибуты присутствуют в элементах

4. @boxdox Да, большое вам спасибо. Я нашел его, теперь я видел его в родительском HTML-элементе. Не могли бы вы, пожалуйста, сделать это сообщение в качестве ответа, чтобы я мог его принять?

Ответ №1:

Вы можете получить доступ к атрибутам в элементах DOM, используя querySelector следующее:

Все вводимые пароли: input[type="password"]

Все div, содержащие data-name тег (просто пример, может быть что угодно): div[data-name]

Подробнее об этом читайте здесь:

Селектор запросов

сложный пример [MDN]