Data title css: Get content from data-title attribute for CSS

Как можно использовать селекторы атрибутов CSS для просмотра веб-страниц?| Axiom Academy

Хотите извлечь данные с веб-страницы? Axiom упрощает задачу с помощью шага «Получить данные с веб-страницы». Наш инструмент выбора позволяет вам легко выбирать контент, который вы хотите очистить, указывая и щелкая.

Однако иногда инструмент выбора может не возвращать правильные результаты. Когда это произойдет, Axiom отобразит сообщение об ошибке, подобное этому:

Если вы столкнулись с этой проблемой, вы можете попробовать использовать другой выбор, но иногда проблема остается. В этом случае вам нужен пользовательский селектор! Один из самых полезных пользовательских селекторов, о котором нужно знать, — это селектор атрибутов .

В этом руководстве мы покажем вам, как найти селекторы атрибутов на веб-странице. Мы приведем несколько примеров, когда это может понадобиться, и научим вас использовать настраиваемые селекторы с Axiom.

Итак, если вы будете следовать этому руководству, вы будете на пути к тому, чтобы стать профессионалом в области парсинга веб-страниц. Если вы новичок в игре, мы начнем с учебника по селекторам CSS.

Что такое селектор CSS?

Селекторы CSS — это одна из двух частей правила CSS, которые предназначены для создания визуального стиля элементов HTML. Эти две части 9селектор 0017 , определяющий, к какому элементу применить стиль, и объявление , представляющее собой набор инструкций для указания внешнего вида элемента.

Здесь селектор CSS под названием «.xl-red-font» применяется к элементу html внутри класса.

Если бы мы хотели, чтобы этот текст заголовка отображался в виде гигантского красного шрифта, все правило было бы следующим :

Селектор CSS — это часть «.xl-red-font», которая появляется в HTML и указывает, какой элемент должен быть выбран — отсюда и его название. Объявление находится внутри фигурных скобок и устанавливает визуальный стиль. В этом случае , он большой и красный!

Что такое селектор атрибутов CSS?

Эти селекторы позволяют выбирать элементы на основе их атрибутов HTML. Как и в случае с CSS, HTML разбит на составные части. В этом случае мы можем представить HTML как состоящий из элементов и атрибутов . Элемент — это тип объекта HTML для отображения, например ссылка («a»), кнопка («button») или заголовок («h2», «h3» и т. д.). Атрибуты — все остальное.

В следующем примере HTML указывается элемент «вход» с рядом атрибутов — «класс», «автозаглавные буквы», «автозаполнение» и т. д. являются атрибутами HTML.

Чтобы создать селектор атрибутов, просто возьмите атрибут в том виде, в котором он отображается в HTML, и заключите его в квадратные скобки. Вот и все!

При выборе атрибута для выбора убедитесь, что вы выбрали тот, который однозначно определяет нужный элемент, иначе вы можете получить неправильный элемент. В приведенном выше примере атрибут «aria-labelledby» является уникальным селектором, который присутствует только в этом элементе.

Определение правильного атрибута может быть чем-то вроде искусства, но когда они содержат удобочитаемый текст (как указано выше), это намного проще.

Поскольку эти селекторы содержат удобочитаемый текст, они часто могут быть очень полезными! Например, Google Maps содержит почтовые индексы в качестве селекторов атрибутов в своем HTML, что позволяет очень удобно находить там местоположения.

Существуют ли другие типы селекторов CSS?

Существует множество других типов селекторов CSS, в том числе перечисленные ниже. Часто при создании селектора вы будете использовать один или несколько таких селекторов в сочетании с селектором атрибутов.

Селектор элементов CSS

Мы уже встречались с элементами, и селектор элементов позволяет вам выбрать все элементы, которые имеют общее имя тега.

Пример селекторов элементов HTML:

Чтобы указать селектор элемента, просто используйте имя тега элемента (без каких-либо атрибутов или угловых скобок).

Например, указанные выше элементы можно выбрать следующим образом:

Селектор id CSS

Атрибут id дает элементу HTML имя, которое можно использовать для ссылки на элемент из других частей документа или из внешних документов. . Имя должно быть уникальным в HTML-документе.

Вот пример HTML с указанным идентификатором:

Атрибут id имеет специальный удобный синтаксис. Вместо ввода [id=»page-title»] вместо этого можно использовать символ #, например:

Селектор класса CSS

Атрибут class помечает элемент HTML с повторно используемым именем, которое можно использовать для идентификации это и подобные элементы, как это. Обычно они не уникальны в пределах документа, а определяют набор связанных элементов.

Вот HTML-код с указанным классом:

Аналогично атрибуту id, вместо обычного синтаксиса [class=»page-title»] вы можете использовать точку:

Чтобы узнать больше об этой теме, вы можете проверить следующий ресурс:

https: //www.w3schools.com/css/css_selectors.asp (открывается в новом окне)

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors (открывается в новом окне)

http://web.simmons.edu/~grabiner/comm244/weekfour/selectors. html (opens new window)

Селекторы атрибутов можно комбинировать с другими селекторами CSS

Может быть очень удобно комбинировать селекторы атрибутов с другими типами селекторов. Это позволяет вам создавать более точные правила, нацеленные только на тот элемент, который вы хотите видеть на странице, без использования каких-либо других.

Кнопка пейджера LinkedIn

Вот HTML-код кнопки пейджера LinkedIn:

Мы могли бы извлечь следующий атрибут ‘aria-label=»Next»’, чтобы сделать этот селектор. Атрибут aria-label кажется удобочитаемым текстом, поэтому он выглядит как отличный выбор для идентификации кнопки «Далее».

Затем мы можем объединить это с другими селекторами, чтобы убедиться, что у нас есть именно тот элемент, который нам нужен. Вот несколько примеров этого в действии:

Группа Facebook

Ниже приведена внешняя оболочка div из статьи со страницы группы Facebook.

Мы могли бы использовать «role=»article»» для выбора элементов в статье. Селектор ниже извлечет имя автора. В этом примере мы объединили четыре селектора: элемент, атрибут и еще два элемента.

Здесь пробелы указывают на то, что элементы «a» и «strong» являются дочерними элементами элемента div с атрибутом role=»article». Это означает, что селектор будет искать элемент «a» внутри «сильного» элемента, внутри элемента «div» с атрибутом role=»article».

Как найти селекторы на веб-странице?

Google Chrome имеет встроенный инструмент для проверки веб-страницы, который упрощает эту задачу. Веб-разработчики любят хвастаться, делая это похоже на волшебство, но на самом деле этому довольно просто научиться! Вот короткое видео, которое показывает вам, как это работает.

💡 Чтобы найти что-либо на веб-странице, щелкните элемент правой кнопкой мыши и выберите «Проверить». Откроются инструменты разработчика. Затем используйте Ctrl+F или Command+F для поиска чего-либо в исходном коде страницы.

Узнайте больше об инструментах разработчика Chrome и веб-инспекторе (открывается в новом окне).

Как вы определяете свои собственные селекторы CSS?

Вот три метода создания настраиваемых селекторов. В конечном итоге вы захотите овладеть искусством сочетания этих методов.

1. Определите селектор, уникальный для нужного элемента.

Найдите селекторы, уникальные для этого элемента. Если у него есть уникальный атрибут, используйте его.

Например, если вы хотите нажать кнопку Tweet в моей ленте Twitter, вот HTML:

Мы будем использовать элемент div с селектором атрибутов.

Иногда веб-сайты удаляют уникальные селекторы, чтобы их было труднее парсить. Если это относится к вашему целевому сайту, вам нужно использовать более изощренные методы…

2. Найдите уникальный группирующий селектор

Весь HTML упорядочен в иерархическом порядке. Это означает, что вы часто можете найти нужный элемент, найдя родителя, то есть элемент, который обертывает и содержит желаемую цель.

Например, если вы хотите извлечь связанные тенденции из поиска Google Trends, вы увидите, что связанные тенденции сгруппированы в блоке HTML, определяющем виджет. Сначала вы найдете уникальный селектор для этого виджета:

. В этом случае вы можете использовать элемент «виджет» и следующий селектор атрибутов:

Затем, чтобы очистить темы, мы можем добавить селектор элемента «a», разделенный пробелом, чтобы найти элемент «a» в HTML виджета.

Тем не менее, бывает так, что сложно даже найти элемент группировки с уникальным селектором. Так что же нам делать тогда?

3. Ищите уникальное расположение вашего контента на странице

Веб-страницы состоят из различных элементов, каждый из которых содержится в других элементах. Одни элементы — родители, другие — дети; некоторые элементы могут быть обоими. Каждый элемент занимает ровно одну позицию в этой иерархии, и это можно однозначно указать с помощью селектора, а это означает, что если вы можете понять этот селектор, вы можете точно определить свою цель. Прямо в точку! 🎯

В этом примере мы хотим разработать пользовательский селектор, чтобы нажимать кнопку «Мне нравится» в первом посте Instagram в моей ленте. Вот html из этой статьи:

Первая статья и кнопка не имеют уникальных селекторов, но расположение этих элементов должно быть уникальным. Мы хотим нажать первую кнопку в первой статье.

