Что такое dom и зачем он нужен?

Классификация типов, содержимого и функций DOCUMENT OBJECT MODEL

В рамках стандарта DOM выделяют три вида объектной модели документа:


  1. Основная DOM – обычная модель для всех видов документов
  2. XML-DOM – адаптированная для XML-документов модель объектного представления
  3. HTML-DOM – то же для HTML.

Объектная модель документа выполняет важную задачу по регуляции взаимодействия между HTML-объектами. Для этого она определяет некоторые термины HTML в рамках стандартов ООП:

  1. Сами HTML-элементы получают роль объектов
  2. Атрибуты HTML-элементов получают роль свойств объектов
  3. Регламентируются методы для доступа к объектам
  4. Регламентируются события, возникающие при взаимодействии пользователя или веб-программы с объектами.

Исходя из этого, можно составить примерный список того, что можно реализовать в рамках DOM, этот список довольно обширен.

С помощью объектной модели документа программист может наделить своё веб-приложение следующими функциями:

  1. JavaScript-приложение сможет добавить на страницу новые HTML-элементы и свойства к ним или к уже существующим объектам.
  2. Приложение сможет удалить или изменить уже существующие HTML-элементы или отдельные их свойства.
  3. JavaScript-приложение сможет создать новые события при объектах и отслеживать их.
  4. После чего оно сможет отреагировать запуском того или иного метода в ответ на произошедшее событие.
  5. Веб-приложение также может изменить стиль веб-страницы.

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

JS Учебник

JS ГлавнаяJS ВведениеJS УстановкаJS ВыводJS СинтаксисJS ЗаявленияJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS ОбластьJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS ДатыJS Формат датыJS Метод получения датJS Методы набора…JS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОтладчикJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS JSON

Дочерние узлы и значения узлов

Распространенной ошибкой при обработке DOM является ожидание, что узел элемента будет содержать текст.

Пример:

<title id=»demo»>DOM Учебник</title>

Элемент узела (в приведенном выше примере) не содержит текста.

Он содержит текстовый узел со значением «DOM Учебник».

Значение текстового узла может быть доступно с помощью узла свойства :

var myTitle = document.getElementById(«demo»).innerHTML;

Доступ к свойству аналогичен доступу к первого дочернего объекта:

var myTitle = document.getElementById(«demo»).firstChild.nodeValue;

Доступ к первому ребенку также можно сделать следующим образом:

var myTitle = document.getElementById(«demo»).childNodes.nodeValue;

Все следующие примеры (3) извлекают текст элемента и копируют его в элемент :

Пример

<html> <body><h1 id=»id01″>Моя первая страница</h1> <p id=»id02″></p> <script> document.getElementById(«id02»).innerHTML = document.getElementById(«id01»).innerHTML; </script> </body> </html>

Пример

<html> <body><h1 id=»id01″>Моя первая страница</h1><p id=»id02″></p> <script> document.getElementById(«id02»).innerHTML = document.getElementById(«id01»).firstChild.nodeValue; </script> </body> </html>

Пример

<html> <body><h1 id=»id01″>My First Page</h1><p id=»id02″>Hello!</p> <script> document.getElementById(«id02»).innerHTML = document.getElementById(«id01»).childNodes.nodeValue; </script> </body> </html>

Узел связи

Узлы в дереве узлов имеют иерархическое отношение друг к другу.


Для описания отношений используются термины родитель, ребенок и брат.

  • В дереве узлов верхний узел называется корневым (или корневым узлом)
  • Каждый узел имеет ровно одного родителя, кроме корня (который не имеет родителя)
  • Узел может иметь несколько дочерних узлов
  • Братья и сестры — это узлы с одним и тем же родителем.

<html>   <head>     <title>DOM Учебник</title>   </head>  <body>     <h1>DOM Урок первый</h1>     <p>Привет, мир!</p>   </body></html>

