На цьому уроці ми розглянемо, що таке DOM, навіщо він потрібен, а також те, як він будується.

Що таке DOM?

Браузер, коли запитує сторінку і отримує у відповіді від сервера її вихідний HTML-код, повинен спочатку його розібрати. У процесі аналізу і розбору HTML-коду браузер будує на основі нього DOM-дерево.

Після виконання цієї дії і ряду інших браузер приступає до отрисовке сторінки. У цьому процесі він, звичайно, вже використовує створене ним DOM-дерево, а не вихідний HTML-код.

DOM - це об'єктна модель документа, яку браузер створює в пам'яті комп'ютера на підставі HTML-коду, отриманого ним від сервера.

Якщо сказати по-простому, то HTML-код - це текст сторінки, а DOM - це набір пов'язаних об'єктів, створених браузером при парсінгу її тексту.

У Chrome вихідний код сторінки, який отримує браузер, можна подивитися у вкладці «Source» на панелі «Інструменти веб-розробника».

У Chrome інструменту, за допомогою якого можна було б подивитися створене ним DOM-дерево немає. Але є уявлення цього DOM-дерева у вигляді HTML-коду, воно є на вкладці «Elements». З таким поданням DOM веб-розробнику, звичайно, набагато зручніше працювати. Тому інструменту, який DOM представляв би у вигляді дерева немає.

Об'єкти в цій моделі утворюються практично з усього, що є в HTML (тегів, текстового контенту, коментарів і т.д.), включаючи при цьому сам документ. Зв'язки між цими об'єктами в моделі формуються на підставі того, як HTML-елементи розташовані в коді відносно один одного.

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

Для читання і зміни DOM програмно браузер надає нам DOM API або, іншими словами, програмний інтерфейс. По-простому DOM API - це набір величезної кількості різних об'єктів, їх властивостей і методів, які ми можемо використовувати для читання і зміни DOM.

Для роботи з DOM в більшості випадків використовується JavaScript, тому що на сьогоднішній день це єдина мова програмування, скрипти на якому можуть виконуватися в браузері.

Навіщо нам потрібен DOM API?Він нам потрібен для того, щоб ми могли з допомогою JavaScript змінювати сторінку на «льоту», тобто робити її динамічної і інтерактивної.

DOM API надає нам (розробникам) безліч способів, за допомогою яких ми можемо змінювати все що є на сторінці, а також взаємодіяти з користувачем. Тобто даний програмний інтерфейс дозволяє нам створювати складні інтерфейси, форми, виконувати обробку дій користувачів, додавати і видаляти різні елементи на сторінці, змінювати їх вміст, властивості (атрибути), і багато іншого.

Зараз в інтернеті практично немає сайтів в сценаріях яких була відсутня б робота з DOM.

З чого складається HTML-код сторінки?

Перед тим, як перейти до вивчення об'єктної моделі документа необхідно спочатку згадати, що з себе представляє вихідний код веб-сторінки (HTML-документа).

Вихідний код веб-сторінки складається з тегів, атрибутів, коментарів і тексту. Теги - це базова синтаксична конструкція HTML. Більшість з них є парними. У цьому випадку один з них є відкриває, а інший - що закриває. Одна така пара тегів утворює HTML-елемент. HTML-елементи можуть мати додаткові параметри - атрибути.

У документі для створення певної розмітки одні елементи знаходяться всередині інших. В результаті HTML-документ можна представити як безліч вкладених один в одного HTML-елементів.

Як приклад розглянемо наступний HTML код:

Назва статті

У цьому коді кореневих елементом є html. У нього вкладені елементи head і body. Елемент head містить title, а body - h1 і div. Елемент div в свою чергу містить h2 і p.

Тепер розглянемо, як браузер на підставі HTML-коду будує DOM-дерево.

Як будується DOM-дерево документа?

Як вже було описано вище браузер будує дерево на основі HTML-елементів та інших сутностей вихідного коду сторінки. При виконанні цього процесу він враховує вкладеність елементів один в одного.

В результаті браузер отримане DOM-дерево використовує не тільки в своїй роботі, але також надає нам API для зручної роботи з ним через JavaScript.

При будівництві DOM браузер створює з HTML-елементів, тексту, коментарів та інших сутностей цієї мови об'єкти (вузли DOM-дерева).

