Dom html что это
Что такое DOM?
Объектная модель документа, или «DOM», является программным интерфейсом доступа к элементам веб-страниц. По сути, это API страницы, позволяющий читать и манипулировать содержимым, структурой и стилями страницы. Давайте разберемся как это устроено и как это работает.
Как строится веб-страница?
Процесс преобразования исходного HTML-документа в отображаемую стилизованную и интерактивную страницу, называется “Critical Rendering Path”(«Критическим путем рендеринга»). Хотя этот процесс можно разбить на несколько этапов, как я описал это в статье «Понимание критического пути рендеринга», эти этапы можно условно сгруппировать в два этапа. В первом браузер анализирует документ, чтобы определить, что в конечном итоге будет отображаться на странице, а во второй браузер выполняет рендеринг.
Результатом первого этапа является то, что называется “render tree”(«дерево рендеринга»). Дерево рендеринга — это представление элементов HTML, которые будут отображаться на странице, и связанных с ними стилей. Чтобы построить это дерево, браузеру нужны две вещи:
Из чего состоит DOM?
DOM — это объектное представление исходного HTML-документа. Он имеет некоторые различия, как мы увидим ниже, но по сути это попытка преобразовать структуру и содержание документа HTML в объектную модель, которая может использоваться различными программами.
Давайте рассмотрим этот HTML-документ в качестве примера:
Этот документ может быть представлен в виде следующего дерева узлов:
Чем DOM не является
В приведенном выше примере кажется, что DOM является отображением 1: 1 исходного HTML-документа. Однако, как я уже говорил, есть различия. Чтобы полностью понять, что такое DOM, нам нужно взглянуть на то, чем он не является.
DOM не является копией исходного HTML
Хотя DOM создан из HTML-документа, он не всегда точно такой же. Есть два случая, в которых DOM может отличаться от исходного HTML.
1. Когда HTML содержит ошибки разметки
DOM — это интерфейс доступа к действительных (то есть уже отображаемым) элементам документа HTML. В процессе создания DOM, браузер сам может исправить некоторые ошибки в коде HTML.
Рассмотрим в качестве примера этот HTML-документ:
2. Когда DOM модифицируется кодом Javascript
Помимо того, что DOM является интерфейсом для просмотра содержимого документа HTML, он сам также может быть изменен.
Мы можем, например, создать дополнительные узлы для DOM, используя Javascript.
DOM — это не то, что вы видите в браузере (то есть, дерево рендеринга)
В окне просмотра браузера вы видите дерево рендеринга, которое, как я уже говорил, является комбинацией DOM и CSSOM. Чем отличается DOM от дерева рендеринга, так это то, что последнее состоит только из того, что в конечном итоге будет отображено на экране.
Поскольку дерево рендеринга имеет отношение только к тому, что отображается, оно исключает элементы, которые визуально скрыты. Например, элементы, у которых есть стили с display: none.
DOM будет включать элемент
Однако дерево рендеринга и, следовательно, то, что видно в окне просмотра, не будет включено в этот элемент.
DOM — это не то, что отображается в DevTools
Это различие немного меньше, потому что инспектор элементов DevTools обеспечивает самое близкое приближение к DOM, которое мы имеем в браузере. Однако инспектор DevTools содержит дополнительную информацию, которой нет в DOM.
Лучший пример этого — псевдоэлементы CSS. Псевдоэлементы, созданные с использованием селекторов ::before и ::after, являются частью CSSOM и дерева рендеринга, но технически не являются частью DOM. Это связано с тем, что DOM создается только из исходного HTML-документа, не включая стили, примененные к элементу.
Несмотря на то, что псевдоэлементы не являются частью DOM, они есть в нашем инспекторе элементов devtools.
Резюме
DOM — это интерфейс к HTML-документу. Он используется браузерами как первый шаг к определению того, что визуализировать в окне просмотра, и кодом Javascript для изменения содержимого, структуры или стиля страницы.
Хотя DOM похож на другие формы исходного документа HTML, он отличается по ряду причин:
Dom html что это
DOM — это объектная модель документа, которую браузер создает в памяти компьютера на основании HTML-кода, полученного им от сервера. Иными словами, это представление HTML-документа в виде дерева тегов.
Браузер запрашивает у сервера веб-страницу и получает в ответ ее исходный HTML-код. Браузеру такой код сначала нужно разобрать на элементы. В процессе разбора он строит на основе HTML-кода DOM-дерево. После этого браузер отрисовывает страницу, используя созданное им DOM-дерево, а не исходный HTML-документ.
Такое дерево нужно для правильного отображения сайта и внесения изменений на страницах с помощью JavaScript. JavaScript — это «живой» язык, он может изменять страницу в реальном времени уже после того, как она «пришла» с сервера в браузер. Этим JavaScript принципиально отличается от PHP, который компилирует страницу и только потом посылает в браузер уже готовый HTML-код.
Для чтения и изменения DOM браузеры предоставляют DOM API (программный интерфейс). DOM API — это набор различных объектов, которые разработчик использует для чтения и изменения DOM с помощью JavaScript.
Из чего состоит HTML-код страницы
Страница на HTML состоит из тегов, вложенных в друг друга. Самый общий тег — это HTML. В него вкладываются два дочерних тега head и body.
Тег head используется для подключения информации, которая не будет отображаться непосредственно на странице, но будет использоваться для подключения важных файлов. Тут бывает, например, подключение одного или нескольких CSS-файлов, подключенные шрифты, название сайта, язык, кодировка, скрипты, которые должны выполняться в первую очередь, иконка сайта или базовый фон.
В body находится значимое содержимое. Обычно в body выделяют три части: шапка сайта, основное содержимое и подвал. В шапке обычно содержится верхнее меню сайта, за это отвечает тег header. Для содержимого нет определенного тега, но обычно используется section. Для подвала используется footer, там обычно содержатся контактная информация, ссылки на ключевые страницы сайта и копирайт. Теги header и footer должны быть единственными на странице, а section может бесконечно повторяться.
Как строится DOM-дерево
Для описания структуры DOM потребуются термины: корневой, родительские и дочерние элементы. Корневой элемент находится в основании всей структуры и не имеет родительского элемента. Дочерние элементы не просто находятся внутри родительских, но и наследуют различные свойства от них. На картинке ниже изображено DOM-дерево.
Корневой элемент здесь html — без него страница не будет скомпилирована. Он не имеет родительского (вышестоящего) элемента, но имеет два наследника или дочерних элемента — head и body.
По отношению друг к другу элементы head и body являются сиблингами (братьями и сестрами). В каждый из них можно вложить еще много дочерних элементов. Например, в head обычно находятся link, meta, script или title.
Все эти теги не являются уникальными, и в одном документе может быть по несколько экземпляров каждого из них.
В body могут находиться разнообразные элементы. Например, в родительском body — дочерний элемент header, в элементе header — дочерний элемент section, в родительском section — дочерний div, в div — элемент h3, и наконец, в h3 — элемент span. В этом случае span не имеет дочерних элементов, но их можно добавить в любой момент.
Можно описать это так:
А если бы система была бы более разветвленная и с большим количеством вложений — так:
На схеме изображено довольно большое DOM-дерево, и его сложно воспринимать из-за его размера. Для удобства часто используется система многоуровневых списков. Например, предыдущее дерево можно преобразовать в такой список:
Если преобразовать дерево на предыдущем рисунке в код, то получится так:
Использование HTML DOM (Document Object Model) в скриптах на базе Windows Script Host
Иногда перед скриптописателем того или иного профиля встаёт задача разбора HTML-документов с различными целями. Это может быть «выдёргивание» той или иной информации непосредственно из Интернета, перелопачивание многочисленных HTML-файлов на жёстком диске компьютера для их модификации или просто «вычитывания» из них нужной информации, генерация HTML-файлов с различными целями и т.п. В связи с этим очень пригодится понимание так называемой объектной модели документов (DOM, Document Object Model), применение которой сделает процесс достаточно лёгким, логичным и прозрачным.
Данная статья будет полезна скриптописателям на базе Windows Script Host, а также начинающим веб-мастерам (ведь в клиентском JavaScript вовсю используется DOM) и программистам самых различных направлений (если ваша среда разработки в состоянии выступить в роли OLE-клиента, вы всегда можете использовать DOM). Все примеры кода в настоящей статье приводятся на языке VBScript для административных сценариев Windows Script Host. Для понимания изложенного материала желательно немного знать основы HTML и VBScript.
Что такое DOM
DOM, или объектная модель документов (Document Object Model), является способом моделирования HTML-документов. В рамках этой модели обеспечивается возможность доступа, навигации и манипулирования HTML-документами. DOM обеспечивает полный контроль над документом, предоставляя полный доступ и позволяя модифицировать содержимое документа.
Объектная модель документов представляет документ в виде дерева. Структура такого дерева полностью описывает весь HTML-документ, представляя каждый тег и его текстовое содержимое в виде узла дерева. В этом дереве определены отношения «родительский», «дочерний» и «родственный», позволяющие обойти всё дерево, т.е. весь HTML-документ. С помощью DOM можно манипулировать деревом документа любым требуемым образом, создавая новые узлы, удаляя существующие узлы и перемещая узлы в рамках дерева. Это эквивалентно добавлению новых, удалению и перемещению существующих тегов HTML и их текстового наполнения.
Имея дело с современными браузерами, вы можете быть уверены в полной поддержке DOM. Мы будем рассматривать DOM с позиций скриптописательства на базе Windows Script Host, поэтому нам в первую очередь интересен COM-объект «InternetExplorer.Application», который доступен через механизм OLE Automation. Этот объект предоставляет функциональность всего браузера, включая меню, панели инструментов, строку состояния и прочее, и находится в библиотеке «Microsoft Internet Controls» (shdocvw.dll в каталоге system32).
Структура DOM представляет собой иерархию объектов, похожую на объектую иерархию JavaScript или любого другого объектно-ориентированного языка. DOM предлагает свой полезный API, не привязанный к какому-либо конкретному языку программирования. Конечно же, в этой статье нет исчерпывающего перечня всех свойств и методов DOM. Полную информацию по этому вопросу вы можете почерпнуть на веб-узле Microsoft в библиотеке MSDN.
Создадим примерный HTML-документ, которым затем будем пользоваться в наших примерах скриптов:
Сохраните этот HTML-документ в файле C:\Temp\test.html
Все дальнейшие примеры в этой статье будут использовать этот HTML-документ, загружая его в объект браузера примерно такой строкой кода:
Это ни в коем случае не означает, что вы можете работать только с локальными HTML-файлами. Вместо локального пути всегда можно использовать URL, наподобие такого:
Программные точки входа в DOM
Если вы хотите начать навигацию по дереву с конкретного узла, то вы можете это сделать только от тех узлов, которым назначен атрибут id. Но, поскольку возмозжна произвольная навигация по дереву, вы можете достичь любого узла дерева.
Существует несколько «точек входа» в DOM через различные программные объекты.
Самая простая «точка входа» в DOM состоит в использовании свойства «all» объекта документа «InternetExplorer.Application»:
Не используйте вышеприведённый способ в клиентском JavaScript на веб-страницах, т.к. это может работать не во всех браузерах.
Способ, почти аналогичный предыдущему:
Оба вышеприведённых способа получают необходимый узел дерева с помощью его id. Конечно, это требует, чтобы уникальный идентификатор элементу был присвоен.
И наконец, можно обходить документ, начиная с его корня:
Свойства и атрибуты узла дерева DOM
Объект узла дерева предоставляет несколько свойств (nodeName, nodeValue, tagName, nodeType), смысл которых понятен из их имён:
Значение указанного атрибута узла проще всего получить методом getAttribute:
Можно воспользоваться методом getAttributeNode, получив специальный объект атрибута:
Для получения информации обо всех атрибутах узла можно воспользоваться коллекцией attributes:
Навигация по дереву DOM
Для навигации по родственным узлам можно воспользоваться свойствами узла дерева nextSibling и previousSibling:
Для навигации по дочерним узлам можно воспользоваться свойством childNodes, которое представляет из себя коллекцию дочерних узлов:
Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему узлу:
C помощью коллекции childNodes несложно рекурсивно обойти весь документ от его корня:
И наконец, для перехода к родительскому узлу дерева можно воспользоваться его свойством parentNode:
Модификация дерева DOM
Вышеприведённый пример удаляет тег абзаца («p») из тела («body») документа и после этого делает окно Internet Explorer видимым. Если вы обновите страницу в этом окне, абзац появится, т.к. файл C:\Temp\test.html будет перезагружен (а наш скрипт этот файл не изменяет). Впрочем, мы всегда можем записать изменённый HTML-документ, к примеру, в другой файл:
Метод removeAttribute позволяет удалить указанный атрибут узла:
Вышеприведённый пример удаляет атрибут «border» у таблицы в HTML-документе, и таблица отображается без обрамления.
Примечание: свойства и методы, описываемые в настоящем разделе, могут не работать одинаково «гладко» во всех браузерах. Например, при динамическом удалении атрибута в каком-то браузере на экране может ничего не измениться. В данной статье нас интересует DOM сам по себе, но не веб-мастеринг c клиентским JavaScript как таковой. Поэтому имейте в виду, что не все приводимые здесь способы модификации дерева DOM пригодны для буквального использования при вёрстке сайтов.
Создание нового элемента дерева DOM выглядит несколько сложнее, чем все предыдущие примеры:
В вышеприведённом примере происходит следующее, по шагам:
Таким образом, новые узлы дерева DOM создаются вначале как отдельные объекты, и только затем включаются в дерево тем или иным способом.
Метод appendChild всегда добавляет новый объект в конец списка дочерних узлов, и это, конечно, не единственный способ добавить новый узел в дерево. Метод insertBefore позволяет указать дочерний узел, перед которым должен быть вставлен новый узел. В качестве первого аргумента метода передаётся сам новый узел, а во втором аргументе передаётся узел, перед которым должна произойти вставка:
В вышеприведённом примере вставка нового абзаца происходит перед первым дочерним элементом тела документа («body»).
И наконец, метод cloneNode позволяет скопировать узел:
В вышеприведённом примере в конец тела документа («body») добавляется копия существующего абзаца с идентификатором «text». Метод cloneNode принимает необязательный булев параметр, который указывает, что необходимо рекурсивно скопировать всех потомков данного узла (если параметр опущен или равен False, потомки не скопируются). Как правило, копировать необходимо именно рекурсивно, т.к. например, собственно текстовое содержимое абзаца является его дочерним узлом, и не будет скопировано, если это не указано явно.
Людоговский Александр, 15.06.2008г.
В чём разница между узлом и элементом DOM?
Объектная модель документа (Document Object Model, DOM) — это интерфейс, который рассматривает HTML- или XML-документы в виде древовидных структур, каждый узел которых является объектом документа. DOM, кроме того, предоставляет набор методов для выполнения запросов к дереву документа, для изменения его структуры и для выполнения с ним некоторых других действий.
При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?
1. Узел DOM
Ключ к пониманию различия между узлом и элементом заключается в знании о том, что собой представляет узел.
Если рассматривать ситуацию в общих чертах, то оказывается, что DOM-документ включает в себя иерархию узлов. У каждого узла может быть родитель и (или) потомок.
Посмотрим на следующий HTML-документ:
В документ входит следующая иерархия узлов:
и абзац
Теги в HTML-документе представляют узлы. Интересно то, что обычный текст — это тоже узел. Узел-абзац
▍Типы узлов
Это свойство может иметь одно из следующих значений, представляющих тип узла:
Например, давайте выберем узел-абзац и посмотрим на его свойство nodeType :
В абзаце, кроме того, имеется текстовый узел:
Есть тип узла, который представляет всё дерево узлов документа. Это — Node.DOCUMENT_NODE :
2. Элемент DOM
После того, как мы разобрались с тем, что такое узел DOM, пришло время поговорить том, чем различаются узлы и элементы DOM.
— это всё элементы, так как они представлены тегами.
А вот сам документ, комментарий, текст — это не элементы, так как они не представлены соответствующими тегами:
Если говорить простыми словами, элемент — это подтип узла — так же как кошка — подтип животного.
3. Свойства DOM: узлы и элементы
Помимо различения узлов и элементов нужно ещё различать свойства DOM, которые содержат исключительно узлы или исключительно элементы.
Следующие свойства могут содержать либо узел ( Node ), либо коллекцию узлов ( NodeList ):
А вот следующие свойства могут содержать либо элементы ( HTMLElement ), либо коллекции элементов ( HTMLCollection ):
Рассмотрим следующий элемент-абзац, содержащий какой-то текст:
Откройте этот демонстрационный пример и посмотрите на свойства childNodes и children узла-абзаца:
Коллекция paragraph.childNodes содержит 2 узла: текст, оформленный полужирным шрифтом с помощью тега ( Thank you ), и текстовый узел ( for visiting my web page! ).
Но в коллекции paragraph.children имеется лишь 1 элемент, представленный тегом ( Thank you ).
Так как свойство paragraph.children содержит только элементы, текстовый узел в него не включён. Произошло это из-за того, что с точки зрения системы это — текст ( Node.TEXT_NODE ), а не элемент ( Node.ELEMENT_NODE ).
4. Итоги
Документ DOM — это иерархическая коллекция узлов. У каждого узла могут быть родители и (или) потомки.
Отличие между узлами и элементами DOM становится очевидным в том случае, если есть понимание того, что такое узел.
У узлов имеется свойство, указывающее на их тип. Один из этих типов соответствует элементам DOM. Элементы представлены тегами в HTML-документе.
Сталкивались ли вы со сложностями, касающимися различения узлов и элементов DOM?
Что такое DOM и зачем он нужен?
На этом уроке мы рассмотрим, что такое DOM, зачем он нужен, а также то, как он строится.
Что такое DOM
DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера.
Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.
В Chrome исходный код страницы, который получает браузер, можно посмотреть во вкладке «Source» на панели «Инструменты веб-разработчика».
В Chrome инструмента, с помощью которого можно было бы посмотреть созданное им DOM-дерево нет. Но есть представление этого DOM-дерева в виде HTML-кода, оно доступно на вкладке «Elements». С таким представлением DOM веб-разработчику, конечно, намного удобнее работать. Поэтому инструмента, который DOM представлял бы в виде древовидной структуры нет.
Для работы с DOM в большинстве случаев используется JavaScript, т.к. на сегодняшний день это единственный язык программирования, скрипты на котором могут выполняться в браузере.
Зачем нам нужен DOM API? Он нам нужен для того, чтобы мы могли с помощью JavaScript изменять страницу на «лету», т.е. делать её динамической и интерактивной.
DOM API предоставляет нам (разработчикам) огромное количество методов, с помощью которых мы можем менять всё что есть на странице, а также взаимодействовать с пользователем. Т.е. данный программный интерфейс позволяет нам создавать сложные интерфейсы, формы, выполнять обработку действий пользователей, добавлять и удалять различные элементы на странице, изменять их содержимое, свойства (атрибуты), и многое другое.
Сейчас в вебе практически нет сайтов в сценариях которых отсутствовала бы работа с DOM.
Из чего состоит HTML-код страницы
Перед тем, как перейти к изучению объектной модели документа необходимо сначала вспомнить, что из себя представляет исходный код веб-страницы (HTML-документа).
Исходный код веб-страницы состоит из тегов, атрибутов, комментариев и текста. Теги — это базовая синтаксическая конструкция HTML. Большинство из них являются парными. В этом случае один из них является открывающим, а другой – закрывающим. Одна такая пара тегов образует HTML-элемент. HTML-элементы могут иметь дополнительные параметры – атрибуты.
В документе для создания определённой разметки одни элементы находятся внутри других. В результате HTML-документ можно представить как множество вложенных друг в друга HTML-элементов.
В качестве примера рассмотрим следующий HTML код:
Теперь рассмотрим, как браузер на основании HTML-кода строит DOM-дерево.
Как строится DOM-дерево документа
Как уже было описано выше браузер строит дерево на основе HTML-элементов и других сущностей исходного кода страницы. При выполнении этого процесса он учитывает вложенность элементов друг в друга.
В результате браузер полученное DOM-дерево использует не только в своей работе, но также предоставляет нам API для удобной работы с ним через JavaScript.
При строительстве DOM браузер создаёт из HTML-элементов, текста, комментариев и других сущностей этого языка объекты (узлы DOM-дерева).
В большинстве случаев веб-разработчиков интересуют только объекты (узлы), образованные из HTML-элементов.
При этом браузер не просто создаёт объекты из HTML-элементов, а также связывает их между собой определёнными связями в зависимости от того, как каждый из них относится к другому в коде.
Элементы, которые находятся непосредственно в некотором элементе являются по отношению к нему детьми. А он для каждого из них является родителем. Кроме этого, все эти элементы по отношению друг к другу являются сиблингами (братьями).
Чтобы получить DOM-дерево так как его строит браузер, необходимо просто «выстроить» все элементы в зависимости от их отношения друг к другу.
Создание DOM-дерева выполняется сверху вниз.
При этом корнем DOM-дерева всегда является сам документ (узел document ). Далее дерево строится в зависимости от структуры HTML кода.
Например, HTML-код, который мы рассматривали выше будет иметь следующее DOM-дерево:
