Что такое dom в javascript. Работа с DOM-моделью. Что такое DOM

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией.
Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент, и т.п.

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

Файл dom. Основы работы с DOM в JavaScript

Браузер, когда запрашивает страницу и получает в ответе от сервера её исходный 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-элементов.

Работа с DOM

Одой из ключевых задач JavaScript является взаимодействие с пользователем и манипуляция элементами веб-страницы. Для JavaScript веб-страница доступна в виде объектной модели документа (document object model) или сокращенно DOM. DOM описывает структуру веб-станицы в виде древовидного представления и предоставляет разработчикам способ получить доступ к отдельным элементам веб-станицы.

Важно не путать понятия BOM (Browser Object Model — объектная модель браузера) и DOM (объектная модель документа). Если BOM предоставляет доступ к браузеру и его свойствам в целом, то DOM предоставляет доступ к отдельной веб-странице или html-документу и его элементам.

Например, рассмотрим простейшую страницу:

Дерево DOM для этой страницы будет выглядеть следующим образом:

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

Существует следующие виды узлов:

Attr : атрибут html-элемента

Document : корневой узел html-документа

DocumentType : DTD или тип схемы XML-документа

DocumentFragment : место для временного хранения частей документа

EntityReference : ссылка на сущность XML-документа

ProcessingInstruction : инструкция обработки веб-страницы

Comment : элемент комментария

Text : текст элемента

CDATASection : секция CDATA в документе XML

Entity : необработанная сущность DTD

Notation : нотация, объявленная в DTD

Несмотря на такое большое количество типов узлов, как правило, мы будем работать только с некоторыми из них.

Основы работы с DOM в JavaScript. Манипуляции с DOM на чистом JavaScript Что такое dom в javascript

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

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

Действия пользователя, которые мы можем отследить через JavaScript, называются событиями . События могут быть следующими: клик мышкой на элемент страницы, наведение мышкой на элемент страницы или наоборот — уход курсора мыши с элемента и так далее. Кроме того, есть события, не зависящие от действий пользователя, например, событие по загрузке HTML страницы в браузер.

В JavaScript существует несколько способов работы с событиями. Мы начнем с самого простого из них.

Основы работы с событиями

Самый простой способ задать реакцию элемента на определенное событие — указать ее с помощью атрибута для определенного тега. К примеру, событию «нажатие мышкой» соответствует атрибут onclick , событию «наведение мышкой» — атрибут onmouseover , а событию «уход курсора с элемента» — атрибут onmouseout .

Значением атрибута с событием служит JavaScript код . В следующем примере по нажатию мышкой на кнопку выполнится функция alert :

А сейчас по клику на элемент выполнится функция func :

Можно выполнить не одну функцию , а несколько:

function func1() function func2()

Обратите внимание на то, что если внутри атрибута вам нужны двойные кавычки (например, для строки) и внешние кавычки атрибута тоже двойные — onclick=»alert(«!»)» — такой код не будет работать.

С этим можно бороться несколькими способами: можно сменить внешние кавычки на одинарные onclick=»alert(«!»)» , можно также заэкранировать внутренние кавычки обратным слешем onclick=»alert(\»!\»)» или же просто перенести JavaScript код из атрибута в функцию, а в атрибуте оставить только имя функции onclick=»func()» .

То же самое будет, если вы внешние кавычки атрибута ставите одинарными и для строки тоже используете одинарные: onclick=»alert(«!»)» — тут также все решается аналогичными способами.

Таблица атрибутов для событий

Работа с getElementById

Сейчас мы с вами научимся получать элементы HTML страницы и проводить с ними различные манипуляции (мы сможем менять, к примеру, их текст и цвет и многие другие полезные вещи).

Пусть у нас на странице есть тег с атрибутом id в значении test . Запишем ссылку на этот тег в переменную elem . Для этого мы должны воспользоваться методом getElementById , который получает элемент по его id .

Эта запись произойдет по клику на кнопку, которой мы задали атрибут onclick . По нажатию на эту кнопку сработает функция func , которая найдет на HTML странице элемент с id равным test и запишет ссылку на него в переменную elem :

Теперь в переменной elem у нас лежит ссылка на элемент с атрибутом id в значении test . Сама переменная elem является объектом .

Этот объект и тег HTML страницы связаны друг с другом — мы можем поменять какие-либо свойства объекта elem и при этом увидим изменения на HTML странице, которые произойдут с полученным нами элементом.

Давайте посмотрим, как это происходит на практике.

Основы работы с атрибутами HTML через JavaScript

