Содержимое 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, то и запускают все скрипты как это делают настоящие браузеры. Это позволяет им индексировать динамически появляющийся контент.
Коментарии к заметке
А ещё всякие умные операторы, особенно мобильные в Европе, просто режут комментарии.
Вполне допускаю такую ситуацию. Опять же Opera Mobile и мобильный Chrome могут на своих проксирующих серверах отфильтровать их.
По-моему, у
<script type="text/x-foo-bar"></script>
всё же больше плюсов:id
илиclass
.Интересно, кстати, кто какой тип у таких «скриптов» использует? Я одно время писал
script type="text/plain"
:)Я пишу то, что первое придёт в голову.