Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 21.05.2022)
28850
осіб
204
літаків
169
гелікоптерів
1278
танків
3116
ББМ
596
артилерія
93
ППО
201
РСЗВ
2178
машин
13
кораблі і катери
Уроки JavaScript – Доступ до вузлів та атрибутів в DOM

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.