У більшості випадків веб-розробників цікавлять тільки об'єкти (вузли), утворені з HTML-елементів.

При цьому браузер не просто створює об'єкти з HTML-елементів, а також пов'язує їх між собою певними зв'язками в залежності від того, як кожен з них відноситься до іншого в коді.

Елементи, які знаходяться безпосередньо в деякому елементі є по відношенню до нього дітьми. А він для кожного з них є батьком. Крім цього, всі ці елементи по відношенню один до одного є сиблингами (братами).

При цьому в HTML будь-який елемент завжди має одного з батьків (HTML-елемент, в якому він безпосередньо розташований). В HTML у елемента не може бути кілька батьків. Виняток становить тільки елемент html. У нього немає батька.

Щоб отримати DOM-дерево так як його будує браузер, необхідно просто «вибудувати» все елементи в залежності від їх ставлення один до одного.

Створення DOM-дерева виконується зверху вниз.

При цьому коренем DOM-дерева завжди є сам документ (вузол document). Далі дерево будується в залежності від структури HTML коду.

Наприклад, HTML-код, який ми розглядали вище матиме наступне DOM-дерево:

У самому верху цього дерева знаходиться вузол document. Даний вузол пов'язаний з html, він є його дитиною. Вузол html утворений елементом html ( ...). Вузли head ( ...) І body ( ...) Мають батьківську зв'язок з html. По відношенню один ту одному вони є сиблингами, тому що мають одного з батьків. Вузол head пов'язаний з title (lt; title> ...), Він є його дитиною. Вузли h1 і div пов'язані з body, для них він є батьком. Вузол div пов'язаний з h2 (

...

Починається дерево як було вже зазначено вище з об'єкта (вузла) document. Він в свою чергу має один дочірній вузол, утворений елементом html ( ...). Елементи head ( ...) І body ( ...) Знаходяться в html і, отже, є його дітьми. Далі вузол head є батьківським для title (lt; title> ...). Елементи h1 і div вкладені в body, значить вони є його дітьми. У div безпосередньо розташовані елементи h2 (

...

Ось так просто будується DOM-дерево в браузері на підставі HTML-коду.

Навіщо потрібно знати, як будується DOM дерево?По-перше, це розуміння того середовища, в якій ви хочете щось змінювати. По-друге, більшість дій при роботі з DOM зводиться до пошуку (вибору) потрібних елементів. Не знаючи як влаштовано DOM-дерево і зв'язку між вузлами знайти якийсь певний елемент в ньому буде досить важко.

завдання

На основі DOM-дерева, представленого на малюнку, створіть HTML-код.

innerHTML
var text = element.innerHTML;
element.innerHTML = "";
Присвоєння нового innerHTML здійснює перезапис коду, навіть якщо нове значення додано до поточного (+ =). Скрипти, додані таким чином, не виконуються.

outerHTML
Містить елемент цілком, змінити його неможливо. Технічно при записі в це властивість створюється новий елемент, який замінює старий. Посилання на старий елемент в змінних не змінюються.

data
textNode.data - вміст текстових вузлів і коментарів

textContent
element.textContent - текст всередині елемента без тегів.
Існує також нестандартне властивість innerText, що має з textContent багато спільного.

видимість елемента

hidden
element.hidden = true
Атрибут hidden не підтримуються в IE11.

атрибути

Більшість стандартних атрибутів в DOM стають властивостями об'єкта:
element.id = "id"
Для нестандартних атрибутів властивість не створюється (undefined)

Можна створювати власні DOM-властивості:
element.myData = (name: "John", lastName: "Smith");
і методи:
element.myFunc = function () (alert this.nodeName);
Це працює, тому що вузли DOM є звичайними JavaScript-об'єктами. Такі нестандартні властивості і методи не впливають на відображення тега і видно тільки в JavaScript.

Доступ до атрибутів тегів:
element.hasAttribute (name)
element.getAttribute (name)
element.setAttribute (name, value)
element.removeAttribute (name)
element.attributes - псевдомассів атрибутів.

Атрибути нечутливі до регістру (html), а властивості чутливі (javaScript).
Значення атрибута - завжди рядок.

