Уроки 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.

Теги: JavaScript