Сейчас мы будем считывать и изменять атрибуты тегов. Пусть у нас опять даны инпут с id равным test и кнопка , по клику на которую будет запускаться функция func :

Внутри функции func мы получим наш инпут по его id и запишем ссылку на него в переменную elem :

Давайте теперь выведем на экран содержимое атрибутов нашего инпута. Чтобы получить доступ, к примеру, к атрибуту value, следует написать следующее: elem.value , где elem — это переменная, в которую мы с помощью getElementById записали ссылку на наш элемент, а value — это атрибут тега, который нас интересует.

Мы можем вывести содержимое атрибута через alert таким образом — alert(elem.value) — или записать в какую-нибудь переменную. Давайте проделаем это:

Мы можем таким же образом считывать значения и других атрибутов, например так — elem.id — мы считаем значение атрибута id, а так — elem.type — значение атрибута type. Смотрите пример:

Можно не только считывать значения атрибутов, но и изменять их. Чтобы, к примеру, поменять значение атрибута value , нужно просто присвоить его конструкции elem.value :

HTML код станет выглядеть так (значение атрибута value станет www):

Ну, а теперь самое сложное — можно не вводить переменную elem , а строить цепочку из точек таким образом:

Таким же образом (цепочкой) можно производить и перезапись атрибутов :

Однако, в большинстве случаев введение переменной удобнее . Сравните два примера — сейчас я ввел переменную elem и могу считывать любое количество атрибутов, при этом getElementById вызывается только один раз :

А сейчас я не ввожу новую переменную и поэтому мне приходится вызывать getElementById два раза:

На мой взгляд, этот код стал сложнее , хотя и занимает на одну строчку меньше. Кроме того, если я захочу сменить значение id с test на, к примеру, www, мне придется делать это во многих местах, что не очень удобно.

на браузер. Поиск элементов по странице, который делает метод getElementById , является довольно медленной операцией (и вообще любая работа с элементами страницы — это медленная операция — запомните это).

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

Если же мы используем переменную elem — никакого поиска по странице не происходит (элемент уже найден и ссылка на него лежит в переменной elem ).

Исключения: атрибуты class и for

Вы уже научились работать с атрибутами через JavaScript и теперь пришло время рассказать вам о том, что не все так просто — при работе с атрибутами существует исключение — это атрибут class .

Это слово является специальным в JavaScript и поэтому мы не можем просто написать elem.class , чтобы считать значение атрибута class . Вместо этого следует писать elem.className .

В следующем примере на экран выводится значение атрибута class :

Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту for ( ) соответствует свойство с названием htmlFor .

Работа с this

Сейчас мы с вами будем работать со специальным объектом this , который указывает на текущий элемент (элемент в котором произошло событие). Причем указывает так, будто этот элемент уже получен методом getElementById .

Давайте посмотрим как работать с this и в чем удобство такого подхода.

Пусть у нас есть задача по нажатию на инпут вывести на экран содержимое его value.

Пока вы умеете делать только такое решение:

В принципе, это решение хорошее, но представим теперь, что у нас есть много инпутов и по нажатию на каждый нам нужно выводить его value.

В этом случае у нас получится что-то в таком роде:

Теперь ясно виден недостаток нашего подхода — для каждого инпута нам приходится создавать свою функцию обработки клика, причем делают эти функции практически одно и тоже.

Если у нас будет 10 инпутов — то придется сделать 10 функций, не удобно.

Давайте упростим нашу задачу: будем передавать параметром функции id текущего элемента. И вместо большого количества функций все сведется к одной функции:

Однако, такое решение все равно имеет недостаток — каждому элементу придется вводить разные id, что тоже несколько неудобно.

Итак, давайте наконец рассмотрим вариант решения задачи через this .

Сделаем так, что каждый инпут будет выводить свое содержимое по нажатию. Для этого параметром функции передадим объект this , вот так: func(this) .

Наш this передается параметром функции и попадает в переменную elem . Этот elem ведет себя так, будто получен таким образом: var elem = document.getElementById(. ) , но получать его таким образом не надо, там уже все готово и можно пользоваться. К примеру, elem.value указывает на value нашего инпута и так далее.

Итак, вот самое просто решение нашей задачи:

Основы работы с CSS

В JavaScript работа с CSS свойствами происходит путем изменения значения атрибута style для элемента. К примеру, чтобы поменять цвет нужно построить следующую цепочку — elem.style.color — и присвоить ей нужное значение цвета:

Можно также и не вводить переменную elem , а построить очень длинную цепочку .

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией.
Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент, и т.п.

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