Что является узлом html

DOM-дерево

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

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

Например, document.body – объект для тега .

Если запустить этот код, то станет красным на 3 секунды:

document.body.style.background = 'red'; // сделать фон красным setTimeout(() => document.body.style.background = '', 3000); // вернуть назад

Это был лишь небольшой пример того, что может DOM. Скоро мы изучим много способов работать с DOM, но сначала нужно познакомиться с его структурой.

Пример DOM

Начнём с такого, простого, документа:

     Правда о лосях. 

DOM – это представление HTML-документа в виде дерева тегов. Вот как оно выглядит:

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

Каждый узел этого дерева – это объект.

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

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

Например, в теге есть текстовый узел «О лосях» .

Обратите внимание на специальные символы в текстовых узлах:

• перевод строки: ↵ (в JavaScript он обозначается как \n )
• пробел: ␣

Пробелы и переводы строки – это полноправные символы, как буквы и цифры. Они образуют текстовые узлы и становятся частью дерева DOM. Так, в примере выше в теге есть несколько пробелов перед , которые образуют текстовый узел #text (он содержит в себе только перенос строки и несколько пробелов).

Существует всего два исключения из этого правила:

1. По историческим причинам пробелы и перевод строки перед тегом игнорируются
2. Если мы записываем что-либо после закрывающего тега , браузер автоматически перемещает эту запись в конец body , поскольку спецификация HTML требует, чтобы всё содержимое было внутри . Поэтому после закрывающего тега не может быть никаких пробелов.

В остальных случаях всё просто – если в документе есть пробелы (или любые другие символы), они становятся текстовыми узлами дерева DOM, и если мы их удалим, то в DOM их тоже не будет.

Здесь пробельных текстовых узлов нет:

 Правда о лосях.

Пробелы по краям строк и пробельные текстовые узлы скрыты в инструментах разработки

Когда мы работаем с деревом DOM, используя инструменты разработчика в браузере (которые мы рассмотрим позже), пробелы в начале/конце текста и пустые текстовые узлы (переносы строк) между тегами обычно не отображаются.

Таким образом инструменты разработки экономят место на экране.

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

Автоисправление

Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.

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

Например, если HTML-файл состоит из единственного слова «Привет» , браузер обернёт его в теги и , добавит необходимый тег , и DOM будет выглядеть так:

При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.

Есть такой документ с незакрытыми тегами:

…Но DOM будет нормальным, потому что браузер сам закроет теги и восстановит отсутствующие детали:

Таблицы всегда содержат

Важный «особый случай» – работа с таблицами. По стандарту DOM у них должен быть , но в HTML их можно написать (официально) без него. В этом случае браузер добавляет в DOM самостоятельно.

Для такого HTML:

DOM-структура будет такой:

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

Другие типы узлов

Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.

Здесь мы видим узел нового типа – комментарий, обозначенный как #comment , между двумя текстовыми узлами.

Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве.

Все, что есть в HTML, даже комментарии, является частью DOM.

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

Даже объект document , представляющий весь документ, формально является DOM-узлом.

Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них:

1. document – «входная точка» в DOM.
2. узлы-элементы – HTML-теги, основные строительные блоки.
3. текстовые узлы – содержат текст.
4. комментарии – иногда в них можно включить информацию, которая не будет показана, но доступна в DOM для чтения JS.

Поэкспериментируйте сами

Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.

Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.

Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.

Выглядит примерно так:

Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.

Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.

Клик по этой кнопке в левом верхнем углу инспектора позволяет при помощи мыши (или другого устройства ввода) выбрать элемент на веб-странице и «проинспектировать» его (браузер сам найдёт и отметит его во вкладке Elements). Этот способ отлично подходит, когда у нас огромная HTML-страница (и соответствующий ей огромный DOM), и мы хотим увидеть, где находится интересующий нас элемент.

Есть и другой способ сделать это: можно кликнуть на странице по элементу правой кнопкой мыши и в контекстном меню выбрать «Inspect».

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

