Dom что это за программа

Основы DOM

Объектная модель документа (DOM, Document Object Model) является важной частью интерактивного веб-сайта. Это интерфейс, который позволяет языку программирования управлять контентом, структурой и стилем веб-сайта. JavaScript – это клиентский скриптовый язык, который подключается к DOM в интернет-браузере.

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

Примечание: DOM не зависит от языка (создается независимо от определенного языка программирования), но в этом мануале мы рассмотрим реализацию HTML DOM в JavaScript.

Требования

• Базовые навыки работы с HTML и CSS.
• Понимание структуры кода и синтаксиса JavaScript.

Что такое DOM?

На самом базовом уровне веб-сайт состоит из HTML-документа. Браузер, который вы используете для просмотра веб-сайта, – это, по сути, программа, которая интерпретирует HTML и CSS и отображает страницу (а именно стиль, контент и структуру).

Что такое DOM? На примере реальной задачи JS!

Кроме анализа стиля и структуры HTML и CSS браузер создает представление документа, что и называется объектной моделью документа. Эта модель позволяет JavaScript иметь доступ к текстовому контенту и элементам документа веб-сайта как к объектам.

JavaScript – это интерактивный язык, потому его механизмы проще объяснить на примерах. Попробуйте создать очень простой веб-сайт. Создайте файл index.html и сохраните его в новом каталоге проекта. В файл вставьте:

Learning the DOM

Document Object Model

Этот код – обычный исходный код HTML нового скелета веб-сайта. Он содержит наиболее существенные аспекты документа веб-сайта – doctype и тег html с вложенными тегами head и body.

В этом мануале используется браузер Chrome, но вы можете получить подобный вывод и в другом современном браузере. откройте в Chrome файл index.html. Вы увидите простой веб-сайт с заголовком Document Object Model. Щелкните правой кнопкой мыши в любом месте страницы и выберите Inspect. Это откроет инструменты для разработчиков.

Во вкладке Elements вы увидите DOM.

В этом случае при расширении модель выглядит точно так же, как написанный ранее HTML-код – doctype и несколько других тегов HTML. При наведении курсора на какой-либо элемент будет выделен соответствующий элемент веб-сайта. Маленькие стрелки слева от элементов HTML позволяют вам переключать представление вложенных элементов.

Объект document

Объект document – это встроенный объект, который имеет множество свойств и методов, которые можно использовать для получения доступа и изменения веб-сайтов. Чтобы понять, как работать с DOM, вы должны понимать, как работают объекты в JavaScript.

Что такое Document Object Model (DOM) и как с ним работать ?

В инструментах разработчика на странице index.html перейдите во вкладку Console. Введите в консоль document и нажмите Enter. Вы увидите, что выведенный результат совпадает с тем, что вы видели во вкладке Elements.

document;
#document

Learning the DOM

Document Object Model

Вне отладки вы вряд ли будете вводить document и работать с ним непосредственно в консоли, но это помогает понять, как выглядит объект document и как его можно изменить.

В чем разница между исходным кодом DOM и HTML?

На данном этапе (судя по приведенному выше примеру) может показаться, что исходный код HTML и DOM – это одно и то же самое. Есть две ситуации, в которых DOM, созданный браузером, будет отличаться от исходного кода HTML:

1. DOM изменен клиентским JavaScript.
2. Браузер автоматически исправляет ошибки в исходном коде.

Чтобы понять, как DOM может быть изменен клиентским JavaScript, введите в консоль следующее:

document.body;

Document Object Model

document – это объект, body – свойство этого объекта, к которому вы обращались с помощью точечной нотации. Отправив document.body в консоль, вы получите элемент body и весь код внутри него.

В консоли можно изменить некоторые свойства объекта body на этом веб-сайте. Попробуйте отредактировать атрибут style, изменив цвет фона на fuchsia. Введите в консоль следующее:

Отправив вышеуказанный код, вы увидите, что сайт обновился, так как цвет фона изменится.

Перейдя во вкладку Elements или снова введя document.body в консоль, вы увидите, что DOM изменился.

Document Object Model

Примечание: Чтобы изменить свойство CSS background-color, нужно ввести backgroundColor в JavaScript. Любое свойство CSS, написанное черездефис, записывается в JavaScript в верблюжьем регистре.

Код JavaScript, присваивая фону цвет fuchsia, теперь становится частью DOM.

