Уроки javascript від самоделкина - урок 33
Частина третя
33. Робота з вузлами
елементів DOM
- об'єкт nodeList;
- властивості доступу до елементів;
- методи доступу до елементів;
- деякі методи створення елементів.
При роботі з HTML ми стикалися з різними колекціями: document.images. document.links. document.all і т.д. Ці колекції не належать інтерфейсу DOM 3 і є своєрідним «атавізмом», які залишилися від DOM 0.
Чому я звертаю на це вашу увагу?
Змішання цих понять може привести до створення непрацюючих або «кривих» скриптів.
Перевага використання DOM 3 в тому, що ми можемо самі створювати будь-які колекції # 151; як відповідні, так і не відповідні вбудованим.
об'єкт nodeList
Кожен елемент об'єкта nodeList є вузлом - об'єктом, що має ряд властивостей.
Можна уявити собі nodeList у вигляді хеша. Наприклад, в списку атрибутів можна угледіти масив «ключів» (імена атрибутів: align. Color і т.д.) і «значень» (значення атрибутів: center. Black і т.д.)
У деяких випадках для роботи з вмістом об'єкта nodeList буває зручно перетворити це вміст в звичайні масиви. Наприклад, ми хочемо отримати масив всіх тегів, які перебувають в
.Властивість childNodes елемента
повертає список всіх його дочірніх вузлів.Встановлюємо «фільтр», що вибирає з них лише вузли елементів (nodeType == 1).
Будуємо масив, що містить імена тегів (nodeName).
var allBodyTags = new Array;
var elmBody = document.getElementsByTagName ( "BODY") [0];
for (var i = 0; i
// якщо тип вузла - елемент
if (elmBody.childNodes [i] .nodeType == 1)
<
// нарощуємо повертається масив
// з імен елементів
allBodyTags = allBodyTags.concat (elmBody.childNodes [i] .nodeName);
>
>
Властивості доступу до елементів
Розглянуті нижче властивості відносяться саме до елементів DOM. В HTML вони інтерпретуються за допомогою тегів.
(Ще раз нагадаю, що це не синоніми. Якщо порівняти елемент з біговою доріжкою, то теги - це старт і фініш. В елементах, які не мають закриває тега, ці поняття збігаються.)
Частково ці властивості доступні і для текстових вузлів, але про це поговоримо в спеціальному розділі.
Кожен елемент містить властивості, що відображають його місце в ієрархії DOM. Вони дозволяють переміщатися по всіх елементах дерева. Ось деякі властивості взаємин елементів:
Повертає батьківський елемент. На нашій схемі для вузла HTML батьківським елементом буде сам документ, для HEAD і BODY - вузол HTML і т.д.
Текстові вузли також підтримують цю властивість.
У вузла документа, природно, цього властивості немає.
Можливі вкладення «матрёшечного» типу для доступу до «дідуся» або «прадіда»:
Список нащадків вузла (об'єкт Nodelist). При роботі з HTML ця функція корисна тільки для елементів. Текстові вузли і вузли-атрибути не мають нащадків.
Node - батьківський вузол.
N - номер нащадка в списку.
Браузери сімейства Netscape сприймають прогалини в коді (порожні рядки або перенесення на інший рядок) як текстові вузли.
У нашому прикладі найпростішого документа:
Вузол document має одного нащадка: елемент "html".
Елемент "html" по ідеї має двох нащадків: елемент "head" і елемент "body". Але в браузерах сімейства Netscape виникнуть 4 нащадка: перенесення рядка перед
. власне . перенос рядка перед і власне . Про це потрібно пам'ятати, переглядаючи список childNodes в циклі for.У природі як би існує метод normalize (). якому належить усунути проблему, але елементи HTML на нього не реагують. Тому можу запропонувати лише «кустарний» спосіб.
У цього способу є один недолік: він виключає з обігу всі текстові вузли, а не тільки «ліві». Хоча це як подивитися: можливо, він робить корисну справу, очищаючи зерна від плевел і даючи більше чіткий поділ елементів і текстових вузлів.
«# 133; нормальні бандити завжди йдуть в обхід»
Чому будуємо масив саме з імен елементів (nodeName)?
Тому що nodeType у них у всіх одиниця, а nodeValue. як ми пам'ятаємо, - null. А властивість length приймає правильний, нормалізований вид.
Є ще один кустарний спосіб позбутися від цього Глюка: просто записати весь код HTML на одній довгій рядку.
Покажчики на відповідні елементи в списку childNodes (див. Таблицю вище).
елемент .firstChild - то ж, що елемент .childNodes [0].
елемент .lastChild - то ж, що елемент .childNodes [елемент .childNodes.length-1].
Звертаються до батьківського елементу, що має «сім'ю» childNodes.
Ці покажчики звертаються вже до самих «членам сім'ї» childNodes.
Природно, що у childNodes [0] відсутня prevSibling,
а у childNodes [childNodes.length-1] марно шукати nextSibling.
У браузерах сімейства Netscape за вищезазначеною причини вузлів дещо більше, ніж потрібно. Тому використовувати ці властивості не завжди зручно.
Методи доступу до елементів
У цьому оглядовому уроці ми розглянемо лише кілька основних методів доступу до елементів. Перша група методів належить кореневого об'єкту document. деякі з них ми вже використали.
Методи другої групи можуть застосовуватися і до самих елементів.
Метод об'єкта document
Цим методом ми вже не раз користувалися. Він посилається на елемент з ID, зазначеним в аргументі (потрібно не забути поставити ID при верстці сторінки).
Метод для всіх елементів
Повертає список дочірніх елементів за вказаною в аргументі імені тега.
Зверніть увагу на правопис імені методу
Частина «Elements» пишеться у множині, з буквою «s» на кінці.
елемент - будь-який елемент DOM.
Якщо в якості параметра аргументу вказана зірочка, повертається список усіх дочірніх елементів.
Цей метод можна застосовувати як до самого документу, так і до будь-якого елементу. Наприклад, його можна застосувати до елементу