Из HTML выше вы можете прочитать:

  • является корневым узлом
  • не имеет родителей
  • является родителем и
  • является первым ребенком
  • является последним ребенком

и:

  • иметь одного ребенка:
  • имеет одного ребенка (текстовый узел): «DOM Учебник»
  • иметь двоих детей: и
  • иметь одного ребенка: «DOM Урок первый»
  • иметь одного ребенка: «Привет, мир!»
  • и есть братья и сестры

История применения DOM и его современное состояние

DOM как объектная модель документа возник в 1995 году, во время острой конкурентной борьбы между двумя веб-браузерами – Internet Explorer и Netscape Navigator. Netscape Navigator проиграл, однако сейчас уже и Internet Explorer не столь широко представлен на рынке, как всего ещё пять лет назад.

Во время этой борьбы Document Object Model постепенно изменялась, и к 2005 году произошла почти полная стандартизация DOM компанией W3C, начавшаяся ещё в 1998 году. Современные браузеры поддерживают все основные функции DOM.

Перед тем, как разрабатывать веб-приложение, использующее редкие возможности DOM (например, обращение к объектам с помощью коллекций, в частности — нестандартной коллекции all), лучше будет добавить туда проверку во время загрузки приложения. Эта проверка с помощью специальных скриптов покажет, поддерживает ли браузер все те опции, которые вы собираетесь использовать.

Из чего состоит DOM?

DOM — это объектное представление исходного HTML-документа. Он имеет некоторые различия, как мы увидим ниже, но по сути это попытка преобразовать структуру и содержание документа HTML в объектную модель, которая может использоваться различными программами.

Структура объектов DOM представлена тем, что называется «деревом узлов». Оно так называется, потому что его можно рассматривать как дерево с одним родительским элементом, который разветвляется на несколько дочерних ветвей, каждая из которых может иметь листья. В этом случае родительский «элемент» — это корневой элемент , дочерние «ветви» — это вложенные элементы, а «листья» — это содержимое внутри элементов.

Давайте рассмотрим этот HTML-документ в качестве примера:

<!doctype html>
<html lang="en">
 <head>
   <title>My first web page</title>
  </head>
 <body>
    <h1>Hello, world!</h1>
    <p>How are you?</p>
  </body>
</html>

Этот документ может быть представлен в виде следующего дерева узлов:

  • html
    • head
      • title
    • body
      • h1
      • p

Чем DOM не является

В приведенном выше примере кажется, что DOM является отображением 1: 1 исходного HTML-документа. Однако, как я уже говорил, есть различия. Чтобы полностью понять, что такое DOM, нам нужно взглянуть на то, чем он не является.

DOM не является копией исходного HTML

Хотя DOM создан из HTML-документа, он не всегда точно такой же. Есть два случая, в которых DOM может отличаться от исходного HTML.

1. Когда HTML содержит ошибки разметки

DOM — это интерфейс доступа к действительных (то есть уже отображаемым) элементам документа HTML. В процессе создания DOM, браузер сам может исправить некоторые ошибки в коде HTML.

Рассмотрим в качестве примера этот HTML-документ:

<!doctype html>
<html>
Hello, world!
</html>

В документе отсутствуют элементы    и   , что является обязательным требованием для HTML. Но если мы посмотрим на получившееся дерево DOM, то увидим, что это было исправлено:

  • html
    • head
    • body
      • Hello, world!

2. Когда DOM модифицируется кодом Javascript


Помимо того, что DOM является интерфейсом для просмотра содержимого документа HTML, он сам также может быть изменен.

Мы можем, например, создать дополнительные узлы для DOM, используя Javascript.

var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);

Этот код изменит DOM, но изменения не отобразятся в документе HTML .

DOM — это не то, что вы видите в браузере (то есть, дерево рендеринга)

В окне просмотра браузера вы видите дерево рендеринга, которое, как я уже говорил, является комбинацией DOM и CSSOM. Чем отличается DOM от дерева рендеринга, так это то, что последнее состоит только из того, что в конечном итоге будет отображено на экране.

Поскольку дерево рендеринга имеет отношение только к тому, что отображается, оно исключает элементы, которые визуально скрыты. Например, элементы, у которых есть стили с display: none.

<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>

DOM будет включать элемент :

  • html
    • head
    • body
      • h1
      • p

Однако дерево рендеринга и, следовательно, то, что видно в окне просмотра, не будет включено в этот элемент.

  • html
    • body
      • h1

DOM — это не то, что отображается в DevTools

Это различие немного меньше, потому что инспектор элементов DevTools обеспечивает самое близкое приближение к DOM, которое мы имеем в браузере. Однако инспектор DevTools содержит дополнительную информацию, которой нет в DOM.

Лучший пример этого — псевдоэлементы CSS. Псевдоэлементы, созданные с использованием селекторов ::before и ::after, являются частью CSSOM и дерева рендеринга, но технически не являются частью DOM. Это связано с тем, что DOM создается только из исходного HTML-документа, не включая стили, примененные к элементу.

Несмотря на то, что псевдоэлементы не являются частью DOM, они есть в нашем инспекторе элементов devtools.

Базовая информация о свойствах, методах и объектах в рамках DOM

Эта концепция, которая является одной из базовых в объектно-ориентированном программировании, почти ничем не отличается от подобных аналогов в других отраслях IT. В данном конкретном случае под методами подразумеваются те действия, которые можно совершить над объектами (в том числе и с целью получить ту или иную информацию от них), а свойства – это значения атрибутов тех или иных HTML-элементов на странице.

Базовым объектом для DOM является Документ  – это вся веб-страница со всем её содержимым. Этот объект содержит три самых важных метода для поиска элементов:

  1. getElementByID. Эта функция принимает на вход параметр ID, обозначающий идентификатор объекта, который требуется найти.
  2. getElementsByTagName. Эта функция находит массив объектов определённого типа. На вход она принимает строковое значение тэга, по которому будет производиться фильтрация объектов.
  3. getElementsByClassName. Эта функция находит массив объектов определенного класса. Класс элемента, в отличие от тэга, устанавливается создателем веб-страницы, что предоставляет программисту практически неограниченные возможности по классификации объектов.

Кроме функций для поиска, объект Документ (как, впрочем, и все его дочерние объекты) содержит методы и свойства для управления объектами.

  1. Свойство innerHTML – позволяет получать и изменять полностью всё содержимое, лежащее между открывающим и закрывающим тегами найденного объекта.
  2. setAttribute – эта функция позволяет присвоить некоторому свойству объекта определённое значение. Принимает на вход название свойства и значение.
  3. Write – эта функция позволяет записать данные в основной поток (поверх готового документа).
  4. Семейство функций Child (а именно, appendChild, replaceChild, removeChild) – позволяет управлять дочерними объектами.
  5. Функция CreateElement – создаёт новый HTML-элемент.

Также конкретно объект Документ содержит целый ряд служебных свойств, которые позволяют получить важные данные о веб-странице:

  1. Anchors – якоря на странице (ссылки на конкретную часть страницы)
  2. Applets – места для дополнительных расширений
  3. baseURI – адрес документа
  4. body – всё, что написано в теге Body
  5. cookie – получает куки документа
  6. doctype – получает тип документа
  7. head – всё, что написано в служебной части документа
  8. forms, images, links, scripts – получает соответственно массивы форм, картинок и ссылок (в том числе визуальных), скриптов.
  9. Title – заглавие документа
  10. Readystate – состояние готовности документа
  11. Inputencoding – кодировка документа

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Узлы типа DOMNodelist

Вам нужно помнить, что коллекции всех элементов документа и их дочерних элементов составляют собой особый тип, не являющийся типичным JavaScript-массивом.

Это может быть не совсем понятно для начинающих программистов. Тем не менее с опытом приходит понимание основного различия. Оно начинается тогда, когда появляется необходимость удалить тот или иной элемент из списка.

Представим, что нам необходимо очистить коллекцию. Изначально она выглядит так:

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент
  4. Четвёртый элемент

Мы составили простейший скрипт, удаляющий по очереди каждый элемент. Но после его запуска, список выглядит так:

  1. Второй элемент
  2. Четвёртый элемент

Это произошло потому, что после удаления первого элемента второй элемент сразу же, ещё до окончания цикла, стал первым. А третий, соответственно, вторым, и в рамках того же цикла удалился. На его место тут же встал четвёртый. Понадобится ещё два раза запустить цикл, чтобы удалить действительно все элементы, либо переписать скрипт таким образом, чтобы он удалял первый элемент до тех пор, пока коллекция не опорожнится.

Document Object Properties and Methods

The following properties and methods can be used on HTML documents:

Property / Method Description
activeElement Returns the currently focused element in the document
addEventListener() Attaches an event handler to the document
adoptNode() Adopts a node from another document
anchors Returns a collection of all <a> elements in the document that have a name attribute
applets Returns a collection of all <applet> elements in the document
baseURI Returns the absolute base URI of a document
body Sets or returns the document’s body (the <body> element)
close() Closes the output stream previously opened with document.open()
cookie Returns all name/value pairs of cookies in the document
charset Deprecated. Use characterSet instead. Returns the character encoding for the document
characterSet Returns the character encoding for the document
createAttribute() Creates an attribute node
createComment() Creates a Comment node with the specified text
createDocumentFragment() Creates an empty DocumentFragment node
createElement() Creates an Element node
createEvent() Creates a new event
createTextNode() Creates a Text node
defaultView Returns the window object associated with a document, or null if none is available.
designMode Controls whether the entire document should be editable or not.
doctype Returns the Document Type Declaration associated with the document
documentElement Returns the Document Element of the document (the <html> element)
documentMode Returns the mode used by the browser to render the document
documentURI Sets or returns the location of the document
domain Returns the domain name of the server that loaded the document
domConfig Obsolete. Returns the DOM configuration of the document
embeds Returns a collection of all <embed> elements the document
execCommand() Invokes the specified clipboard operation on the element currently having focus.
forms Returns a collection of all <form> elements in the document
fullscreenElement Returns the current element that is displayed in fullscreen mode
fullscreenEnabled() Returns a Boolean value indicating whether the document can be viewed in fullscreen mode
getElementById() Returns the element that has the ID attribute with the specified value
getElementsByClassName() Returns a HTMLCollection containing all elements with the specified class name
getElementsByName() Returns a HTMLCollection containing all elements with a specified name
getElementsByTagName() Returns a HTMLCollection containing all elements with the specified tag name
hasFocus() Returns a Boolean value indicating whether the document has focus
head Returns the <head> element of the document
images Returns a collection of all <img> elements in the document
implementation Returns the DOMImplementation object that handles this document
importNode() Imports a node from another document
inputEncoding Returns the encoding, character set, used for the document
lastModified Returns the date and time the document was last modified
links Returns a collection of all <a> and <area> elements in the document that have a href attribute
normalize() Removes empty Text nodes, and joins adjacent nodes
normalizeDocument() Removes empty Text nodes, and joins adjacent nodes
open() Opens an HTML output stream to collect output from document.write()
querySelector() Returns the first element that matches a specified CSS selector(s) in the document
querySelectorAll() Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document
readyState Returns the (loading) status of the document
referrer Returns the URL of the document that loaded the current document
removeEventListener() Removes an event handler from the document (that has been attached with the addEventListener() method)
renameNode() Renames the specified node
scripts Returns a collection of <script> elements in the document
strictErrorChecking Sets or returns whether error-checking is enforced or not
title Sets or returns the title of the document
URL Returns the full URL of the HTML document
write() Writes HTML expressions or JavaScript code to a document
writeln() Same as write(), but adds a newline character after each statement

Изменение содержимого HTML