Теперь кликните правой кнопкой мыши по странице и выберите View Page Source. Вы заметите, что исходный код веб-сайта не содержит нового атрибута style, который вы добавили с помощью JavaScript. Исходный код веб-сайта не изменится и никогда не будет затронут клиентским JavaScript. Если вы обновите страницу, новый код, который вы добавили в консоли, исчезнет.

Другая ситуация, в которой DOM может отличаться от исходного кода HTML, – это когда в исходном коде имеются ошибки. Одним из распространенных примеров такого поведения является тег table –внутри таблицы необходим тег tbody, но разработчики часто не могут включить его в свой HTML. Браузер автоматически исправит ошибку и добавит tbody, изменив DOM. DOM также установит теги, которые не были закрыты.

Заключение

Теперь вы знаете, что такое DOM, умеете работать с объектом document и обновлять его свойства с помощью JavaScript и консоли.

Также вы знаете, чем код HTML может отличаться от DOM.

Более подробную информацию о DOM можно найти на странице Mozilla Developer Network.

В следующем мануале вы ознакомитесь с важными терминами HTML, узнаете о дереве DOM, узлах и их наиболее распространенных типах и начнете создавать интерактивные скрипты в JavaScript.

Источник: www.8host.com

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

Когда браузер загружает HTML-код страницы, он строит на основании него объектную модель документа (на английском Document Object Model или сокращённо DOM).

Перед тем как перейти к изучению DOM , рассмотрим сначала все основные этапы работ , которые выполняет браузер для преобразования исходного кода HTML-документа в отображение стилизованной и интерактивной картинки на экране. Кстати, этот процесс называется Critical Rendering Path (CRP) .

Хотя этот процесс состоит из большого количества шагов, их грубо можно представить в виде двух:

1. Анализирует HTML-документ, чтобы определить то, что в конечном итоге нужно отобразить на странице;
2. Выполняет отрисовку того что нужно отобразить.

Результатом первого этапа является формирование дерева рендеринга (render tree). Данное дерево содержит видимые элементы и текст, которые нужно отобразить на странице, и также связанные с ними стили. Это дерево дублирует структуру DOM, но включает как мы отметили выше только видимые элементы. В render tree каждый элемент содержит соответствующий ему объект DOM и рассчитанные для него стили. Таким образом, render tree описывает визуальное представление DOM.

Чтобы построить дерево рендеринга , браузеру нужны две вещи:

• DOM , который он формирует из полученного HTML-кода;
• CSSOM (CSS Object Model) , который он строит из загруженных и распознанных стилей.

На втором этапе браузер выполняет отрисовку render tree . Для этого он:

• рассчитывает положение и размеры каждого элемента в render tree, этот шаг называется Layout ;
• выполняет рисование, этот шаг называется Paint .

После Paint все нарисованные элементы находятся на одном слое. Для повышения производительности страницы браузер выполняет ещё один шаг, который называется Composite . В нем он группирует элементы по композиционным слоям. Именно благодаря этому этапу мы можем создать на странице плавную анимацию элементов при использовании таких свойств как transform , opacity . Так как изменение этих свойств вызовет только одну задачу Composite .

Для работы со слоями в Chrome есть отличный инструмент Layers .

Например, изменения свойства color вызовет сначала задачу Paint , а затем вероятнее всего последует Composite всех затронутых элементов.

Изменение width вызовет следующие задачи: Layout -> Paint -> Composite .

Layout и Paint – это ресурсоемкие процессы, поэтому для хорошей отзывчивости вашей страницы или веб-приложения, необходимо свести к минимуму операции которые их вызывают.

Список свойств, изменение которых вызывают Paint :

• color ;
• background ;
• visibility ;
• border-style и другие.

Список свойств, изменение которых вызывает Layout :

• width и height ;
• padding и margin ;
• display ;
• border ;
• top , left , right и bottom ;
• position ;
• font-size и другие.

Кроме этого, Layout срабатывает не только при изменении CSS-свойств, но также, например когда мы хотим получить смещение элемента ( el.offsetLeft , el.offsetTop и так далее) или его положение ( el.clientLeft , el.clientTop и так далее), а также во многих других случаях. Более подробно ознакомиться с этими операциями можно здесь.

Чтобы понимать какую стоимость имеет то или иное свойство, можно установить расширение css-triggers для редактора кода VS Code:

Что же такое DOM?

DOM – это объектное представление исходного HTML-кода документа. Процесс формирования DOM происходит так: браузер получает HTML-код, парсит его и строит DOM.

Затем, как мы уже отмечали выше браузер использует DOM (а не исходный HTML) для строительства дерева рендеринга , потом выполняет layout и так далее.

