Улучшение структурной разметки с помощью JavaScript

Всего несколько лет назад ключевым навыком, связанным с написанием HTML, было знание достаточно трюков с таблицами, чтобы убедить два основных браузера сделать более или менее то, что вы от них хотели. Современный Интернет — это совсем другой зверь, где качество разметки оценивается на основе того, насколько хорошо вы используете структурные элементы, такие как заголовки, абзацы и списки, для описания вашего контента.

Преимущества этого подхода уже много раз объяснялись: более удобный код, меньшие размеры файлов, лучшая доступность и возможность контролировать внешний вид вашего сайта из единой таблицы стилей, а не избавляться от различий в разметке, разбросанной по нескольким страницам. , Преимущество, которое не так часто обсуждается, состоит в том, что хорошо структурированная разметка открывает двери для дополнительных улучшений сайта, основанных на этой долго злоупотребляемой третьей стороне клиентской сети, Javascript.

В этой статье мы рассмотрим два способа совместной работы Javascript и хорошо структурированной разметки. Первый пример покажет, как Javascript может улучшить цитату, подключившись к его атрибуту cite. Второй будет демонстрировать скрипт «лучший в своем роде» для создания ссылок, которые переключают какую панель видна на странице.

Цитаты цитат

Для нашего первого примера, давайте посмотрим на элемент скромного blockquote. Правильное использование этого элемента, часто неправильно применяемое для применения отступов, состоит в том, чтобы отмечать цитаты, которые должны визуально отображаться отдельно от окружающего текста. Открывающий тег blockquote может принимать необязательный атрибут cite, который должен содержать URL-адрес страницы, на которой возникла цитата.

Единственная проблема с атрибутом cite заключается в том, что браузеры полностью его игнорируют. Пуристы разметки могут ценить это, но, с чисто практической точки зрения, ничего не получится с его использованием, кроме чувства самодовольного удовлетворения от использования правильной разметки. Вот где приходит Javascript. Используя DOM, можно добавить ссылку на источник цитаты внизу любой цитаты, которая имеет атрибут cite. Вот код для функции, которая делает именно это:

function extractBlockquoteCitations() { 
  var quotes = document.getElementsByTagName('blockquote'); 
  for (var i = 0; i < quotes.length; i++) { 
    var cite = quotes[i].getAttribute('cite'); 
    if (cite != '') { 
      var a = document.createElement('a'); 
      a.setAttribute('href', cite); 
      a.setAttribute('title', cite); 
      a.appendChild(document.createTextNode('Source')); 
      var p = document.createElement('p'); 
      p.className = 'blockquotesource'; 
      p.appendChild(a); 
      quotes[i].appendChild(p); 
    } 
  } 
}

Давайте внимательно посмотрим на тело функции.

 var quotes = document.getElementsByTagName('blockquote');

В этой строке используется метод DOM getElementsByTagName

 for (var i = 0; i < quotes.length; i++) { 
  var cite = quotes[i].getAttribute('cite'); 
  if (cite != '') {

Теперь мы перебираем собранные узлы цитат. Каждый раз мы используем метод getAttribute Если атрибут cite был установлен, мы переходим к забавной части: создаем ссылку «Источник» внизу цитаты.

     var a = document.createElement('a'); 
    a.setAttribute('href', cite); 
    a.setAttribute('title', cite);

Когда мы хотим динамически добавлять новые элементы HTML на страницу, используя DOM, правильный способ сделать это — создать элементы программно, используя метод createElement. Вышеприведенные строки создают новый элемент ‘a’ и присваивают ему атрибуты hreftitle
a.appendChild(document.createTextNode('Source'));

Мы хотим, чтобы элемент ссылки содержал некоторый текст, по которому пользователь может щелкнуть, чтобы активировать ссылку. Необработанные текстовые узлы создаются с использованием метода createTextNode DOM рассматривает HTML-элементы как формирование дерева, поэтому для добавления текста в нашу вновь созданную ссылку нам нужно вызвать его метод appendChild

     var p = document.createElement('p'); 
    p.className = 'blockquotesource'; 
    p.appendChild(a);

Чтобы позволить нам гибко стилизовать новую ссылку с помощью CSS, мы можем заключить ее в элемент абзаца. Приведенный выше код создает такой элемент, устанавливает его класс на « blockquotesourceappendChild На этом этапе созданный нами новый фрагмент документа эквивалентен следующему HTML:

 <p class="blockquotesource"> 
<a href="[cite URL]" title="[cite URL]">Source</a> 
</p>

На данный момент наш фрагмент остается невидимым, потому что, хотя мы создали его в памяти, мы еще не прикрепили его к нашему документу. Последняя строка в функции делает именно это:

     quotes[i].appendChild(p);

quotes[i] appendChild

Есть еще два шага. Во-первых, нам нужна вышеуказанная функция для запуска при первой загрузке страницы. Есть несколько способов достижения этого. Самое простое — добавить вызов функции в атрибут onload элемента body документа:

 <body onload="extractBlockquoteCitations();">

 window.onload = extractBlockquoteCitations;

 function addEvent(obj, evType, fn){ 
  if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, false); 
    return true; 
  } else if (obj.attachEvent){ 
    var r = obj.attachEvent("on"+evType, fn); 
    return r; 
  } else { 
    return false; 
  } 
}

 addEvent(window, 'load', extractBlockquoteCitations);

 blockquote { 
  border-left: 0.25em solid navy;  
  padding: 0 0.5em;  
  margin: 0.5em 1.5em 0.5em 2.5em;  
} 
blockquote p.blockquotesource { 
  font-weight: bold; 
  font-size: 0.8em; 
  text-align: right; 
  padding-top: 0.5em; 
}

 <a href="#p1">Panel 1</a> | <a href="#p2">Panel 2</a>  

<div id="p1">This is Panel 1</div>  
<div id="p2">This is Panel 2</div>

 <a href="#p1" class="toggle">Panel 1</a> |   
<a href="#p2" class="toggle">Panel 2</a>

 var et_toggleElements = [];

 /* Initialisation */  
function et_init() {  
  var i, link, id, target, first;  
  first = true;  
  for (i = 0; (link = document.links[i]); i++) {

     if (/btoggleb/.exec(link.className)) {

       id = link.href.split('#')[1]; Если ссылка имеет переключатель в своем списке классов, мы предполагаем, что целью ссылки является фрагмент URL.

  link.href.split('#')href[1]

       target = document.getElementById(id);  
      et_toggleElements[et_toggleElements.length] = target;

       if (first) {  
        first = false;  
      } else {  
        target.style.display = 'none';  
      }

       link.onclick = et_toggle;  
    }  
  }  
}

 function et_toggle(e) {   
  if (typeof e == 'undefined') {   
    var e = window.event;   
  }   
  var source;   
  if (typeof e.target != 'undefined') {   
    source = e.target;   
  } else if (typeof e.srcElement != 'undefined') {   
    source = e.srcElement;   
  } else {   
    return true;   
  }

   if (source.nodeType == 3) {   
    source = targ.parentNode;   
  }

   var id = source.href.split('#')[1];

   return false;   
}

 addEvent(window, 'load', et_init);