Самый простой способ изменить содержимое HTML элемента — это использовать свойство .

Чтобы изменить содержимое HTML элемента, используйте следующий синтаксис:

document.getElementById(id).innerHTML = новый HTML

В этом примере изменяется содержание элемента :

Пример

<html> <body> <p id=»p1″>Привет мир!</p> <script> document.getElementById(«p1»).innerHTML = «Новый текст!»; </script> </body> </html>

Объясненный пример:

  • Приведенный выше HTML документ содержит элемент с
  • Мы используем HTML DOM, чтобы получить элемент с помощью
  • JavaScript изменяет содержимое () этого элемента, на «Новый текст!»

Этот пример изменяет содержание элемента :

Пример

<!DOCTYPE html><html> <body> <h1 id=»id01″>Старый заголовок</h1> <script> var element = document.getElementById(«id01»);element.innerHTML = «Новый заголовок»; </script> </body> </html>

Объясненный пример:

  • Приведенный выше HTML документ содержит элемент с
  • Мы используем HTML DOM, чтобы получить элемент с помощью
  • JavaScript изменяет содержимое () этого элемента, на «Новый заголовок»

Значение слова Дом по словарю Ушакова:

ДОМдома, из дому и из дома, мн. дома (домы устар.), м. 1. Жилое здание, соение. Деревянный дом. Шестиэтажный каменный дом. дома новы, но предрассудки стары. Грибоедов. Мне жаль, что домы наши новы. Пушкин. || собир. Жильцы какого-н. дома. весь дом сбежался на крик. 2. Жилое помещение, квартира. Вам из дому звонили. Выгнать из дома или из дому. || Семья, люди, живущие вместе, одним хозяйством. В гости всем домом пошли. || Хозяйство отдельной семьи. Она весь дом ведет. Богатый дом. Хлопотать по дому. трудящихся или отдельного круга лиц, помещающееся обычно в отдельном здании (нов. офиц.). Дом крестьянина. Дом искусств. Дом Красной армии. Дом писателя. Дом культуры. Дом книги. Дом отдыха (учреждение для отдыха трудящихся). Детский дом (закрытое учебно-воспитательное учреждение для детей). || учреждение, имеющее культурное значение и посвященное памяти какого-н. исторического деятеля или события (офиц.). Дом Герцена (учреждение московских писательских организаций). Пушкинский дом (название Института русской литературы при Академии Наук СССР). 5. Заведение, предприятие. Торговый дом. Банкирский дом. публичный дом (см. публичный). Дом терпимости (см. терпимость). Питейный дом (кабак).Игорный дом. Желтый дом. (см. желтый). Сумасшедший дом. 6. В детских играх, основанных на преследовании (пятнашки, прятки и др.) — место, где по правилам игры нельзя преследовать. Отказать от дома кому (устар.) — перестать принимать, просить больше не приходить. Принять в дом кого (устар.) — включить в число своей семьи. На дом — к себе домой. Брать работу на дом. На дому — у себя дома. Врач принимает на дому. белый дом — см. белый.

The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

The HTML DOM Tree of Objects

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page

Выводы

Объектная модель документа (DOM) предоставляет программисту целый ряд возможностей, которые очень важны для работы с объектами веб-страницы. Главное — помнить об особенностях данной модели и знать основы объектно-ориентированного программирования.

Модель DOM является важнейшим компонентом современного сайтостроения. Без знания принципов работы DOM невозможно создавать эффективные интерактивные сайты, удобные для пользователя.

А после создания современного сайта со множеством функций, реализованных благодаря следованию стандартам объектной модели документа, крайне важно обеспечить бесперебойный доступ пользователей к нему. Для персональных сайтов или небольших проектов подойдет виртуальный хостинг

Крупные порталы имеет смысл размещать на виртуальных или выделенных серверах. Студиям веб-разработки, предоставляющим весь спектр услуг — от дизайна до хостинга, могут быть интересны реселлерские программы от ATLEX.Ru.


С этим читают