Почему не использовать в этом случае просто HTML? Потому что HTML – это текст, и с ним невозможно работать так как есть. Для этого нужно его разобрать и создать на его основе объект, что и делает браузер. И этим объектом является DOM.

Итак, DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода.

По-простому, HTML-код – это текст страницы, а DOM – это объект, созданный браузером при парсинге этого текста.

Но, браузер использует DOM не только для выполнения процесса CRP , но также предоставляет нам программный доступ к нему . Следовательно, с помощью JavaScript мы можем изменять DOM.

DOM – это технология не только для браузеров и JavaScript. Существуют и другие инструменты, позволяющие работать с DOM. Например, работа с DOM может осуществляться серверными скриптами, после загрузки и парсинга ими HTML-страницы. Но это немного другая тема и мы не будем рассматривать её здесь.

Все объекты и методы, которые предоставляет браузер описаны в спецификации HTML DOM API, поддерживаемой W3C. С помощью них мы можем читать и изменять документ в памяти браузера.

Например, с помощью JavaScript мы можем:

• добавлять, изменять и удалять любые HTML-элементы на странице, в том числе их атрибуты и стили;
• получать доступ к данным формы и управлять ими;
• реагировать на все существующие HTML-события на странице и создавать новые;
• рисовать графику на HTML-элементе и многое другое.

При изменении DOM браузер проходит по шагам CRP и почти мгновенно обновляет изображение страницы. В результате у нас всегда отрисовка страницы соответствует DOM.

Благодаря тому, что JavaScript позволяет изменять DOM, мы можем создавать динамические и интерактивные веб-приложения и сайты. С помощью JavaScript мы можем менять всё что есть на странице. Сейчас в вебе практически нет сайтов, в которых не используется работа с DOM.

В браузере Chrome исходный HTML-код страницы, можно посмотреть во вкладке «Source» на панели «Инструменты веб-разработчика»:

На вкладке Elements мы видим что-то очень похожее на DOM:

Однако DevTools включает сюда дополнительную информацию, которой нет в DOM. Отличным примером этого являются псевдоэлементы в CSS. Псевдоэлементы, созданные с помощью селекторов ::before и ::after , являются частью CSSOM и дерева рендеринга, и технически не являются частью DOM. Мы с ними не может взаимодействовать посредством JavaScript.

По факту DOM создается только из исходного HTML-документа и не включает псевдоэлементы. Но в инспекторе элементов DevTools они имеются.

Как строится DOM?

Перед тем, как перейти к DOM, сначала вспомним, что собой представляет исходный HTML-код документа. В качестве примера рассмотрим следующий:

Как вы уже знаете, HTML-документ – это обычный текстовый документ. Его код состоит из тегов, атрибутов, текста, комментариев и так далее. Очень важной сущностью в нём является HTML-элемент. На них всё строится. HTML-элемент в большинстве случаев состоит из открывающего и закрывающего тегов, между которыми располагается его содержимое.

Например, HTML-элемент h1 имеет открывающий тег

, закрывающий

и содержимое «Моя страница». Кроме этого, тег может содержать дополнительную информацию посредством атрибутов. В этом коде атрибут имеется только у HTML-элемента .

Также очень важно понимать, что в HTML-коде одни элементы вкладываются в другие. Например, вложен в , а в . Это очень важная концепция, которая нам и позволяет нам создавать определённую разметку в HTML.

Теперь рассмотрим, как браузер на основании HTML-кода строит DOM. Объектная структура DOM представляет собой дерево узлов (узел на английском называется node ). При этом DOM-узлы образуются из всего, что есть в HTML: тегов, текстового контента, комментариев и т.д.

Корневым узлом DOM-дерева является объект document , он представляет сам этот документ. Далее в нём расположен узел . Получить этот элемент в коде можно так:

JavaScript

В находятся 2 узла-элемента: и . Получить их в коде можно так:

JavaScript

const elHead = document.head; const elBody = document.body;
JavaScript
// получим и присвоим его переменной elTitle const elTitle = document.title;

При этом, как вы уже поняли, узлы в зависимости от того, чем они образованы делятся на разные типы. В DOM выделяют:

• узел, представляющий собой весь документ; этим узлом является объект document ; он выступает входной точкой в DOM;
• узлы, образованные тегами, их называют узлами-элементами или просто элементами;
• текстовые узлы, они образуются текстом внутри элементов;
• узлы-комментарии и так далее.