• Styles – здесь мы видим CSS, применённый к текущему элементу: правило за правилом, включая встроенные стили (выделены серым). Почти всё можно отредактировать на месте, включая размеры, внешние и внутренние отступы.
• Computed – здесь мы видим итоговые CSS-свойства элемента, которые он приобрёл в результате применения всего каскада стилей (в том числе унаследованные свойства и т.д.).
• Event Listeners – в этом разделе мы видим обработчики событий, привязанные к DOM-элементам (мы поговорим о них в следующей части учебника).
• … и т.д.

Лучший способ изучить инструменты разработчика – это прокликать их. Большинство значений можно менять и тут же смотреть результат.

Взаимодействие с консолью

При работе с DOM нам часто требуется применить к нему JavaScript. Например: получить узел и запустить какой-нибудь код для его изменения, чтобы посмотреть результат. Вот несколько подсказок, как перемещаться между вкладками Elements и Console.

1. На вкладке Elements выберите первый элемент
2. .
3. Нажмите Esc – прямо под вкладкой Elements откроется Console.

Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0 ; предыдущий, выбранный до него, как $1 и т.д.

Теперь мы можем запускать на них команды. Например $0.style.background = ‘red’ сделает выбранный элемент красным, как здесь:

Это мы посмотрели как получить узел из Elements в Console.

Есть и обратный путь: если есть переменная node , ссылающаяся на DOM-узел, можно использовать в консоли команду inspect(node) , чтобы увидеть этот элемент во вкладке Elements.

Или мы можем просто вывести DOM-узел в консоль и исследовать «на месте», как document.body ниже:

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

Инструменты разработчика браузера отлично помогают в разработке: мы можем исследовать DOM, пробовать с ним что-то делать и смотреть, что идёт не так.

Итого

HTML/XML документы представлены в браузере в виде DOM-дерева.

• Теги становятся узлами-элементами и формируют структуру документа.
• Текст становится текстовыми узлами.
• … и т.д. Всё, что записано в HTML, есть и в DOM-дереве, даже комментарии.

Для изменения элементов или проверки DOM-дерева мы можем использовать инструменты разработчика в браузере.

Здесь мы рассмотрели основы, наиболее часто используемые и важные действия для начала разработки. Подробную документацию по инструментам разработки Chrome Developer Tools можно найти на странице https://developers.google.com/web/tools/chrome-devtools. Лучший способ изучить инструменты – походить по разным вкладкам, почитать меню: большинство действий очевидны для пользователя. Позже, когда вы немного их изучите, прочитайте документацию и узнайте то, что осталось.

У DOM-узлов есть свойства и методы, которые позволяют выбирать любой из элементов, изменять, перемещать их на странице и многое другое. Мы вернёмся к ним в последующих разделах.

Узлы и элементы DOM-дерева в JavaScript

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

Типы и имена DOM-узлов

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

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

Узнать тип узла в DOM можно с помощью свойства nodeType :

JavaScript

console.log(document.nodeType); // 9 console.log(document.body.nodeType); // 1

Это свойство возвращает число от 1 до 12, обозначающее тип узла.

• 1 – элемент ( Node.ELEMENT_NODE );
• 2 – атрибут ( Node.ATTRIBUTE_NODE );
• 3 – текстовый узел ( Node.TEXT_NODE );
• 8 – комментарий ( Node.COMMENT_NODE );
• 9 – document ( Node.DOCUMENT_NODE );
• 10 – узел, содержащий тип документа ( Node.DOCUMENT_TYPE_NODE );
• 11 – узел, представляющий фрагмент документа DocumentFragment ( Node.DOCUMENT_FRAGMENT_NODE ).

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

JavaScript

console.log(document.body.nodeType === Node.DOCUMENT_NODE); // false console.log(document.body.nodeType === Node.ELEMENT_NODE); // true

Например, получим doctype документа и узнаем его числовой код:

JavaScript

const doctype = document.doctype; // это ещё один способ как можно получить doctype документа const doctypeSame = document.childNodes[0]; // получим числовой код узла console.log(doctype.nodeType); // 10 console.log(doctypeSame.nodeType); // 10

Теперь изучим свойство nodeName . С его помощью мы можем узнать имя узла или тег, если узел является элементом:

JavaScript

console.log(document.body.nodeName); // "BODY" console.log(document.doctype.nodeName) // "html" console.log(document.nodeName); // #document"

Свойство nodeName для других узлов, не являющимися элементами возвращает различные значения:

• для текстовых узлов – «#text» ;
• для узлов-комментариев – «#comment» ;
• для document – «#document» и так далее.

Получить имя тега элемента можно не только с помощью nodeName , но также посредством свойства tagName . tagName запрограммирован в браузере как геттер, он содержится в prototype класса Element . nodeName – это тоже геттер, но находится он в другом месте, в prototype класса Node . Поэтому свойство tagName доступно только для узлов-элементов, и не доступно для других типов узлов.

Прочитать про объекты, прототипы и наследование можно в этой статье.

Исследование DOM

В браузерах при разработке веб-приложений и сайтов имеется очень полезный инструмент DevTools .

Открыть в браузере Chrome его можно через меню или посредством комбинации клавиш:

• macOS – Cmd + Shift + I ;
• Windows – Ctrl + Shift + I или F12 ;
• Linux – Ctrl + Shift + I .

На вкладке Element вы можете исследовать DOM и CSS. При необходимости их можно изменять прямо здесь, и смотреть как будут выглядеть эти правки прямо на веб-странице.

Выбрать нужный элемент на веб-странице можно разными способами:

• кликнуть по нему правой кнопкой мыши и выбрать в открывшемся меню пункт «Inspect» или «Посмотреть код»;
• найти его в DOM, для поиска элемента дополнительно можно использовать окно поиска, которое можно вызвать с помощью комбинации клавиш Ctrl + F ;
• нажать на значок и визуально выбрать нужный элемент.

После выбора узла мы можем обратиться к нему в консоли через $0 . При этом предыдущий выбранный узел будет доступен как $1 и так далее. Это можно использовать при изучении DOM и отладке сайта.

Например, выберем комментарий:

JavaScript

// тип узла $0.nodeType // 8 // имя узла $0.nodeName // "#comment" // значение узла $0.nodeValue // " Заголовок H1 "

Свойство nodeValue позволяет получить содержимое текстового узла или комментария. Для остальных узлов оно возвращает в качестве значения null .

С помощью nodeValue e мы можем также установить новое значение этому узлу:

Кроме nodeValue нам также доступно свойство data , с помощью которого мы можем выполнить аналогичные действия:

, а перед ним имеется вот такой контент. Он при парсинге страницы будет преобразован браузером в текстовый узел DOM. Таким образом, первым дочерним узлом
будет именно этот тестовый узел, и только потом уже
• . \n образовался из-за того что мы поставили Enter , а четыре пробела – это то количество пробелов, которые мы установили перед тем как написали тег
• .



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

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

При выборе DOM-элемента на вкладке Styles будет отображаться весь CSS, применённый к этому элементу, в том числе будет отображены и дефолтные стили браузера. Правила можно редактировать, отключать с помощью чекбоксов и дописывать новые. Все изменения применяются сразу.



На вкладке Computed мы можем посмотреть результирующие стили, примененные к элементу.



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



Классы DOM-узлов

Узлы в DOM являются объектами или другими словами экземплярами определенных классов.

Например, DOM-элемент является экземпляром класса HTMLBodyElement . В этом можно убедиться следующим образом:

JavaScript

document.body.constructor.name // HTMLBodyElement // или так document.body.toString() // [object HTMLBodyElement] // или так document.body instanceof HTMLBodyElement // true

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

JavaScript

// например, установим свойству id значение wrapper document.body.id = 'wrapper'; // получим тег элемента document.body.tagName // "BODY"

Например, если выбрать на странице ссылку и получить её класс, то мы увидим, что она является экземпляром HTMLAnchorElement , а не HTMLBodyElement .

JavaScript

$0.constructor.name // HTMLAnchorElement

Экземпляры HTMLAnchorElement в отличие от HTMLBodyElement имеют свои определённые свойства и методы, которых нет у .

В DOM разные элементы могут являются экземплярами разных классов. Но все они в качестве прототипа имеют объект HTMLElement.prototype , то есть значение свойства prototype класса HTMLElement :



JavaScript

document.querySelector('body').__proto__ === HTMLBodyElement.prototype; // true // при наличии элемента на странице document.querySelector('a').__proto__ === HTMLAnchorElement.prototype; // true // при наличии элемента на странице document.querySelector('div').__proto__ === HTMLDivElement.prototype; // true