Атрибут: a.getAttribute ( "href") - відображає саме те, що в HTML
Властивість: a.href - може відрізняти від значення атрибута
Найчастіше властивість залежить від атрибута, але не навпаки. Зміна властивості не впливає на атрибут.

Робота з класами

Атрибуту class відповідають два властивості:
className - рядок
classList - об'єкт

методи об'єкта classList:
element.classList.contains ( "class") - перевірка, чи містить об'єкт даний клас
element.classList.add ( "class")
element.classList.remove ( "class")
element.classList.toggle ( "class")

classList є псевдомассівом, його можна перебирати через цикл for.

data-атрибути

Призначені для користувача data -атрібути доступні не тільки як атрибути, а й через властивість dataset
data-about = "some value"
element.dataset.about

порядок вузлів

parent.contains (child) - true або false
перевіряє, чи є вузол child вкладеним в parent

nodeA.compareDocumentPosition (nodeB) - надає інформацію про зміст і відносному порядку елементів. Значення, що повертається - побітова маска:

Додавання і видалення вузлів

var div = document.createElement ( "div")
document.createTextNode ( "text")

parent.appendChild (element) - елемент додається в кінець батька
parent.insertBefore (element, nextSibling) - елемент додається перед nextSibling
parent.insertBefore (element, parent.firstChild) - додається в початок
parent.insertBefore (element, null) - спрацює як appendChild
Всі методи вставки повертають вставлений вузол.
При переміщенні елемента не потрібно його попередньо видаляти зі старого місця, методу вставки роблять це автоматично.

element.insertAdjacentHTML (where, html) - вставка довільного HTML-коду в будь-яке місце документа. Where вказує куди слід вставити html по відношенню до element - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement (where, newElement)
element.insertAdjacentText (where, text)
два останніх методу не підтримуються в Firefox

node.append (... nodes) - вставляє nodes в кінець node,
node.prepend (... nodes) - вставляє nodes в початок node,
node.after (... nodes) - вставляє nodes після вузла node,
node.before (... nodes) - вставляє nodes перед вузлом node,
node.replaceWith (... nodes) - вставляє nodes замість node.
тут nodes - це вузли або рядки, в будь-яких кількостях і поєднаннях, перераховані через кому.

var fragment = document.createDocumentFragment () - імітація DOM-вузла, який при вставці в документ зникає, залишаючи тільки своїх нащадків. В сучасних браузерах не рекомендується.

element.cloneNode (true) - глибока копія елемента
element.cloneNode (false) - копія без дочірніх елементів

parent.removeChild (element)
parent.replaceChild (newElement, element)
element.remove () - видаляє елемент безпосередньо, без посилання на батька.
Методи повертають віддалений вузол

Цей розділ представляє коротке знайомство з Об'єктній Моделлю Документа (DOM) - що таке DOM, яким чином надаються структури HTML і XML документів, і як взаємодіяти з ними. Даний розділ містить довідкову інформацію та приклади.

Що таке Об'єктна Модель Документа (DOM)?

Об'єктна Модель Документа (DOM) - це програмний інтерфейс (API) для HTML і XML документів. DOM надає структуроване уявлення документа і визначає те, як ця структура може бути доступна з програм, які можуть змінювати вміст, стиль і структуру документа. Подання DOM складається з структурованої групи вузлів і об'єктів, які мають властивості і методи. По суті, DOM з'єднує веб-сторінку з мовами опису сценаріїв або мовами програмування.

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

Яким чином доступний DOM?

Ви не повинні робити нічого особливого для роботи з DOM. Різні браузери мають різну реалізацію DOM, ці реалізації показують різну ступінь соответсвия з дійсним стандартом DOM (це тема, яку ми намагалися не зачіпати в даній документації), але кожен браузер використовує свій DOM, щоб зробити веб сторінки доступними для взаімодествія з мовами сценаріїв.

При створенні сценарію з використанням елементу

результат

Тестуємо властивість tagName

innerHTML

З цією властивістю ми вже зустрічалися (див. Урок 10). А тепер розуміємо, звідки воно взялося: «з дому».

Дає доступ до вмісту елементу. Задає не тільки текстовий зміст, а й все теги HTML, що знаходяться всередині елемента.

Це властивість не тільки для читання, а й для зміни вмісту.

Примітка

В IE для ряду елементів innerHTMLпрацює тільки для читання: це все табличні елементи, за винятком і , а також

