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