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

24/12/2018

У цій статті ми продовжимо говорити про об’єктну модель документів (DOM) і розглянемо основні способи доступу до неї за допомогою JavaScript.

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

<!DOCTYPE html>
<html lang="uk-UA">
 <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];
// створюємо список вузлів всіх елементів списку в тегові 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