Как-то меня посетила мысль проверить, как определяются HTML-комментарии в DOM-структуре документа, и как можно получить доступ к их содержимому. Ведь по сути они являются полноправными составляющими документа. Напрямую, через ID, имя и другими подобными способами, естественно, сделать это не получится, т.к. тег комментария не имеет ничего подобного. Но сделать это все-таки удалось, привязавшись к соседнему тегу одного уровня с нужным комментарием. После этого элемент комментария со всеми потрохами можно получить через функцию JavaScript
nextSibling или
previousSibling, в зависимости от вашей ситуации. Это можно посмотреть, например, вот на таком фрагменте кода:
<div>
<!--first comment--><div id="main_div">Main DIV</div><!--second comment-->
</div>
<script type="text/javascript">
// Получить опорный элемент
var el=document.getElementById('main_div');
// Сообщение "first comment"
alert(el.previousSibling.nodeValue);
// Сообщение "second comment"
alert(el.nextSibling.nodeValue);
</script>
Можно, конечно, перебрать все дочерние элементы документа, начиная от корневого, но описанным выше способом удобнее выбрать именно нужный комментарий. Способ с перебором элементов тоже приведу:
Code (HTML) : Убрать нумерацию
<div id="overall">
<a href="#">link</a>
<!--first comment-->
<div id="inner_div">
inner div
<!--second comment-->
</div>
plain text
</div>
<script type="text/javascript">
var el=document.getElementById('overall');
for (var i = 0; i < el.childNodes.length; i++) {
if (el.childNodes[i]=='[object Comment]' ||
el.childNodes[i]=='[object HTMLCommentElement]') {
alert(el.childNodes[i].nodeValue);
}
}
</script>
Последовательно перебираются все дочерние элементы, если текущий объект имеет тип
[object Comment] или
[object HTMLCommentElement] (в случае Internet Explorer), то значит найден комментарий. Несмотря на некоторые неудобства, способ с обходом дерева DOM тоже можно использовать, когда привязка к строго определенным элементам не требуется, а надо просто получить содержимое комментариев.
Где это можно использовать? Например, в скрипте проверки правильности заполнения формы на стороне пользователя. Я видел подобные скрипты, но они были выполнены путем добавления невалидных атрибутов к элементам, или добавлением атрибутов типа
rel="регулярка для проверки" к элементам, которые их не поддерживают. Этот же способ полностью валидный и соответствует всем стандартам HTML.
<script type="text/javascript">
function chk_input() {
// По умолчанию форма правильная
var valid=true;
// Получить форму для проверки
var form=document.getElementById('myform');
for (var i=0; i<form.elements.length; i++) {
var elem = form.elements[i];
// Если после элемента формы есть комментарий
if (elem.nextSibling=='[object Comment]' ||
elem.nextSibling=='[object HTMLCommentElement]') {
// Получить шаблон регулярного выражения проверки
// и проверить соответствие введенного текста шаблону
valid=valid && RegExp(elem.nextSibling.nodeValue).test(elem.value);
}
}
alert(valid ? 'Форма заполнена правильно' : 'Форма заполнена с ошибками');
}
</script>
<form id="myform" onsubmit="chk_input(); return false;">
<input type="text"><!--^[0-9]{3,}$--> Введите не менее 3-х цифр
<br>
<input type="checkbox"> - галочку можно и не ставить
<br>
<input type="text"> Любые символы или пусто
<br>
<input type="text"><!--^[a-zA-Z]+$--> Введите латинские буквы
<br>
<input type="button" value="Проверить" onclick="chk_input();">
</form>
Обратите внимание, что между проверяемым элементом и комментарием не должно быть никаких пробелов, а в самом комментарии текст находится вплотную к ограничителям! Также нельзя будет оптимизировать документ различными программами, которые в целях экономии места удаляют лишние на их взгляд HTML-комментарии. Но это уже мелочи, тут главное понять сам принцип применения способа.
Другое применение - сокрытие реальных адресов email от спамерских программ, автоматически собирающих адреса электронной почты со страниц сайтов.
<div>Email:
<!--username--><a href="#" onclick="this.href=
this.nextSibling.nextSibling.nodeValue+':'+
this.previousSibling.nodeValue+'@'+
this.nextSibling.nodeValue;">hidden</a><!--domain.com--><!--mailto-->
</div>
Сама ссылка при этом остается активной, и при клике на нее открывается почтовая программа с нужным почтовым адресом, в данном примере
username@domain.com
И напоследок, как обычно, извращение. Готового кода нет, пока только теоретическая выкладка. Можно, например, зашифровать скрипт JavaScript, а в комментариях на странице хранить ключ расшифровки, тем самым привязывая его к определенной странице. Дальше мысль развивать не хочу, ибо лениво.