From 7221481616f28017a599bcc9938619b6cecf7540 Mon Sep 17 00:00:00 2001 From: Nika Filimonova <104901814+nicha3381@users.noreply.github.com> Date: Tue, 19 Jul 2022 12:47:17 +0500 Subject: [PATCH 1/2] edit-finished --- _i18n/ru/_posts/2022-07-15-xpath.md | 157 +++++++++++++++------------- 1 file changed, 83 insertions(+), 74 deletions(-) diff --git a/_i18n/ru/_posts/2022-07-15-xpath.md b/_i18n/ru/_posts/2022-07-15-xpath.md index 5670d4829..46f216f8c 100644 --- a/_i18n/ru/_posts/2022-07-15-xpath.md +++ b/_i18n/ru/_posts/2022-07-15-xpath.md @@ -5,11 +5,11 @@ author: Никита Михайлов hidden: true --- -Язык разметки XML с самого первого стандарта окружает пользователей компьютеров: таблицы в Excel, выгрузки из интернет-магазинов, RSS для получения коротких новостей и так далее основаны на XML. Хоть визуальное отображение отличается на устройствах и в программах, но в основе лежит единый формат. +Язык разметки XML с самого первого стандарта окружает пользователей компьютеров. Таблицы в Excel, выгрузки из интернет-магазинов, RSS-ленты с новостями — все это основано на XML. Хоть визуальное отображение отличается на устройствах и в программах, но в основе всегда лежит единый формат. -При таком количестве информации, которая может находиться в XML встаёт вопрос о перемещении и выборке внутри документа. Как это сделать быстро? Какие средства применять, чтобы из тысячи товаров интернет магазина найти только те, которые отвечают нашим требованиям? Для решения задач навигации и поиска внутри XML используется язык запросов XPath. +Внутри XML-файла может находиться огромное количество информации, поэтому и встает вопрос о перемещении и выборке внутри документа. Как это сделать быстро? Какие средства применять, чтобы в интернет-магазине найти нужный товар из десятков тысяч других? Для навигации и поиска внутри XML используется **язык запросов XPath**. -В этой статье разберём: +В этой статье разберем: * для кого может быть полезен _XPath_ * базовые конструкции языка для поиска информации в XML @@ -17,23 +17,23 @@ hidden: true ## Синтаксис XPath -Перед тем, как приступить к написанию запросов, стоит создать базовый пример XML, по которому и будет производиться поиск. Таким XML будет некоторый список курсов по вёрстке на Хекслете: +Для начала создадим базовый пример XML, с которым и будем работать весь урок. Например, список курсов по верстке на Хекслете в XML будет выглядеть так: ```xml -  Курсы HTML и CSS (вёрстка) -  На курсах по вёрстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap. +  Курсы HTML и CSS (верстка) +  На курсах по верстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap.   -    Основы современной вёрстки -    HTML5, CSS, DevTools, вёрстка +    Основы современной верстки +    HTML5, CSS, DevTools, верстка     9 часов     https://ru.hexlet.io/courses/layout-designer-basics     https://hexlet.io/courses/layout-designer-basics     -    Основы вёрстки контента -    CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Вёрстка +    Основы верстки контента +    CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка     18 часов     https://ru.hexlet.io/courses/css-content     https://hexlet.io/courses/css-content @@ -48,31 +48,31 @@ hidden: true ``` -Это учебный пример. Для отработки навыков XPath подойдёт любой XML, а структура может сильно отличаться. Принципы XPath сохраняться, так как стандарт XML позволяет использовать элементы с произвольными тегами. +Это учебный пример, но для отработки навыков XPath подойдет и любой другой XML. Принципы XPath сохранятся при любой структуре файла, потому что по стандарту XML можно использовать элементы с произвольными тегами. -Для тестирования результата подойдут онлайн-сервисы, такие, как: +Для тестирования результата подойдут такие онлайн-сервисы, как: * [Code Beautify](https://codebeautify.org/Xpath-Tester) * [XPather](http://xpather.com/) ### Абсолютные пути -Самый простой запрос состоит из обращения к корневому элементу. Для этого достаточно выполнить запрос `/courses`. Нам вернётся XML в том виде, как он представлен в примере выше, кроме строки ``, так как элемент не внутри ``: +Самый простой запрос состоит из обращения к корневому элементу. Для этого достаточно выполнить запрос `/courses`. Нам вернется XML в почти таком же виде, что и в примере выше. Обратите внимание на строку ``. Она отличается, потому что элемент не внутри ``: ```xml -  Курсы HTML и CSS (вёрстка) -  На курсах по вёрстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap. +  Курсы HTML и CSS (верстка) +  На курсах по верстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap.   -    Основы современной вёрстки -    HTML5, CSS, DevTools, вёрстка +    Основы современной верстки +    HTML5, CSS, DevTools, верстка     9 часов     https://ru.hexlet.io/courses/layout-designer-basics     https://hexlet.io/courses/layout-designer-basics     -    Основы вёрстки контента -    CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Вёрстка +    Основы верстки контента +    CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка     18 часов     https://ru.hexlet.io/courses/css-content     https://hexlet.io/courses/css-content @@ -92,18 +92,16 @@ hidden: true Продолжим цепочку и обратимся к описанию из элемента ``. Для этого добавим в запрос путь к `description`: `/courses/description`. Результатом выполнения станет: ```xml -На курсах по вёрстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap. +На курсах по верстке вы познакомитесь с основами HTML и CSS, научитесь верстать адаптивные страницы, работать с препроцессорами. Освоите современные технологии и инструменты, включая Flex, Sass, Bootstrap. ``` -Путь, который строится от корневого элемента, называется _абсолютным_. Используя схему из прошлого запроса можно обратиться к любому элементу внутри XML. +Путь, который строится от корневого элемента, называется **абсолютным**. Используем схему из прошлого запроса и обратимся к любому элементу внутри XML. -А что если обратиться к имени курса? Какое именно поле `` будет возвращено? Ответ: в этом случае вернутся `` из всех курсов. - -Запрос `/courses/course/name` вернёт: +Попробуем обратиться к имени курса. В этом случае вернется поле `` из всех курсов. Запрос `/courses/course/name` вернет: ```xml -Основы современной вёрстки -Основы вёрстки контента +Основы современной верстки +Основы верстки контента Bootstrap 5: Основы верстки ``` @@ -112,35 +110,35 @@ hidden: true | Запрос          | Результат                                                                                | |-----------------|------------------------------------------------------------------------------------------| | `/courses/course` | Все данные из всех элементов ``                                         | -| `/courses/course/name` | `Основы современной вёрстки`
`Основы вёрстки контента`
`Bootstrap 5: Основы верстки` | +| `/courses/course/name` | `Основы современной верстки`
`Основы верстки контента`
`Bootstrap 5: Основы верстки` | | `/courses/course/duration` | `9 часов`
`18 часов`
`10 часов` | ### Относительные пути -Прошлые запросы строились с помощью _абсолютных путей_, то есть нужно было чётко указать полный путь до информации. Бывают ситуации, когда полный путь неизвестен в силу некоторых причин или необходимо получить уникальное поле и мы точно об этом знаем. В этом случае возможно использовать _относительный путь_, который произведёт поиск по всему XML и вернёт узлы, подходящие под запрос. +Прошлые запросы строились с помощью абсолютных путей — то есть мы указывали полный путь до информации. Бывают ситуации, когда полный путь не подходит: например, мы хотим обраться к какому-то уникальному полю или не знаем полный путь. В этом случае можно использовать **относительный путь** — он произведет поиск по всему XML и вернет узлы, подходящие под запрос. -Для составления относительного пути используется конструкция `//` после которой можно написать любое поле и получить результат. Например, `//name` вернёт поля `` из XML: +Чтобы записать относительный путь, нужно использовать конструкцию `//`. После нее можно написать любое поле и получить результат. Например, `//name` вернет поля `` из всего XML: ```xml -Основы современной вёрстки -Основы вёрстки контента +Основы современной верстки +Основы верстки контента Bootstrap 5: Основы верстки ``` -Проблема такого подхода — уникальность полей. В документах одни и те же имена полей могут обозначать разные данные в зависимости от расположения, поэтому используйте относительные пути там, где уверены в возвращаемых данных. Например, в нашем примере название курса может быть заключено в ``: +Проблема такого подхода — уникальность полей. В документах одни и те же имена полей могут обозначать разные данные в зависимости от расположения. Поэтому используйте относительные пути только там, где уверены в возвращаемых данных. Например, в нашем примере название курса может быть заключено в `<title>`: ```xml <courses> -  <title>Курсы HTML и CSS (вёрстка) +  Курсы HTML и CSS (верстка)          -    Основы современной вёрстки +    Основы современной верстки              -    Основы вёрстки контента +    Основы верстки контента            @@ -152,44 +150,44 @@ hidden: true ``` -Запрос `//title` вернёт не только имена курсов, но и узел, который находится в ``: +Запрос `//title` вернет не только имена курсов, но и узел, который находится в ``: ```xml -Курсы HTML и CSS (вёрстка) -Основы современной вёрстки -Основы вёрстки контента +Курсы HTML и CSS (верстка) +Основы современной верстки +Основы верстки контента Bootstrap 5: Основы верстки ``` -Через относительные пути разработчики, иногда, экономят пару секунд на опускание корневого элемента. То есть, вместо `/courses/course/name` пишут `//course/name`. Попробуйте прошлые примеры перевести на относительные пути с помощью такого механизма +Чтобы сэкономить пару секунд, разработчики опускают корневой элемент и пользуются относительными путями. Например, вместо `/courses/course/name` они пишут `//course/name`. Для практики попробуйте прошлые примеры перевести на относительные пути с помощью такого механизма. Несколько примеров запросов с идентичными ответами, как и в прошлой таблице: | Запрос              | Результат                                                    | | ------------------- | ------------------------------------------------------------ | | `//course`          | Все данные из всех элементов ``             | -| `//name`            | `Основы современной вёрстки`
`Основы вёрстки контента`
`Bootstrap 5: Основы верстки` | +| `//name`            | `Основы современной верстки`
`Основы верстки контента`
`Bootstrap 5: Основы верстки` | | `//course/duration` | `9 часов`
`18 часов`
`10 часов` | ### Предикаты -В примерах запросов к именам возвращались имена всех курсов которые были найдены, что, в некоторых ситуациях, может быть избыточно. Что делать, если хочется получить данные только по первому курсу в ``? На помощь приходят предикаты — конструкции, с помощью которых можно отфильтровать элементы по заданным условиям.  +В примерах запросов к именам возвращались имена всех найденных курсов. В некоторых ситуациях это может быть избыточно. Что делать, если хочется получить данные только по первому курсу в ``? На помощь приходят **предикаты** — конструкции, с помощью которых можно отфильтровать элементы по заданным условиям.  -Выберем ключевые слова первого курса по вёрстке. Для этого достаточно использовать запрос `//course[1]/tags`: +Выберем ключевые слова первого курса по верстке. Для этого достаточно использовать запрос `//course[1]/tags`: ```xml -HTML5, CSS, DevTools, вёрстка +HTML5, CSS, DevTools, верстка ``` -`[1]` — это предикат с условием: «Взять элемент по индексу 1». Попробуйте сделать запрос ко второму или третьему элементу. Достаточно поменять только одну цифру!  +Обратите внимание на`[1]`. Это предикат с таким условием: «Взять элемент по индексу 1». Попробуйте сделать запрос ко второму или третьему элементу. Достаточно поменять всего одну цифру!  --- -Интересно, что в отличие от принятых стандартов программирования, в _XPath_ индексы элементов начинаются с единицы, а не с нуля. Если вы уже программируете, то это может немного запутать +В _XPath_ индексы элементов начинаются с единицы, а не с нуля, как в принятых стандартах программирования. Если вы уже программируете, это может немного запутать. --- -Предикаты помогают делать точные выборки. Например, получить ссылки на русскоязычные страницы курсов. Для этого нужно получить элементы `` у которых атрибут `lang` равен `ru`. Делается это указанием атрибута и значения, а чтобы _XPath_ отличил атрибут от элемента перед атрибутом указывается символ `@`.  +Предикаты помогают делать точные выборки. Например, получить ссылки на русскоязычные страницы курсов. Для этого нужно получить элементы ``, у которых атрибут `lang` равен `ru`. Делается это указанием атрибута и значения. Чтобы _XPath_ отличил атрибут от элемента перед атрибутом указывается символ `@`.  Теперь запрос будет выглядеть так: `//course/url[@lang="ru"]` @@ -199,7 +197,7 @@ hidden: true https://ru.hexlet.io/courses/bootstrap_basic ``` -Бывает полезно выбрать элементы, которые имеют хоть какой-то атрибут. Для этого можно использовать конструкцию `//*[@*]`: +Иногда полезно выбрать элементы, которые имеют хоть какой-то атрибут. Для этого можно использовать конструкцию `//*[@*]`: ```xml 9 часов @@ -213,9 +211,9 @@ hidden: true https://hexlet.io/courses/bootstrap_basic ``` -Как можно понять, знак `*` обозначает «все/любой». +По примеру выше видно, знак `*` обозначает «все/любой». -Когда выбраны элементы по атрибутам, то можно произвести дополнительную фильтрацию по этим значениям. Например, найдём элементы `` со значением атрибута `value` больше `9`. Что нужно узнать из нового — внутри предикатов используются знакомые, по языкам программирования, операторы сравнения: +Когда выбраны элементы по атрибутам, можно произвести дополнительную фильтрацию по этим значениям. Например, найдем элементы `` со значением атрибута `value` больше `9`. Внутри предикатов используются **операторы сравнения**, знакомые по языкам программирования: * `>` — больше * `<` — меньше @@ -231,14 +229,17 @@ hidden: true 10 часов ``` -Это, конечно, всё интересно, но мало кому нужно выбирать только одно поле. Скорее всего нам нужны данные по всему курсу или другому его полю. Как одновременно использовать предикат и обращаться к другим полям? В этом нет ничего сложного! Предикат необязательно должен идти в конце запроса, он может находиться в любой его части, а внутри него может быть не только выборка по атрибуту или индексу, а новые пути по которым нужно сделать проверку. +Мы разобрались, как выбирать одно поле — это интересная, но редкая задача. Чаще разработчики обрабатывают данные по всему файлу или нескольким полям. Попробуем одновременно использовать предикат и обратиться к другим полям. Обратите внимание на два момента: + +* Предикат необязательно должен идти в конце запроса +* Внутри предиката могут находиться новые пути, которые нужно проверить -Звучит сложно, но на деле всё очень просто. Мы уже знаем как, с помощью предиката, отфильтровать данные по полю ``. Это делалось с помощью конструкции `duration[@value > 9]`. А если эта конструкция будет предикатом для ``? Именно это и нужно сделать, чтобы получить данные о курсах, у которых длительность больше 9 часов: `//course[duration[@value > 9]]` +Мы уже знаем, как с помощью предиката отфильтровать данные по полю ``. Эту задачу мы выполняли с помощью конструкции `duration[@value > 9]`. А теперь попробуем сделать эту конструкцию предикатом для ``. Так мы получим данные о курсах с длительностью больше 9 часов: `//course[duration[@value > 9]]`: ```xml -  Основы вёрстки контента -  CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Вёрстка +  Основы верстки контента +  CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка   18 часов   https://ru.hexlet.io/courses/css-content   https://hexlet.io/courses/css-content @@ -252,35 +253,36 @@ hidden: true ``` -Можно продолжить этот запрос и получить только имена курсов. В таком случае предикат будет уже в середине запроса, а не в его конце. `//course[duration[@value > 9]]/name`: +Можно продолжить этот запрос и получить только имена курсов. Тогда предикат будет в середине запроса, а не в его конце: `//course[duration[@value > 9]]/name ```xml -Основы вёрстки контента +Основы верстки контента Bootstrap 5: Основы верстки ``` ### Функции -В прошлых примерах запросы затрагивали теги и атрибуты, но не сами данные, а ведь это огромный пласт информации по которой можно делать выборки. Для решения этой задачи используются встроенные в _XPath_ функции. Они являются частью предикатов, как, например `@`. Попробуем найти курс с названием «Основы вёрстки контента».  +В прошлых примерах запросы затрагивали теги и атрибуты. Сами данные мы не затрагивали, хотя это огромный пласт информации, по которой можно делать выборки. Для решения этой задачи используются встроенные в _XPath_ функции. Они являются частью предикатов — например, `@`. Попробуем найти курс с названием «Основы верстки контента». -Для поиска по тексту внутри элемента используется функция `text()`. Её задача — получить текстовое значение элемента и, при необходимости, сравнить с условием. Вот как будет выглядеть запрос для поиска курса с нужным именем: `//course[name[text()="Основы вёрстки контента"]]` + +Для поиска по тексту внутри элемента используется функция `text()`. Ее задача — получить текстовое значение элемента и сравнить его с условием по необходимости. Вот как будет выглядеть запрос для поиска курса с нужным именем: `//course[name[text()="Основы верстки контента"]]` ```xml -  Основы вёрстки контента -  CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Вёрстка +  Основы верстки контента +  CSS3, HTML5, Селекторы, Доступность, CSS Columns, CSS Units, Верстка   18 часов   https://ru.hexlet.io/courses/css:content   https://hexlet.io/courses/css:content ``` -Но что если нам известно только часть названия? Для этого существует функция `contains()` которая принимает два аргумента: +Но что, если нам известно только часть названия? Для этого существует функция `contains()`, которая принимает два аргумента: 1. Строка, где будет производиться поиск 2. Подстрока, которая будет искаться -Например, найдём курс, у которого в ключевых словах есть слово «Bootstrap». Функция примет текстовое значение элемента `tags` и найдёт там слово «Bootstrap»: `//course[tags[contains(text(), "Bootstrap")]]` +Для примера найдем курс, у которого в ключевых словах есть слово «Bootstrap». Функция примет текстовое значение элемента `tags` и найдет там слово «Bootstrap»: `//course[tags[contains(text(), "Bootstrap")]]` ```xml @@ -292,37 +294,44 @@ hidden: true ``` -В стандарте _XPath_ существует ещё несколько функций, но цель статьи не дать исчерпывающую документацию по языку, а показать принципы работы тех или иных механизмов +В стандарте _XPath_ существует еще несколько функций, но цель статьи — показать принципы работы тех или иных механизмов, а не дать исчерпывающую документацию по всему языку. ## Отличия от CSS-селекторов -Если вы писали на JavaScript, то знаете, что можно искать элементы с помощью CSS-селекторов используя методы `querySelector()` или `querySelectorAll()`. Почему же разработчики, иногда, прибегают к помощи _XPath_ для поиска элементов внутри HTML? Всё дело в концепции поиска элементов: используя CSS возможно идти только в глубину без возможности обратиться к родительским элементам; _XPath_ позволяет в любой момент обращаться как к дочерним, так и к родительским элементам.  +Если вы писали на JavaScript, то знаете, что элементы можно искать с помощью CSS-селекторов, используя методы `querySelector()` или `querySelectorAll()`. Почему же разработчики иногда ищут элементы внутри HTML именно с помощью_XPath_? + +Дело в концепции поиска элементов. Используя CSS, можно идти только в глубину без возможности обратиться к родительским элементам. В отличие от CSS, _XPath_ позволяет в любой момент обращаться и к дочерним, и к родительским элементам. --- -Если вы хотите узнать, как осуществлять поиск по HTML с помощью XPath, то рекомендуем обратиться к статье [Introduction to using XPath in JavaScript](https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript) +Если вы хотите подробнее изучить поиск по HTML с помощью XPath, рекомендуем обратиться к статье [Introduction to using XPath in JavaScript](https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript) --- -С помощью CSS нельзя найти все элементы `div` внутри которых есть ссылки. Мы можем найти сами ссылки, но не их родителей. XPath позволяет это сделать простым сочетанием `div[a]` . Постепенно это изменяется и в CSS появился селектор `:has()`, но его поддержка ещё не реализована всеми новыми версиями браузеров. Со временем это изменится, но, пока, реальность именно такая. +С помощью CSS нельзя найти все элементы `div`, внутри которых есть ссылки — можно найти сами ссылки, но не их родителей. XPath позволяет это сделать простым сочетанием `div[a]`. Постепенно ситуация меняется: в CSS появился селектор `:has()`, но он поддерживается еще не всеми новыми версиями браузеров. Со временем это изменится, но, пока реальность именно такая. + Другой пример — поиск элементов по тексту внутри них. С этой задачей CSS никогда не справится, так как такой задачи у него нет. XPath, как мы изучили, умеет это делать с помощью функции `text()` ## Кому нужен Xpath -Ответ на этот вопрос лежит на поверхности: «Всем, кто работает с XML». С одной стороны это максимальный короткий ответ, а с другой он не вызывает понимания. Вот лишь несколько примеров, кому будет полезен *_XPath_*: +Если коротко, Xpath нужен всем, кто работает с XML. + +Чтобы разобраться подробнее, изучим несколько примеров: + +**SEO-специалисты**. Специалисты по продвижению часто обрабатывают большие массивы данных и вытаскивают информацию со страниц сайта. -**SEO-специалисты**. В своей работе специалистам по продвижению необходимо обрабатывать большие массивы данных и «вытаскивать» информацию со страниц сайта. Например, для них критичны мета-теги — дополнительная информация, в которой содержатся иконки сайтов, название страницы, описание и так далее. Используя специализированный софт они могут составлять запросы в *_XPath_* для автоматического парсинга этих данных +Например, для них критичны **мета-теги** — дополнительная информация, в которой содержатся иконки сайтов, название страницы, описание и так далее. Эту информацию SEO-специалист может автоматически парсить с помощью запросов в *_XPath_*. -**Тестировщики**. При тестировании Frontend тестировщикам часто нужно проверить тот или иной вывод информации на странице. Для этого, внутри теста, выбирается элемент с нужной страницы и производится тестирование. Но как выбрать элемент на странице? На самом деле есть несколько основных способов и один из них — использование _XPath_. Так же _XPath_ можно использовать и внутри привычных всем инструментов разработчика, например DevTools который встроен в браузеры на основе движка _Chromium_  +**Тестировщики**. При работе с Front-end тестировщики часто проверяют тот или иной вывод информации на странице — для этого они выбирают отдельные элементы с нужной страницы. Это можно делать через _XPath_ и DevTools, встроенный в браузеры на основе _Chromium_. -**Разработчики**. В разработке есть популярный класс программ, которые называются _парсеры_ — это скрипты, задача которых найти нужную информацию на страницах одного или нескольких сайтов. Например, мы хотим сравнить стоимость одного и того же товара в разных магазинах. Для такой задачи можно написать скрипт, который пройдётся по всем нужным сайтам, сравнит цены и вернёт данные. А вот найти информацию на странице можно с помощью _XPath_ +**Разработчики**. Они часто используют **парсеры** — это скрипты, которые ищут нужную информацию на страницах одного или нескольких сайтов. Например, мы хотим сравнить стоимость одного и того же товара в разных магазинах. Для такой задачи можно написать скрипт, который пройдется по всем нужным сайтам, сравнит цены и вернет данные. В этом случае для поиска информацию на странице можно использовать _XPath_. -Это лишь часть сценариев, где может пригодиться язык _XPath_, а реальность такова, что есть ещё десятки сценариев использования запросов с помощью этого языка +Это лишь часть сценариев, в которых пригождается язык _XPath_ — на самом деле, их десятки. ## Заключение -В этой статье мы рассмотрели где встречается XML и кому может понадобиться искать внутри по данным внутри этих документов. Научились составлять базовые запросы и изучили часто используемые конструкции XPath: +В этой статье мы рассмотрели, где встречается XML и кому он может пригодиться. Мы научились составлять базовые запросы и изучили часто используемые конструкции XPath: * Абсолютные и относительные пути * Предикаты @@ -330,6 +339,6 @@ hidden: true * Операторы сравнения * Функции -Узнали, когда поиск по HTML с помощью XPath может быть эффективнее поиска с помощью CSS-селекторов. +Также теперь вы знаете, что поиск по HTML с помощью XPath может быть эффективнее поиска с помощью CSS-селекторов. -Язык XPath более глубокий, чем представлено в статье, но те знания, которые вы получили достаточны для того, чтобы решить большинство поставленных задач. Как и при изучении других технологий, тут важно «набивка» руки. Чем больше практики, тем более искусные запросы вы научитесь составлять +В этой статье мы постарались дать знания, которые помогут справиться с большинством задач. Но это далеко не все возможности XPath — это более глубокий язык, чем представлено в статье. Как и с другими технологиями, тут важно набить руку. Чем больше вы практикуетесь, тем более точные и полезные запросы пишете. From 420a23a1a73d2c7ecc5ad4d96539ae68c9ae7512 Mon Sep 17 00:00:00 2001 From: n_mikhaylov Date: Tue, 19 Jul 2022 12:34:24 +0300 Subject: [PATCH 2/2] Removed hidden: true from the XPath guide --- _i18n/ru/_posts/2022-07-15-xpath.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/_i18n/ru/_posts/2022-07-15-xpath.md b/_i18n/ru/_posts/2022-07-15-xpath.md index 46f216f8c..eb181ebd0 100644 --- a/_i18n/ru/_posts/2022-07-15-xpath.md +++ b/_i18n/ru/_posts/2022-07-15-xpath.md @@ -2,7 +2,6 @@ title: Введение в XPath description: Как устроен язык запросов XPath. Разбираемся в поиске информации внутри XML author: Никита Михайлов -hidden: true --- Язык разметки XML с самого первого стандарта окружает пользователей компьютеров. Таблицы в Excel, выгрузки из интернет-магазинов, RSS-ленты с новостями — все это основано на XML. Хоть визуальное отображение отличается на устройствах и в программах, но в основе всегда лежит единый формат. @@ -231,8 +230,8 @@ hidden: true Мы разобрались, как выбирать одно поле — это интересная, но редкая задача. Чаще разработчики обрабатывают данные по всему файлу или нескольким полям. Попробуем одновременно использовать предикат и обратиться к другим полям. Обратите внимание на два момента: -* Предикат необязательно должен идти в конце запроса -* Внутри предиката могут находиться новые пути, которые нужно проверить +* Предикат необязательно должен идти в конце запроса +* Внутри предиката могут находиться новые пути, которые нужно проверить Мы уже знаем, как с помощью предиката отфильтровать данные по полю ``. Эту задачу мы выполняли с помощью конструкции `duration[@value > 9]`. А теперь попробуем сделать эту конструкцию предикатом для ``. Так мы получим данные о курсах с длительностью больше 9 часов: `//course[duration[@value > 9]]`: @@ -262,7 +261,7 @@ hidden: true ### Функции -В прошлых примерах запросы затрагивали теги и атрибуты. Сами данные мы не затрагивали, хотя это огромный пласт информации, по которой можно делать выборки. Для решения этой задачи используются встроенные в _XPath_ функции. Они являются частью предикатов — например, `@`. Попробуем найти курс с названием «Основы верстки контента». +В прошлых примерах запросы затрагивали теги и атрибуты. Сами данные мы не затрагивали, хотя это огромный пласт информации, по которой можно делать выборки. Для решения этой задачи используются встроенные в _XPath_ функции. Они являются частью предикатов — например, `@`. Попробуем найти курс с названием «Основы верстки контента». Для поиска по тексту внутри элемента используется функция `text()`. Ее задача — получить текстовое значение элемента и сравнить его с условием по необходимости. Вот как будет выглядеть запрос для поиска курса с нужным именем: `//course[name[text()="Основы верстки контента"]]` @@ -298,9 +297,9 @@ hidden: true ## Отличия от CSS-селекторов -Если вы писали на JavaScript, то знаете, что элементы можно искать с помощью CSS-селекторов, используя методы `querySelector()` или `querySelectorAll()`. Почему же разработчики иногда ищут элементы внутри HTML именно с помощью_XPath_? +Если вы писали на JavaScript, то знаете, что элементы можно искать с помощью CSS-селекторов, используя методы `querySelector()` или `querySelectorAll()`. Почему же разработчики иногда ищут элементы внутри HTML именно с помощью_XPath_? -Дело в концепции поиска элементов. Используя CSS, можно идти только в глубину без возможности обратиться к родительским элементам. В отличие от CSS, _XPath_ позволяет в любой момент обращаться и к дочерним, и к родительским элементам. +Дело в концепции поиска элементов. Используя CSS, можно идти только в глубину без возможности обратиться к родительским элементам. В отличие от CSS, _XPath_ позволяет в любой момент обращаться и к дочерним, и к родительским элементам. --- @@ -319,11 +318,11 @@ hidden: true Чтобы разобраться подробнее, изучим несколько примеров: -**SEO-специалисты**. Специалисты по продвижению часто обрабатывают большие массивы данных и вытаскивают информацию со страниц сайта. +**SEO-специалисты**. Специалисты по продвижению часто обрабатывают большие массивы данных и вытаскивают информацию со страниц сайта. Например, для них критичны **мета-теги** — дополнительная информация, в которой содержатся иконки сайтов, название страницы, описание и так далее. Эту информацию SEO-специалист может автоматически парсить с помощью запросов в *_XPath_*. -**Тестировщики**. При работе с Front-end тестировщики часто проверяют тот или иной вывод информации на странице — для этого они выбирают отдельные элементы с нужной страницы. Это можно делать через _XPath_ и DevTools, встроенный в браузеры на основе _Chromium_. +**Тестировщики**. При работе с Front-end тестировщики часто проверяют тот или иной вывод информации на странице — для этого они выбирают отдельные элементы с нужной страницы. Это можно делать через _XPath_ и DevTools, встроенный в браузеры на основе _Chromium_. **Разработчики**. Они часто используют **парсеры** — это скрипты, которые ищут нужную информацию на страницах одного или нескольких сайтов. Например, мы хотим сравнить стоимость одного и того же товара в разных магазинах. Для такой задачи можно написать скрипт, который пройдется по всем нужным сайтам, сравнит цены и вернет данные. В этом случае для поиска информацию на странице можно использовать _XPath_.