Таким образом, HTMLElement – это базовый класс, от которого наследуется другие классы, такие как HTMLBodyElement , HTMLAnchorElement , HTMLDivElement и другие. Они в отличие от HTMLElement используются для создания конкретных HTML-элементов.

Но если пойти дальше и рассмотреть класс HTMLElement , то он наследуется от Element .

Кстати, класс Element является основой не только для HTMLElement , но и других классов, например, предназначенных для XML и SVG:



JavaScript

document.querySelector('body').__proto__.__proto__.__proto__ === Element.prototype; // true // при наличии элемента на странице document.querySelector('svg').__proto__.__proto__.__proto__.__proto__ === Element.prototype; // true

Ещё выше находится класс Node . Он содержит общие свойства и методы, характерные для всех DOM-узлов.

При этом класс Node не применяется непосредственно для создания объектов. Он применяется для организации наследования. От него наследуется Element и CharacterData . От CharacterData в свою очередь наследуются классы Text и Comment , которую используются соответственно для создания текстовых узлов и комментариев.



Если пойти ещё выше, то увидим в цепочке прототипов объект EventTarget.prototype . Класс EventTarget – это корневой класс, благодаря которому все DOM-узлы поддерживают обработку событий. В EventTarget.prototype содержатся такие методы, как, например, addEventListener , dispatchEvent и другие.

После EventTarget идёт уже Object . Object – это класс, который является потомком для всех объектов, которые имеются в JavaScript.

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

В чём разница между узлом и элементом DOM?

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



При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?

1. Узел DOM

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

Если рассматривать ситуацию в общих чертах, то оказывается, что DOM-документ включает в себя иерархию узлов. У каждого узла может быть родитель и (или) потомок.

Посмотрим на следующий HTML-документ:

      
My Page
 
Thank you for visiting my web page!
   

В документ входит следующая иерархия узлов:



DOM-представление документа

— это узел в дереве документа. У него есть два дочерних узла — и .

У есть три дочерних узла — комментарий , заголовок и абзац

. Родительским элементом узла является узел .

Теги в HTML-документе представляют узлы. Интересно то, что обычный текст — это тоже узел. Узел-абзац

имеет потомка — текстовый узел Thank you for visiting my web page! .

▍Типы узлов

Как различать узлы разных типов? Ответ кроется в интерфейсе DOM, который носит имя Node. В частности — речь идёт о свойстве Node.nodeType .

Это свойство может иметь одно из следующих значений, представляющих тип узла:

• Node.ELEMENT_NODE
• Node.ATTRIBUTE_NODE
• Node.TEXT_NODE
• Node.CDATA_SECTION_NODE
• Node.PROCESSING_INSTRUCTION_NODE
• Node.COMMENT_NODE
• Node.DOCUMENT_NODE
• Node.DOCUMENT_TYPE_NODE
• Node.DOCUMENT_FRAGMENT_NODE
• Node.NOTATION_NODE

Например, давайте выберем узел-абзац и посмотрим на его свойство nodeType :

const paragraph = document.querySelector('p'); paragraph.nodeType === Node.ELEMENT_NODE; // => true 

Свойство paragraph.nodeType , как и ожидалось, содержит значение Node.ELEMENT_NODE , которое указывает на то, что абзац — это элемент.

В абзаце, кроме того, имеется текстовый узел:

const paragraph = document.querySelector('p'); const firstChild = paragraph.childNodes[0]; firstChild.nodeType === Node.TEXT_NODE; // => true 

Есть тип узла, который представляет всё дерево узлов документа. Это — Node.DOCUMENT_NODE :

document.nodeType === Node.DOCUMENT_NODE; // => true 

2. Элемент DOM

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

Если вы как следует вникли в сущность термина «узел», то вам уже всё должно быть понятно. Элемент — это узел особого типа — Node.ELEMENT_NODE . Это — такой же тип узла, как и другие, представляющие весь документ, комментарии, тексты и прочие узлы DOM.

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

— это всё элементы, так как они представлены тегами.

А вот сам документ, комментарий, текст — это не элементы, так как они не представлены соответствующими тегами:

     
Thank you for visiting my web page!
   

