Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 27.03.2024)
439190
солдат
347
самолетов
325
вертолетов
6904
танков
13216
ББМ
10931
артиллерия
728
ПВО
1019
РСЗО
14539
машин
26
корабли и катера
Уроки JavaScript – Доступ к узлам и атрибутам в DOM
Опубликовано

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *