Об'єктна модель документа

HTML

РћР±'єктна Р�одель РґРѕРєСѓР�ента (англ. Document Object Model, DOM) вЂ” специфікація прикладного РїСЂРѕРіСЂР°Р�РЅРѕРіРѕ інтерфейсу для роботи Р·С– структурованиР�Рё РґРѕРєСѓР�ентаР�Рё (СЏРє правило, РґРѕРєСѓР�ентаР�Рё XML). Визначається ця специфікація консорціуР�РѕР� W3C.

З точки зору об'єктноорієнтованого програ�ування, DOM визначає класи, �етоди та атрибути цих �етодів для аналізу структури доку�ентів та роботи із представлення� доку�ентів у вигляді дерева. Все це призначено для того, аби надати �ожливість ко�п'ютерній програ�і доступу та дина�ічної �одифікації структури, з�істу та офор�лення доку�ента.[1][2]

Разо� із поширення� та розвитко� вебтехнологій і вебпереглядачів почали з'являтись різні, часто несу�існі інтерфейси роботи із HTML доку�ента�и в інтерпретаторах JavaScript, вбудованих у вебпереглядачі. Це спонукало World Wide Web Consortium (W3C) узгодити та визначити низку стандартів, які отри�али назву W3C Document Object Model (W3C DOM). Специфікації W3C не залежать від платфор�и або �ови програ�ування.

Через те, що структура доку�ента представляється у вигляді дерева, повний з�іст доку�ента аналізується та зберігається в па�'яті ко�п'ютера. То�у, DOM підходить для застосувань в програ�ах, які ви�агають багаторазовий доступ до еле�ентів доку�ента в довільно�у порядку. В разі, якщо треба лише послідовний або одноразовий доступ до еле�ентів доку�ента, реко�ендується, для пришвидшення перероблення та з�еншення обсягів необхідної па�'яті ко�п'ютера, використовувати послідовну �одель роботи зі структуровани�и доку�ента�и (SAX).

Стандарти DOM

WHATWG DOM

Починаючи з 1998 року DOM визнається стандарто� W3C. Відтоді, його було багаторазово розширено та вдосконалено. Існують кілька версій DOM, які отри�али назву рівнів (англ. Level). Кожен рівень складається із декількох обов'язкових та необов'язкових �одулів. Для того, щоб стверджувати про підтри�ку DOM певного рівня, програ�а �ає задовольняти всі� ви�ога� стандарту DOM заявленого рівня, та всі� ви�ога� нижчих рівнів. Також, реалізація інтерфейсу �оже підтри�увати певні розширення, якщо вони не суперечать ви�ога� стандарту. У 2005 році, рівні 1 та 2 (Level 1, Level 2) та деякі �одулі 3-го рівня (Level 3) було визнано як W3C Recommendation, що означає, що вони набули кінцевої фор�и.

Level 0
Не було стандартизовано, став основою для появи DOM Level 1. Як приклад �ожна навести DHTML Object Model, або реалізацію DOM в вебпереглядачах Netscape ранніх версій.
Level 1
Обхід структури (дерева) доку�ента (HTML та XML), та �одифікація з�істу (включаючи додавання еле�ентів). Також включаються специфічні еле�енти HTML.
Level 2
Підтри�ка просторів і�ен XML, фільтрованих представлень та подій.
Level 3
Складається із 6 різних специфікацій:
  1. DOM Level 3 Core;
  2. DOM Level 3 Load and Save;
  3. DOM Level 3 XPath;
  4. DOM Level 3 Views and Formatting;
  5. DOM Level 3 Requirements;
  6. DOM Level 3 Validation.

Реалізація DOM у веббраузерах

Враховуючи суттєві чинні від�інності у реалізації DOM у веббраузерах, серед програ�істів розповсюджена звичка перевіряти дієздатність тих чи інших �ожливостей DOM для кожного з браузерів, і тільки поті� використовувати їх. Код нижче ілюструє �ожливість перевірки стандартів W3CDOM перед ти� як запускати код, що залежить від результату перевірки. 

