У цій статті ми продовжимо говорити про об’єктну модель документів (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
‘ повертає колекцію/список активних вузлів. Ця колекція схожа на масив в тому, що у неї є властивість розміру (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 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.
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…