Це HTML-документ

приклад простоготексту.

DOM-уявлення цього документа наводиться на наступній діаграмі:

Тим, хто ще не знайомий з деревоподібними структурами в комп'ютерному програмуванні, корисно дізнатися, що термінологія для їх опису була запозичена у генеалогічних дерев. Вузол, розташований безпосередньо над цим вузлом, називається батьківськимпо відношенню до даного вузла. Вузли, розташовані на один рівень нижче іншого вузла, є дочірнімипо відношенню до даного вузла. Вузли, що знаходяться на тому ж рівні і мають того ж батька, називаються сестринськими. Вузли, розташовані на будь-яке число рівнів нижче іншого вузла, є його нащадками. Батьківські, прабатьківські і будь-які інші вузли, розташовані вище даного вузла, є його предками.

Кожен прямокутник на цій діаграмі є вузлом документа, який представлений об'єктом Node. Зверніть увагу, що на малюнку зображено три різних типи вузлів. Коренем дерева є вузол Document, який представляє документ цілком. Вузли, що представляють HTML-елементи, є вузлами типу Element, а вузли, що представляють текст, - вузлами типу Text. Document, Element і Text - це підкласи класу Node. Document і Element є двома найважливішими класами в моделі DOM.

Тип Node і його підтипи утворюють ієрархію типів, зображену на діаграмі нижче. Зверніть увагу на формальні відмінності між узагальненими типами Document і Element, і типами HTMLDocument і HTMLElement. Тип Document представляє HTML і XML-документ, а клас Element представляє елемент цього документа. Підкласи HTMLDocument і HTMLElement представляють конкретно HTML-документ і його елементи:

На цій діаграмі слід також відзначити наявність великої кількості підтипів класу HTMLElement, що представляють конкретні типи HTML-елементів. Кожен з них визначає JavaScript-властивості, що відображають HTML-атрибути конкретного елемента або групи елементів. Деякі з цих специфічних класів визначають додаткові властивості або методи, які не є відображенням синтаксису мови розмітки HTML.

Вибір елементів документа

Робота більшості клієнтських програм на мові JavaScript так чи інакше пов'язана з маніпулюванням елементами документа. В ході виконання ці програми можуть використовувати глобальну змінну document, що посилається на об'єкт Document. Однак, щоб виконати будь-які маніпуляції з елементами документа, програма повинна якимось чином отримати, або вибрати, об'єкти Element, що посилаються на ці елементи документа. Модель DOM визначає кілька способів вибірки елементів. Вибрати елемент або елементи документа можна:

за значенням атрибута id;

за значенням атрибута name;

по імені тега;

по імені класу або класів CSS;

за випадковим збігом з певним селектором CSS.

Всі ці прийоми вибірки елементів описуються в наступних підрозділах.

Вибір елементів за значенням атрибута id

Всі HTML-елементи мають атрибути id. Значення цього атрибута повинно бути унікальним в межах документа - ніякі два елементи в одному і тому ж документі не повинні мати однакові значення атрибута id. Вибрати елемент за унікальним значенням атрибута id можна за допомогою методу getElementById ()об'єкта Document:

Var section1 = document.getElementById ( "section1");

Це найпростіший і найпоширеніший спосіб вибірки елементів. Якщо сценарієм необхідно мати можливість маніпулювати якимось певним безліччю елементів документа, надайте значення атрибутам id цих елементів і використовуйте можливість їх пошуку за цими значеннями.

У версіях Internet Explorer нижче IE8 метод getElementById () виконує пошук значень атрибутів id без урахування регістру символів і, крім того, повертає елементи, в яких буде знайдено збіг зі значенням атрибута name.

Вибір елементів за значенням атрибута name

HTML-атрибут name спочатку призначався для присвоювання імен елементам форм, і значення цього атрибута використовувалося, коли виконувалася відправка даних форми на сервер. Подібно атрибуту id, атрибут name привласнює ім'я елементу. Однак, на відміну від id, значення атрибута name повинно бути унікальним: одне і те ж ім'я можуть мати відразу кілька елементів, що цілком зазвичай при використанні в формах радіокнопок і прапорців. Крім того, на відміну від id, атрибут name допускається вказувати лише в деяких HTML-елементах, включаючи форми, елементи форм і елементи