if (document.getElementById && document.getElementsByTagName) {
    // якщо �етоди getElementById та getElementsByTagName
    // існують, то �ожна з �айже впевнено сподіватись на підтри�ку W3CDOM.

    obj = document.getElementById("navigation")
    // далі йде інший код з використання� �ожливостей W3CDOM.
    // .....
}

Ще один фраг�ент коду JavaScript, що дозволяє перевірити заявлену підтри�ку різних доповнень DOM у відповідно�у браузері. 

<html>
<head>
<title>Test DOM Implementation</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
function domImplementationTest() {
  var featureArray = ['HTML', 'XML', 'Core', 'Views',
            'StyleSheets', 'CSS', 'CSS2', 'Events',
            'UIEvents', 'MouseEvents', 'HTMLEvents',
            'MutationEvents', 'Range', 'Traversal'];
  var versionArray = ['1.0', '2.0', '3.0'];
  var i;
  var j;
  if (document.implementation && document.implementation.hasFeature){
    document.write('<table border="1" cellpadding="2" style="border-collapse:collapse;">');
    
    // header of table 
    document.write('<tr>');
    document.write('<td>' + 'Підтри�ка доповнення ' + '</td>')
    for (j = 0; j < versionArray.length; j++) {
      document.write('<td>'+ 'версія ' + versionArray[j] + '</td>');
    }
    document.write('</tr>');
    
    // content of table
    for (i = 0; i < featureArray.length; i++){
      document.write('<tr>');
      document.write('<td>' + featureArray[i] + '</td>');

      for (j = 0; j < versionArray.length; j++) {
        var res = document.implementation.hasFeature(featureArray[i], versionArray[j]);
        document.write('<td style="background-color:' + (res ? 'blue' : 'red') + '; color:white;">'+ res + '</td>');
      }
      
      document.write('</tr>');
    }
    
    document.write('</table>');
  }
}
</script>
</head>
<body>
<h1>Перевірка доповнень DOM</h1>

<script type="text/javascript">
  domImplementationTest();
</script>

</body>
</html>

Модель доку�ента

Приклад відображення фраг�енту DOM дерева HTML доку�ента в програ�і DOM Inspector із Mozilla Suite

Після аналізу структурованого доку�ента, будується його представлення у вигляді дерева. Дерево, в �оделі DOM, складається із �ножини зв'язних вузлів (Node) різних типів. Як правило, розрізняють вузли наступних типів:

  • ДокуРС�ент (Document) вЂ” РєРѕСЂС–РЅСЊ дерева, представляє цілий РґРѕРєСѓРС�ент.
  • ФрагРС�ент РґРѕРєСѓРС�ента (DocumentFragment) вЂ” РІСѓР·РѕР», СЏРєРёР№ С” коренеРС� піддерева РѕСЃРЅРѕРІРЅРѕРіРѕ РґРѕРєСѓРС�ента.
  • ЕлеРС�ент (Element) вЂ” представляє РѕРєСЂРµРС�РёР№ елеРС�ент HTML або XML РґРѕРєСѓРС�ента.
  • Атрибут (Attr) вЂ” представляє атрибут елеРС�ента.
  • Текст (Text) вЂ” представляє текстові дані, СЏРєС– Р С�істяться Р Р† елеРС�енті або атрибуті.

Стандарто� визначаються і деякі інші типи вузлів у �оделі доку�ента.

Вузли деяких типів �ожуть �ати гілки, інші ж �ожуть бути лише листа�и дерева. Спеціальні �етоди об'єктів вузлів дають �ожливість обходу дерева.

Специфікації

Див. також

  • DOM Events
  • SAX вЂ” Набір API для послідовної РѕР±СЂРѕР±РєРё структурованих РґРѕРєСѓРС�ентів.

Посилання

Попередній перегляд при�іток

  1. � Document Object Model (DOM): definition, structure and example. IONOS Digital Guide (англ.). Процитовано 27 січня 2023.
  2. � DOM Standard. dom.spec.whatwg.org. Процитовано 27 січня 2023.