Настройка DOM шаблонов

Дорогие друзья, хоть мы и выпустили очень полезную и супер удобную возможность парсинга сайтов, с помощью 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 шаблон для парсинга страниц сайта https://warezed.ru/. Для этого открываем любую страницу с контентом, например https://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 можно не только полное содержимое статей, но и источники.

Разделы сайта

Форум web-разработчиков

Последние записи