2.2. Програмний інтерфейс html dom

 

В рамках DOM моделі HTML можна розглядати як безліч вузлових об'єктів. Доступ до них здійснюється за допомогою JavaScript або інших мов програмування. Програмний інтерфейс DOM включає в себе набір стандартних властивостей і методів.

Властивості представляють деякі сутності (наприклад, <h1>), а методи - дії над ними (наприклад, додати <a>).

До типових властивостей DOM відносяться наступні:

        x. innerHTML - внутрішнє текстове значення HTML елемента x;

        x. nodeName - ім'я x;

        x. nodeValue - значення x;

        x. parentNode - батьківський вузол для x;

        x. childNodes - дочірній вузол для x;

        x. attributes - вузли атрибутів x.

Вузловий об'єкт, що відповідає HTML елементу підтримує наступні методи:

        x. getElementById (id) - отримати елемент з вказаним id;

        x. getElementsByTagName (name) - отримати всі елементи з вказаним ім'ям тега (Name);

        x. appendChild (node) - вставити дочірній вузол для x;

        x. removeChild (node) - видалити дочірній вузол для x.

Приклад 3.

Для отримання тексту з елемента <p> зі значенням атрибута id "demo" в HTML документі можна використовувати наступний код:

txt = document.getElementById ("demo"). innerHTML

Той же самий результат може бути отриманий по-іншому:

txt = document.getElementById ("demo"). childNodes [0]. nodeValue

В рамках DOM можливі 3 способи доступу до вузлів:

1.        За допомогою методу getElementById (ID). При цьому повертається елемент із зазначеним ID.

2.        За допомогою методу getElementsByTagName (name). При цьому повертаються всі вузли з вказаним ім'ям тега (у вигляді індексованого списку). Перший елемент у списку має нульовий індекс.

3.        Шляхом переміщення по дереву з використанням відношення між вузлами.

Для визначення довжини списку вузлів використовується властивість length.

Приклад 4.

x = document. getElementsByTagName ("p"); for (i = 0; i <x. length; i + +) { document. write (x [i]. innerHTML); document. write ("<br/>"); }

У даному прикладі всередину HTML документа вставляється у вигляді списку текстовий вміст всіх елементів відповідних тегу <p>.

Для навігації по дереву в найближчих околицях поточного вузла можна використовувати наступні властивості:

        parentNode;

        firstChild;

        lastChild.

Для безпосереднього доступу до тегів можна використовувати 2 спеціальні властивості:

        document. documentElement - для доступу до кореневого вузла документа;

        document. body - для доступу до тегу <body>.

 

2.3. Властивості вузлів

 

У HTML DOM кожен вузол є об'єктом, який може мати методи (функції) і властивості. Найбільш важливими є наступні властивості:

        nodeName;

        nodeValue;

        nodeType.

Властивість nodeName вказує на ім'я вузла. Ця властивість має такі особливості:

        Властивість nodeName призначена тільки для читання;

        Властивість nodeName вузла елемента точно відповідає імені тега;

        Властивість nodeName вузла атрибуту відповідає імені атрибута;

        Властивість nodeName текстового вузла завжди рівна # text

        Властивість nodeName вузла документа завжди рівна # document

 

Зауваження: nodeName завжди містить ім'я тега HTML елемента у верхньому регістрі.

 

Властивість nodeValue вказує на значення вузла. Ця властивість має такі особливості:

        Властивість nodeValue вузла елемента не визначено;

        Властивість nodeValue текстового вузла вказує на сам текст;

        Властивість nodeValue вузла атрибуту вказує на значення атрибута.

 

Властивість nodeType повертає тип вузла. Ця властивість призначена тільки для читання.

Найбільш важливими типами вузлів є наступні:

 

Тип елемента	Тип вузла
Element	1
Attribute	2
Text	3
Comment	8
Document	9