То, что скрыто комментарием

Содержимое HTML комментариев никогда не разбирается парсером документа. Однако, они не пропадают бесследно в пучине тегов. Все комментарии можно достать с помощью JavaScript.

Каждый элемент DOM-дерева имеет поле noteType , в котором указан его тип. Для комментария значения поля равно 8.


var children = document.getElementsByTagName("head")[0].childNodes;
var comments = Array.prototype.filter.call(children,
  function (node) { return node.nodeType == 8; });
var content = comments.map(function (node) { return node.nodeValue; });

Из-за того, что элементы комментариев нельзя получить с помощью .querySelectorAll() , сначала нужно найти родительский элемент, в котором они находятся, и только потом перебором всех детей получить содержимое нужных узлов.

Практическое применение

Условная загрузка

Шикарная идея применять комментарии для формирования разметки на стороне клиента материализовалась в виде проекта Адама Чамберза — Responsive Comments.

Блокам добавляется атрибут data-responsive-comment-media с медиа запросом или атрибут data-responsive-comment-supports с тестом Modernizr. В зависимости от выполнения указанного условия блоки будет появляться или скрывать. А так как изначально контент обвёрнут в комментарий, то это позволит избежать лишних запросов на сервер и лишних элементов в документе.

Поисковая оптимизация

Эксперимент на основе идеи прятать контент от поисковиков в комментариях и доставать его от туда уже на клиентской стороне полностью провалился. Поисковики не только разбирают HTML, то и запускают все скрипты как это делают настоящие браузеры. Это позволяет им индексировать динамически появляющийся контент.