В DOM-API JavaScript конструктор узла — это Node , а HTMLElement — это конструктор элемента. Абзац, хотя это и узел DOM, является ещё и элементом, соответствующий объект является и экземпляром Node , и экземпляром HTMLElement :

const paragraph = document.querySelector('p'); paragraph instanceof Node; // => true paragraph instanceof HTMLElement; // => true 

Если говорить простыми словами, элемент — это подтип узла — так же как кошка — подтип животного.

3. Свойства DOM: узлы и элементы

Помимо различения узлов и элементов нужно ещё различать свойства DOM, которые содержат исключительно узлы или исключительно элементы.

Следующие свойства могут содержать либо узел ( Node ), либо коллекцию узлов ( NodeList ):

node.parentNode; // Node или null node.firstChild; // Node или null node.lastChild; // Node или null node.childNodes; // NodeList 

А вот следующие свойства могут содержать либо элементы ( HTMLElement ), либо коллекции элементов ( HTMLCollection ):

node.parentElement; // HTMLElement или null node.children; // HTMLCollection 

Так как и свойство node.childNodes , и свойство node.children возвращает коллекцию сущностей-потомков, возникает вопрос о том, почему существуют оба этих свойства. На самом деле это — хороший вопрос!

Рассмотрим следующий элемент-абзац, содержащий какой-то текст:

 
Thank you for visiting my web page!
 

Откройте этот демонстрационный пример и посмотрите на свойства childNodes и children узла-абзаца:

const paragraph = document.querySelector('p'); paragraph.childNodes; // NodeList: [HTMLElement, Text] paragraph.children; // HTMLCollection: [HTMLElement] 

Коллекция paragraph.childNodes содержит 2 узла: текст, оформленный полужирным шрифтом с помощью тега ( Thank you ), и текстовый узел ( for visiting my web page! ).

Но в коллекции paragraph.children имеется лишь 1 элемент, представленный тегом ( Thank you ).

Так как свойство paragraph.children содержит только элементы, текстовый узел в него не включён. Произошло это из-за того, что с точки зрения системы это — текст ( Node.TEXT_NODE ), а не элемент ( Node.ELEMENT_NODE ).

То, что у нас есть и node.childNodes , и node.children , позволяет нам выбирать именно ту коллекцию элементов-потомков некоего узла DOM, с которой нужно работать. Это может быть либо коллекция, содержащая все узлы-потомки, либо только те узлы-потомки, которые являются элементами.

4. Итоги

Документ DOM — это иерархическая коллекция узлов. У каждого узла могут быть родители и (или) потомки.

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

У узлов имеется свойство, указывающее на их тип. Один из этих типов соответствует элементам DOM. Элементы представлены тегами в HTML-документе.

Сталкивались ли вы со сложностями, касающимися различения узлов и элементов DOM?

Что является узлом html

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



Освойте профессию «Frontend-разработчик»

Такое дерево нужно для правильного отображения сайта и внесения изменений на страницах с помощью JavaScript. JavaScript — это «живой» язык, он может изменять страницу в реальном времени уже после того, как она «пришла» с сервера в браузер. Этим JavaScript принципиально отличается от PHP, который компилирует страницу и только потом посылает в браузер уже готовый HTML-код.



Для чтения и изменения DOM браузеры предоставляют DOM API (программный интерфейс). DOM API — это набор различных объектов, которые разработчик использует для чтения и изменения DOM с помощью JavaScript.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все



Из чего состоит 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-дерево, и его сложно воспринимать из-за его размера. Для удобства часто используется система многоуровневых списков. Например, предыдущее дерево можно преобразовать в такой список:



Если преобразовать дерево на предыдущем рисунке в код, то получится так:

Как видно из кода, некоторые теги должны закрываться, а некоторые — нет.

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

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



Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Зачем нужно знать, как строится DOM-дерево?

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

Как просмотреть DOM-дерево?

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

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



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

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

Панель ресурсов отображает подключенные ресурсы — это шрифты, изображения, JavaScript- и CSS-файлы.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Похожие публикации:
1. Как настроить обратный звонок в битрикс 24
2. Как перепрошить планшет самсунг
3. Как поменять язык в 1с
4. Как снять ножку с монитора benq