HTML-комментарий как контейнер для данных
- Опубликовано:
В качестве контейнера для хранения текстовых данных, предназначенных для динамического отображения при помощи JavaScript, можно использовать обычный HTML-комментарий.
Комментарий является самостоятельным DOM-узлом, и его содержимое в виде текста доступно при помощи стандартного свойства любого DOM-узла — nodeValue
, либо через его свойство data
как объекта CharacterData
.
В отличие от элементов, у комментария не может быть идентификатора или класса, поэтому «добраться» до комментария как DOM-узла можно одним из общих для всех DOM-узлов способов — например, с помощью свойства firstChild
родительского элемента или свойств previousSibling
/ nextSibling
соседнего узла:
<div id="example"><!--нужные нам данные--></div>
<script>
var comment = document.getElementById('example').firstChild;
alert(comment.data);
</script>
Данная техника позволяет избежать использования атрибутов не по назначению (например, задействуя атрибут title
для хранения данных, не являющихся описанием элемента), использования нестандартных атрибутов, а также необходимости создания скрытых элементов (например, div
), содержимое которых, к слову, прекрасно индексируется поисковыми машинами.
В результате:
- HTML-код абсолютно корректен («валиден»),
- нет нежелательных визуальных эффектов (например, отображение содержащего данные атрибута
title
в виде бессмысленной для пользователя всплывающей подсказки), - и исключена индексация служебных данных поисковыми машинами и нежелательный их вывод в результатах поиска.