DOM парсинг контента

Как было описано ранее, в рамках пресс релиза выхода парсера сайтов FDE Grabber 4.4,  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, выделяем полный текст статьи: Вызываем контекстное меню, нажимая на правую кнопку мышки по выделенному тексту статьи: В открывшейся панели FireBug ищем уникальный родительский элемент, содержащий полный текст статьи: Можно заметить, что полезный контент статьи полностью содержится в теге 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 можно не только полное содержимое статей, но и источники.