Имеются и другие типы узлов, но на практике в основном используются только перечисленные выше.

Каждый узел в дереве DOM является объектом. Но при этом формируют структуру DOM только узлы-элементы. Текстовые узлы, например, содержат в себе только текст. Они не могут содержать внутри себя другие узлы. Поэтому вся работа с DOM в основном связана с узлами-элементами.

Кстати, директива тоже является DOM-узлом. Но она нам не интересна, поэтому на схеме мы её опустили.

Чтобы перемещаться по узлам DOM-дерева нужно знать какие они имеют отношения. Зная их можно будет выбирать правильные свойства и методы. Связи между узлами, определяются их вложенностью. Каждый узел в DOM может иметь следующие виды отношений:

• родитель – это узел, в котором он непосредственно расположен; при этом родитель у узла может быть только один; также узел может не иметь родителя, в данном примере им является document ;
• дети или дочерние узлы – это все узлы, которые расположены непосредственно в нём; например, узел

имеет 2 детей;
• соседи или сиблинги – это узлы, которые имеют такого же родителя что и этот узел;
• предки – это его родитель, родитель его родителя и так далее;
• потомки – это все узлы, которые расположены в нем, то есть это его дети, а также дети его детей и так далее.

У элемента 2 потомка: и текстовый узел «Моя страница».

Зачем нужно знать, как строится DOM-дерево? Во-первых, это понимание той среды, в которой вы хотите что-то изменять. Во-вторых, большинство действий при работе с DOM сводится к поиску нужных элементов. Но не зная как устроено DOM-дерево и отношения между узлами, найти что-то в нём будет достаточно затруднительно.

Задания

1. Представленное DOM-дерево преобразуйте обратно в HTML-код:

Источник: itchief.ru

Что такое DOM?

Объектная модель документа, или «DOM», является программным интерфейсом доступа к элементам веб-страниц. По сути, это API страницы, позволяющий читать и манипулировать содержимым, структурой и стилями страницы. Давайте разберемся как это устроено и как это работает.

Как строится веб-страница?

Процесс преобразования исходного HTML-документа в отображаемую стилизованную и интерактивную страницу, называется “Critical Rendering Path”(«Критическим путем рендеринга»). Хотя этот процесс можно разбить на несколько этапов, как я описал это в статье «Понимание критического пути рендеринга», эти этапы можно условно сгруппировать в два этапа. В первом браузер анализирует документ, чтобы определить, что в конечном итоге будет отображаться на странице, а во второй браузер выполняет рендеринг.

Результатом первого этапа является то, что называется “render tree”(«дерево рендеринга»). Дерево рендеринга — это представление элементов HTML, которые будут отображаться на странице, и связанных с ними стилей. Чтобы построить это дерево, браузеру нужны две вещи:

1. CSSOM, представление стилей, связанных с элементами
2. DOM, представление элементов

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

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

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

My first web page

Hello, world!

How are you?

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

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

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

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

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

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

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

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

Hello, world!

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

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.

Hello, world!

How are you?

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

:

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

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

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

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

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

Резюме

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

Хотя DOM похож на другие формы исходного документа HTML, он отличается по ряду причин:

• Это всегда верный (валидный) HTML код
• Это модель, которая может быть изменена с помощью Javascript
• В него не входят псевдоэлементы (такие как ::after )
• В него входят скрытые элементы (такие как display: none )

Источник: webdevblog.ru

Введение. DOM в примерах.

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/browser-environment.

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

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

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

Простейший DOM

Построим, для начала, дерево DOM для следующего документа.

Самый внешний тег — , поэтому дерево начинает расти от него.

Внутри находятся два узла: и — они становятся дочерними узлами для .

Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое — равноправные узлы дерева DOM.

Пример посложнее

Рассмотрим теперь более жизненную страничку:

Корневым элементом иерархии является html . У него есть два потомка. Первый — head , второй — body . И так далее, каждый вложенный тег является потомком тега выше:

На этом рисунке синим цветом обозначены элементы-узлы, черным — текстовые элементы.

Дерево образовано за счет синих элементов-узлов — тегов HTML.

А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:

. DOM, не содержащий таких «пустых» узлов, называют «нормализованным».

Пример с атрибутами и DOCTYPE

Рассмотрим чуть более сложный документ.

Верхний тег — html , у него дети head и body , и так далее. Получается дерево тегов:

В этом примере у узлов есть атрибуты: style , class , id . Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны.

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

