Уроки JavaScript – Доступ к узлам и атрибутам в DOM

В этой статье мы продолжим говорить об объектной модели документов (DOM) и рассмотрим основные способы доступа к ней с помощью JavaScript.

 

 

Давайте для примера возьмем небольшой HTML документ, в котором есть абзац и неупорядоченный список:

<!DOCTYPE html>  <html lang="ru-RU">   <head>    <meta charset="UTF-8">    <title>JavaScript – доступ к узлам DOM</title>   </head>   <body>    <p id="paragraph">Первый тестовый параграф</p>    <ul>     <li>Пункт 1 неупорядоченного списка</li>     <li>Пункт 2 неупорядоченного списка</li>     <li>Пункт 3 неупорядоченного списка</li>     <li>Пункт 4 неупорядоченного списка</li>     <li>Пункт 5 неупорядоченного списка</li>    </ul>   </body>  </html>  

 

 

В этом примере мы собираемся получить доступ к нашему абзацу с помощью метода DOM ‘getElementById‘:

var firstParagraph = document.getElementById('paragraph');  // теперь у нас есть ссылка на узел DOM. Этот узел – первый параграф  

 

Переменная firstParagraph теперь является ссылкой на узел DOM. С этим узлом мы можем сделать несколько вещей – мы можем получить его содержимое и атрибуты, а также можем манипулировать любым его аспектом. Мы можем удалить его, клонировать или переместить в другие части дерева DOM.

 

Ко всем элементам, которые есть в документе, мы можем получить доступ с помощью JavaScript и DOM API. Например, подобным способом мы можем получить доступ и к неупорядоченному списку, единственная проблема состоит в том, что у этого списка нет идентификатора (ID). Мы можем присвоить ему идентификатор, а затем использовать тот же метод, что и выше, или мы можем получить к нему доступ, используя метод ‘getElementsByTagName‘ (доступ к элементам по их тегам):

var vseNeuporyadochenniyeSpiski = document.getElementsByTagName('ul');  // 'getElementsByTagName' возвращает коллекцию/список всех доступных узлов  

 



 

getElementsByTagName

Метод ‘getElementsByTagName‘ возвращает коллекцию/список активных узлов. Эта коллекция похожа на массив в том, что у нее есть свойство размера (length). Важно отметить, что эти коллекции являются «живыми» — если вы добавите новый элемент в DOM, то коллекция обновится сама. Поскольку это массивоподобный объект, мы можем получить доступ к каждому узлу через индекс, от 0 до общей длины коллекции (минус 1):

// получаем доступ к одному (первому) неупорядоченному списку: индекс [0]  var neuporyadochenniySpisok = document.getElementsByTagName('ul')[0];  // cоздаем список узлов всех элементов списка в теге UL:  var vseElementiSpiska = neuporyadochenniySpisok.getElementsByTagName('li');  // теперь мы можем перебрать каждый элемент списка, используя цикл FOR:  for (var i = 0, length = vseElementiSpiska.length; i < length; i++) {    // извлекаем текстовый узел и выводим его содержимое:    alert( vseElementiSpiska[i].firstChild.data );  }  

 

 

Обход DOM

Термин «обход» используется для описания действия перемещения по DOM и поиске узлов. DOM API предоставляет нам множество свойств узлов, которые мы можем использовать для перемещения вверх и вниз по всем узлам в документе.

 

Следующие свойства есть у всех узлов и позволяют получать доступ к связанным/близким узлам:

  • Node.childNodes: вы можете использовать это свойство для доступа ко всем прямым дочерним узлам одного элемента. Это будет объект, похожий на массив, который можно будет «перебрать».
  • Node.firstChild: это то же самое, что и доступ к первому элементу в массиве ‘childNodes‘ (‘Element.childNodes[0]‘).
  • Node.lastChild: это то же самое, что и доступ к последнему элементу в массиве ‘childNodes‘ (‘Element.childNodes[Element.childNodes.length-1]‘).
  • Node.parentNode: это свойство дает вам доступ к родительскому узлу текущего узла. В этом случае у вас будет доступ только к одному родительскому узлу. Чтобы получить доступ к следующим предкам родительского узла, используйте «node.parentNode.parentNode» и т.д.
  • Node.nextSibling: это свойство дает вам доступ к следующему узлу на том же уровне в дереве DOM.
  • Node.previousSibling: это свойство дает вам доступ к последнему узлу того же уровня в дереве DOM.

 

 

Итак, как вы можете видеть, обход DOM невероятно прост, здесь главное знать имена свойств.

Также для примера выше (HTML документ) следует отметить одну вещь: даже пустой элемент будет извлечен как узел. Например, если у вас между тегом <ul> и первым <li> есть пустое пространство, оно фактически будет считаться узлом. Точно так же неупорядоченный список на самом деле может не являться следующим узлом абзаца (nextSibling), если между ними есть пустое пространство. В этом случае он будет другим узлом. Как правило, в таких ситуациях вы должны обойти массив childNodes и протестировать nodeType. nodeType, равный 1, означает, что это элемент; равный 2 означает, что это атрибут; равный 3 означает, что это текстовый узел и так далее.

 

 

 

На сегодня все. Мы надеемся, что вы научились чему-то полезному из сегодняшнего урока. В следующих уроках мы продолжим детальное изучение основных аспектов JavaScript.