Выше я использую позицию «статьи», добавляя «nth-child(1)», вы можете настроить таргетинг на любого дочернего элемента, изменив номер. Таким образом, nth-child(2) выберет вторую статью в своем родителе и так далее. Повторите трюк, чтобы найти и нажать правильную кнопку.

Недостаток: элементы могут менять свое относительное положение на странице при добавлении или удалении данных. Например, веб-сайты по недвижимости, как правило, имеют много меняющихся данных на постраничной основе. Это может заставить абсолютную точность ваших иерархических селекторов работать против вас!

Здесь вы можете узнать о детях. (открывается в новом окне)

С какими шагами Axiom можно использовать пользовательские селекторы?

Следующие шаги в Axiom включают наш инструмент селектора без кода и могут использоваться в сочетании с пользовательскими селекторами css:

• Данные соскоба с веб -страницы
• Ссылки на веб -странице
• Нажмите Элемент или Элементы щелчка
• Введите текст
• Выбрать список
• Download File/File
• . Шаги Аксиомы здесь.

  Как использовать настраиваемые селекторы с Axiom?

  Axiom предоставляет интерфейс без кода для добавления пользовательских селекторов.

  Нажмите кнопку «<> установить пользовательский селектор».

  Удалите любой код, который вы видите внутри коробки.

  Добавьте свой собственный селектор и сохраните.

  Обратите внимание, что «Получить данные с веб-страницы» может обрабатывать несколько селекторов, чтобы использовать более одного селектора, разделяйте их запятыми. Эти типы селекторов также будут возвращать только текстовые результаты.

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

  Настройка расширенных настраиваемых селекторов с помощью Axiom

  Если вы действительно заинтересованы в том, чтобы разобраться в деталях с помощью Axiom, вы можете отредактировать модель данных селектора вручную, чтобы настроить селекторы. Однако для этого требуется определенная степень знаний. Хорошей новостью является то, что мы работаем над интерфейсом без кода, который упрощает работу 😀

  Данные селектора указаны в формате JSON — стандартном формате, используемом для хранения данных в Интернете. Если вы знакомы с JSON, отлично! Если нет, вот краткая шпаргалка:

  Чтобы изменить селекторы, отредактируйте код, выделенный зеленым цветом

  Чтобы изменить тип результата, измените значение, выделенное розовым, на одно из следующих: «ссылка», «textContent» или «innerHTML»

  Добавьте новые селекторы, добавив ‘{«selector»:»»,»selections»:[],»selectedElements»:[{}],»rejectedElements»:[],»resultType»:»innerHTML»}’ и разделите их с помощью запятая.

  Имейте в виду, что любые синтаксические ошибки могут помешать работе селектора! Однако, если вы все-таки ошибетесь, вы всегда можете вернуться к инструменту выбора Axiom и повторно выбрать некоторые данные, что приведет к повторной генерации объекта, чтобы вы могли повторить попытку.

  Когда следует использовать селекторы атрибутов с Axiom?

  Если бот не может нажать кнопку «Далее» при очистке страницы со списком

  Допустим, вы создали бота для очистки всех данных с веб-страницы с помощью шага «Получить данные с веб-страницы». Вы настроили строки выбора и пейджера на шаге и видите зеленые галочки рядом с ними. Парсер должен получить все результаты, но когда вы запускаете бота, он не может перейти на следующую страницу.

  Вот как выглядит шаг при правильной настройке:

  Если вы запустили автоматизацию, а листинг не переходит на следующую страницу, попробуйте изменить выбор кнопки пейджера. Например, попробуйте выбрать его несколько раз или попробуйте каждый раз выделять его немного другим способом. Если это не сработает, пришло время пользовательского селектора! См. этот пример Linkedin:

  Мы извлекли бы следующий атрибут ‘aria-label=»Next»’, чтобы сделать этот селектор. Комбинируя селекторы элементов и атрибутов, мы можем получить один из следующих результатов:

  Любой из них должен работать, чтобы найти кнопку на каждой странице.

  Если бот ничего не делает при вводе текста в форму ввода

  Вы создали бота, который вводит данные в веб-форму. Бот открывает правильную страницу и выбирает правильный ввод формы, но текст не вводится.

  Давайте посмотрим, как настроен шаг ввода текста. Вы должны увидеть зеленую галочку в поле «Файл» и пример текста в поле «Текст». Вроде должно работать:

  Однако при запуске автоматики ничего не происходит — текст не вводится.

  Как всегда, самое простое решение — попробовать повторно выбрать поле ввода. Но если это не сработает, вы можете попробовать использовать пользовательский селектор.

  Например, если HTML-код вашего текстового поля выглядит так:

  Тогда хорошим решением будет следующий селектор атрибутов:

  Я создал бота для парсинга нескольких страниц недвижимости на таком веб-сайте, как Zillow. Это кажется достаточно простым: выберите контент и запишите его в Google Sheet. Для 90% вариантов использования, это ведь так просто!

  Однако веб-сайты недвижимости имеют различное содержание и макеты. Не весь контент присутствует на каждой странице. Этот тип проблемы может сломать любой веб-скребок, шифрующий возвращаемые результаты.

  Чтобы решить эту проблему, обратитесь к настраиваемым селекторам, чтобы они протянули вам руку помощи!

  Например, для извлечения списков Zillow, а не какого-либо спонсируемого контента, вы можете использовать этот селектор:

  Заключение

  При использовании правильных методов парсинг веб-страниц — это простой способ сбора важных данных. Если вам удобно использовать настраиваемые селекторы, не будет веб-страницы, из которой вы не сможете извлечь контент. Вы станете экспертом в мгновение ока. В частности, селекторы атрибутов часто уникальны и могут быть полезны, если вы хотите быстро создать настраиваемые селекторы.

  Удачи!

  ОБНОВЛЕНИЕ!!!

  В следующих двух выпусках мы представим инструмент без кода, который предоставит подсказки и поможет вам установить пользовательские селекторы. Следите за этим пространством!

  Почему вы должны использовать атрибуты данных в CSS

  21 октября 2019 г.

  Ваша первая мысль в связи с этим заголовком, вероятно, заключается в том, что вы думаете, что я говорю вам использовать атрибуты данных в качестве селекторов в вашем CSS, как это [data-attribute] { color: white } , но на самом деле я говорю об использовании значения атрибутов данных в качестве контента для вашего CSS. Вы можете сделать это, используя функцию attr() в CSS. Эта функция вернет значение любого атрибута данных, который затем можно будет использовать в CSS. Чтобы объяснить это дальше, давайте воспользуемся примером ниже.

  Представьте, что в вашем приложении есть кнопка уведомления, которая будет отображать количество непрочитанных сообщений в пузыре.

  Это довольно распространенная проблема, и ее можно решить, написав HTML-код, который выглядит следующим образом:

  и немного CSS, например:

  Это дало бы правильный результат, но это довольно громоздко, так как вокруг нашей кнопки есть оболочка и дополнительный диапазон для размещения счетчика значков.

  К счастью, с помощью функции attr() мы можем сделать это намного проще. Вместо каких-либо оберток наш HTML будет просто одной кнопкой.

  Вместо того, чтобы иметь весь дополнительный код для значка уведомления, мы просто используем атрибут данных, который содержит количество. Теперь в CSS мы можем использовать attr() функция, чтобы получить этот счет.

  Единственная реальная разница между предыдущим CSS и новым CSS заключается в том, что элемент кнопки действует как оболочка для счетчика, поэтому он позиционируется относительно. Затем элемент «до» кнопки используется в качестве диапазона значков из предыдущего примера, а количество значков задается с помощью свойства содержимого элемента «до». Если вы не знакомы со свойством содержимого, то, по сути, оно просто устанавливает для содержимого внутри элемента любой текст, на который вы установили свойство. В этом случае содержимое динамически изменяется с помощью атрибута данных HTML. Это удивительно, поскольку значительно упрощает HTML-код, но также облегчает динамическое изменение счетчика с помощью JavaScript, поскольку необходимо обновить только атрибут данных, а счетчик изменится автоматически.

  Теперь я уверен, что у вас в голове крутятся крутые штуки, которые вы можете делать с помощью функции

  attr() , например, динамически устанавливать размер элемента, например:

  К сожалению, это еще не поддерживается в CSS. В настоящее время только свойство содержимого может быть установлено с помощью функции attr() , но этот тип функциональности запланирован на будущее CSS. В будущем attr() сможет принимать тип, так что вместо того, чтобы возвращать строку, он действительно мог возвращать определенный тип единицы измерения, такой как эта атрибут (цвет фона данных) . Это предполагает, что атрибут data-background будет установлен, а затем будет преобразовано это значение в цвет. Это, конечно, только экспериментальная функция CSS, и ни один браузер пока не поддерживает ее. Если вы хотите узнать больше об экспериментальных вариантах использования, вы можете ознакомиться с документацией MDN.

  Из-за ограничений этой функции ее использование ограничено, но она по-прежнему хороша в таких случаях, как значок уведомления или простая подсказка.