Парсинг. Создание парсера HTML DOM. Простые узлы

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

Подавляющее большинство примеров парсинга страниц сайтов сводится к использованию селекторов CSS.

Попробуем использовать просто смысловой анализ HTML DOM. Может все намного проще, чем в тех примерах ...

Построение дерева HTML DOM и свойства узла "plaintext", "innertext", "outertext" надеюсь объяснять не надо

Итак, рассмотрим слдующий HTML-код

<div>
  <span>Парсинг. Создание парсера HTML DOM. Простые узлы</span>
  <div>
    <a href="#">Ссылка на "Смышлёный парсер"</a>
  </div>
  <div>
    <img src="/images/parser.jpg" />
  </div>
  <div>
    <img src="/images/parser.jpg" title="заголовок картинки" />
  </div>
  <div>
    <img src="/images/parser.jpg" title="заголовок картинки" alt="альтернативный текст для картинки" />
  </div>
</div>

Распознавание по правилам "текстовое содержимое"

Правила

Очевидны

Результат:

Итог:

• нет имени узла
• пропущены узлы с тегом <img>, так как для них текст ("plaintext") не предусмотрен

Распознавание по правилам "с учетом атрибутов"

Атрибут или аттрибут?

Введем понятие "комплексный" узел и, используя его "действительную" и "реальную" части

Правила

Также очевидны

Результат:

Итог:

• имена, где можно, появились
• появились узлы с тегом <img>

Теперь добавим картинку в ссылку

<div>
  <a href="#"><img src="/images/parser.jpg" /></a>
</div>

Правила

Такие-же как правила "с учетом атрибутов"

 Результат:

Итог:

• НЕТ ссылки

Похоже правила для "простых" узлов себя исчерпали...

Правила для "сложных" ("составных". "композитнных") узлов и соответственные результаты - в следующей статье...