Вообще-то это секрет, но DOCTYPE тоже является DOM-узлом, и находится в дереве DOM слева от HTML (на рисунке этот факт скрыт).

P.S. Насчет секрета — конечно, шутка, но об этом и правда далеко не все знают. Сложно придумать, где такое знание может пригодиться.

Нормализация в различных браузерах

При разборе HTML Internet Explorer сразу создает нормализованный DOM, в котором не создаются узлы из пустого текста.

Firefox — другого мнения, он создает DOM-элемент из каждого текстового фрагмента.
Поэтому в Firefox дерево этого документа выглядит так:

На рисунке для краткости текстовые узлы обозначены просто решеткой. У body вместо 3 появилось 7 детей.

Opera тоже имеет чем похвастаться. Она может добавить лишний пустой элемент «просто от себя».

Чтобы это увидеть — откройте документ по этой ссылке. Он выдает число дочерних узлов document.body , включая текстовые узлы.

У меня получается 3 для IE, 7 для Firefox и 8 (!?) для Opera.

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

Возможности, которые дает DOM

Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?

Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

Например, этот код получает первый элемент с тэгом ol , последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:

var ol = document.getElementsByTagName(‘ol’)[0] var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

Для примера работы такого скрипта — кликните на тексте на лосиной cтраничке

document.write

В старых руководствах и скриптах можно встретить модификацию HTML-кода страницы напрямую вызовом document.write .

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

Избегайте document.write.. Кроме случаев, когда вы действительно знаете, что делаете (а зачем тогда читаете самоучитель — вы и так гуру)

Разберем подробнее способы доступа и свойства элементов DOM.

Доступ к элементам

Любой доступ и изменения DOM берут свое начало от объекта document .

Начнем с вершины дерева.

Самый верхний тег. В случае корректной HTML-страницы, это будет .

document.body

Тег , если есть в документе (обязан быть).

Это свойство работает немного по-другому, если установлен DOCTYPE Strict. Обычно проще поставить loose DOCTYPE.

function go()

Типы DOM-элементов

У каждого элемента в DOM-модели есть тип. Его номер хранится в атрибуте elem.nodeType

Всего в DOM различают 12 типов элементов.

Обычно используется только один: Node.ELEMENT_NODE , номер которого равен 1. Элементам этого типа соответствуют HTML-теги.

Иногда полезен еще тип Node.TEXT_NODE , который равен 3. Это текстовые элементы.

Остальные типы в javascript программировании не используются.

function go() Текст

Пример

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

Здесь показаны только элементы внутри body , т.к только они отображаются на странице. Для элементов типа 1 (теги) в скобочках указан соответствующий тег, для текстовых элементов (тип 3) — стоит просто цифра.

Дочерние элементы

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

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

for(var i=0; i

И такая — для ссылок наверх и между узлами:

• Синяя линия — массив childNodes
• Зеленые линии — свойства firstChild , lastChild .
• Красная линия — свойство parentNode
• Бордовая и лавандовая линии внизу — previousSibling , nextSibling

Этих свойств вполне хватает для удобного обращения к соседям.

Свойства элементов

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

Есть еще и третий вариант, встречающийся в IE — когда устанавливать свойство можно только во время создания элемента.

Рассмотрим здесь еще некоторые (не все) свойства элементов, полезные при работе с DOM.

tagName

Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.

alert(document.body.tagName) // => BODY

style

Это свойство управляет стилем. Оно аналогично установке стиля в CSS.

Например, можно установить element.style.width :

Исходный код этой кнопки:

Обработчик события onclick обращается в этом примере к свойству this.style.width , т.к значением this в обработчике события является текущий элемент (т.е сама кнопка). Подробнее об этом — во введении в события.

Есть общее правило замены — если CSS-атрибут имеет дефисы, то для установки style нужно заменить их на верхний регистр букв.

Например, для установки свойства z-index в 1000, нужно поставить:

element.style.zIndex = 1000

innerHTML

Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.

Оно содержит весь HTML-код внутри узла, и его можно менять.

Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:

document.getElementById(‘footer’).innerHTML = ‘

Bye!

See ya

‘

Пожалуй, innerHTML — одно из наиболее часто используемых свойств DOM-элемента.

className

Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту «class».

elem.className = ‘newclass’

onclick , onkeypress, onfocus .

.. И другие свойства, начинающиеся на «on. «, хранят функции-обработчики соответствующих событий. Например, можно присвоить обработчик события onclick .

Подробнее об этих свойствах и обработчиках событий — см. введение в события.

Источник: javascript.ru