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

У цій статті ми продовжимо говорити про об’єктну модель документів (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.