Дорогие друзья, хоть мы и выпустили очень полезную и супер удобную возможность парсинга сайтов, с помощью DOM шаблонов, многие пользователи по-прежнему продолжают использовать простые шаблоны. Они тоже удобные и эффективные, но цель данной статьи познакомить вас поближе именно с DOM шаблонами парсинга статей.
Как мы писали ранее, в рамках пресс релиза выхода 4.4 версии парсера сайтов FDE Grabber, DOM – это аббревиатура от английского “Document Object Model”, что переводится на русский, как “Объектная Модель Документа”. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями “родительский-дочерний”. Иными словами, система импорта новостей FDE Grabber теперь умеет построить из HTML кода документа иерархическое DOM дерево, состоящее из узлов, связанных между собой отношениями родитель-дочерний элемент.
Чтобы иметь возможность смотреть DOM структуру документа статьи мы советуем вам установить бесплатное дополнение к браузеру FireFox — FireBug, для этого заходим через браузер FireFox на сайт https://addons.mozilla.org/ru/firefox/
Проводим поиск плагина, указывая в поисковом запросе «FireBug» https://addons.mozilla.org/ru/firefox/addon/firebug/?src=ss
Далее нажимаем на кнопку «Добавитиь в FireFox», добавляем плагин, перезапускаем браузер FireFox и пробуем его в действии.
Пусть для примера мы хотим составить DOM шаблон для парсинга страниц сайта http://warezed.ru/. Для этого открываем любую страницу с контентом, например http://warezed.ru/819-Nad-Severnym-morem-vot-vot-vzorvetsya-gaz.html через браузер FireFox, выделяем текст статьи:
Вызываем контекстное меню, кликая правой кнопкой мышки по выделенному тексту статьи:
В открывшейся панели ищем уникальный родительский элемент, содержащий полный текст статьи:
Мы видим, что полезный контент статьи полностью содержится в теге span со стилевым классом news
Поэтому мы можем составить наш DOM шаблон как span.news (это очень напоминает описание CSS стилей). Для уверенности в уникальности нашего шаблона мы можем пойти дальше и составить иерархическую цепочку, замечая, что элемент span.news является дочерним по отношению к элементу div.big-news, поэтому альтернативный DOM шаблон будет выглядеть так: div.big-news span.news (что опять-таки идентично CSS нотации описания стилей). Или даже так: body div.big-news span.news
В общем случае иерархическая DOM цепочка узлов может быть неограниченной.
В случае, когда стилевой класс указывается через пробел, например для атрибута class=″main left″ в теге div, который является дочерним по отношению к body мы не можем записать шаблон в виде body div.main left, так как интерпретатор граббера будет думать что div.main содержит в себе элемент left, что в корне неверно — для таких случаев нотация должна иметь вид: body>div.main left, то есть в этом случае мы иерархическую последовательность узлов разделяем не пробелами, а через символы ″>″.
Вот так, легко и непринуждённо мы можем составлять DOM шаблоны для парсера контента FDE Grabber. Обо всех особенностях их составления не поленитесь и дочитайте статью полностью 
Для того, чтобы открыть панель FireBug также можно воспользоваться иконкой так, как показано на скриншоте ниже:
Как работает DOM парсинг на примере разбора содержимого статьи:
- указывается DOM шаблон
- FDE Grabber преобразует документ в иерархическое DOM дерево
- начинается поиск по указанному DOM шаблону необходимого нам элемента и в случае его нахождения мы получим полезный контент
Как выглядит DOM шаблон
В DOM шаблоне указываются DOM элементы (узлы) в виде иерархической последовательности (как и в CSS стилях или, например jquery).
Рассмотрим пример. Пусть, полезный контент содержится в документе, который выглядит следующим образом:
<body>
<div>
<table>
<tr>
<td>
<div class=″content″>
полезное содержимое,
которое мы хотим получить
</div>
</td>
</tr>
</table>
</div>
</body>
Тогда мы можем выстроить некоторый шаблон, который будет выглядеть, например так: body div table div.content
Последовательность body div table div.content означает, что мы ищем элемент div со стилевым классом “content“, который является дочерним по отношению к table, а table в свою очередь дочерним, по отношению к div, а div к body.
Допускается указание идентификаторов, в виде div#id, где div - это элемент с идентификатором “id“.
Кроме того, допускается указание любой общности элементов в виде “*”. Конструкция вида *.content означает любой элемент со стилевым классом “content”
Ну хорошо, скажете вы, но это не позволяет распознать контент в большинстве сайтов, работающих на популярном движке DLE. Контент там находится, обычно в блочных элементах с уникальным идентификатором, вида news-id-555555
ДА! Именно поэтому мы сделали возможность указания дополнительного сопоставления атрибутов
Например, id {preg} #content_\d+#i – это сопоставление значения атрибута id с указанным регулярным выражением #content_\d+#i.
width {like} 100 – это сопоставление значения атрибута width со строковым значением “100” (не регулярное выражениие).
Как несложно догадаться, для всех сайтов, работающих на DLE унас будет всего один универсальный шаблон:
id {preg} #news\-id\-\d+#is
На скриншоте ниже приводится пример настройки граббера FDE Grabber под любой сайт, работающий на CMS DataLife Engine:
Кроме поиска, по такой же схеме мы сделали возможность указания DOM замен. При этом можно заменить любой DOM элемент на указанную замену. Парсить с помощью DOM шаблонов в FDE Grabber можно не только полное содержимое статей, но и источники.
