Сколько согласно документации существует типов узлов html
Перейти к содержимому

Сколько согласно документации существует типов узлов html

  • автор:

Узлы и элементы 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 "

Узнаем у выбранного узла DOM его тип, имя и значение

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

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

Изменим значение комментария в DOM с помощью свойства nodeValue

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

Получим и изменим значение текстового узла в DOM с помощью свойства data

Получим текстовое и HTML содержимое элемента в DOM соответственно с помощью методов textContent и innerHTML

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

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

    Текстовый узел, который был образован в DOM из символов переноса строки и пробелов, расположенных перед li

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

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

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

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

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

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

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

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

    Классы 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 :

    Схема, на которой показано что элементы в DOM являются экземплярами разных классов, каждый из которых наследуется от 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:

    Схема, на которой показано что элементы в DOM являются экземплярами разных классов, каждый из которых наследуется от HTMLElement

    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 , которую используются соответственно для создания текстовых узлов и комментариев.

    Классы, которые наследуются от Node

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

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

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

    Лекция 7. DOM – Document Object Model

    Браузер дает доступ к иерархии объектов, которые мы можем использовать для разработки.

    На рисунке схематически отображена структура основных браузерных объектов.

    На вершине стоит window , который еще называют глобальным объектом.

    Все остальные объекты делятся на 3 группы – DOM, BOM и JavaScript.

    Объектная модель документа (DOM)

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

    Объектная модель браузера (BOM)

    Объектная модель браузера (BOM) — объекты, методы и свойства для работы с браузером. BOM — это объекты для работы с чем угодно, кроме документа.

    Доступ к фреймам, запросы к серверу, функции alert/confirm/prompt — все это BOM.

    Объекты и функции JavaScript

    Javascript — связующий все это язык, его объекты, свойства и функции.

    Глобальный объект window имеет две роли:

    1. Это окно браузера. У него есть методы window.focus() , window.open() и другие.
    2. Это глобальный объект JavaScript.

    Вот почему он на рисунке представлен зеленым и красным цветом.

    DOM в примерах.

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

    В DOM страницы представляются в виде иерархического дерева элементов. Каждый листок этого дерева называется узлом и непосредственно связан с каким-то элементом страницы. Узлы, расположенные снизу называются дочерними по отношению к вышестоящим.

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

    Простейший DOM

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

      Заголовок  Прекрасный документ 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Для манипуляций с DOM используется объект document.

    Используя document, можно получать нужный элемент дерева и менять его содержание.

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

    var ol = document.getElementsByTagName('ol')[0] var android = ol.removeChild(ol.firstChild) var ios = ol.removeChild(ol.firstChild) var windows = ol.removeChild(ol.firstChild) ol.appendChild(windows) ol.appendChild(ios) ol.appendChild(android)

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

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

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

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

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

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

    Следующий пример при нажатии на кнопку выдаст текстовое представление объектов document.documentElement и document.body. Сама строка зависит от браузера, хотя объекты везде одни и те же.

       function go()  

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

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

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

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

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

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

    Следующий пример при нажатии на кнопку выведет типы document.documentElement, а затем тип последнего потомка узла document.body. Им является текстовый узел.

       function go() Текст 

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

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

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

    Свойство 1: Все дочерние элементы, включая текстовые, находятся в массиве childNodes.

    Свойство 2: Свойства firstChild и lastChild показывают на первый и последний дочерние элементы и равны null, если детей нет.

    Свойство 3: Свойство parentNode указывает на родителя. Например, для таким элементом является .

    Свойство 4: Свойства previousSibling и nextSibling указывают на левого и правого братьев узла.

    В общем, если взять отдельно с детьми из нормализованного DOM — такая картинка получается от тега :

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

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

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

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

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

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

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

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

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

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

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

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

    onclick, onkeypress, onfocus.

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

    Свойства и Атрибуты

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

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

    Узел DOM — это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы. Поэтому любому узлу можно назначить свойство, используя обычный синтаксис.

    var elem = document.getElementById('MyElement') elem.mySuperProperty = 5

    Значением свойства может быть любой объект.

    elem.master = < name: petya >alert(elem.master.name)
    • Могут иметь любое значение.
    • Работают за счет того, что DOM-узлы являются объектами JavaScript.
    • Названия свойств чувствительны к регистру.

    DOM-Атрибуты

    Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.

    В следующем примере элемент имеет атрибуты id, class и нестандартный (валидатор будет ругаться) атрибут alpha.

    setAttribute(name, value) – Устанавливает значение атрибута Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:

    getAttribute(name) – Получить значение атрибута

    hasAttribute(name) – Проверить, есть ли такой атрибут

    removeAttribute(name) – Удалить атрибут

    Эти методы работают со значением, которое находится в HTML.

    Имя атрибута является регистронезависимым.

    Название маленькими буквами

    document.body.setAttribute('test', 123)
    document.body.getAttribute('TEST') // 123

    Однако в Яваскрипт существует искусственное соответствие между свойством и атрибутом.

    Синхронизация

    А именно, браузер синхронизирует значения ряда свойств с атрибутами. Если меняется атрибут, то меняется и свойство с этим именем. И наоборот.

    document.body.id = 5 alert(document.body.getAttribute('id'))

    А теперь — наоборот

    document.body.setAttribute('id', 'NewId') alert(document.body.id)

    Такая синхронизация гарантируется для всех основных стандартных атрибутов. Стандартным свойство является, только если оно описано в стандарте именно для этого элемента. А теперь — наоборот

    Возможные значения

    Название атрибута не зависит от регистра

    Атрибуты с именами «abc» и «ABC» — один и тот же атрибут.

    document.body.setAttribute('abc', 1) document.body.setAttribute('ABC', 5) alert(document.body.getAttribute('abc')) // => стало 5

    Но свойства в разных регистрах — два разных свойства.

    document.body.abc = 1 document.body.ABC = 5 alert(document.body.abc) // => все еще 1

    Атрибут можно установить любой, а свойство — нет. Но свойства в разных регистрах — два разных свойства.

    Например, можно установить для тэга атрибут tagName, но соответствующее свойство — только для чтения, поэтому оно не изменится:

    document.body.setAttribute('tagName',1) document.body.getAttribute('tagName') // 1 document.body.tagName // "BODY" 

    Вообще говоря, браузер не гарантирует синхронизацию атрибута и свойства.

    • Атрибуты — это то, что написано в HTML.
    • Свойство — это то, что находится в свойстве DOM-объекта.

    Таблица сравнений для атрибутов и свойств:

    Не чувствительны к регистру

    Не видны в innerHTML

    Видны в innerHTML

    Поиск элементов в DOM

    Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById, getElementsByTagName и getElementsByName.

    Поиск по id

    Самый удобный способ найти элемент в DOM — это получить его по id. Для этого используется вызов document.getElementById(id)

    Например, следующий код изменит цвет текста на голубой в div’е c id=»dataKeeper»:

    document.getElementById('dataKeeper').style.color = 'blue' 

    Поиск по тегу

    Следующий способ — это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.

    Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:

    document.getElementsByTagName('LI')[1] 

    Что интересно, getElementsByTagName можно вызывать не только для document, но и вообще для любого элемента, у которого есть тег (не текстового).

    При этом будут найдены только те объекты, которые находятся под этим элементом.

    Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:

    document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')

    Получить всех потомков

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

      

    Проба

    Проба

    Проба

    Проба

    function ImageClick()

    Вызов elem.getElementsByTagName(‘*’) вернет список из всех детей узла elem в порядке их обхода.

    Например, на таком DOM:

    var div = document.getElementById('d1') var elems = div.getElementsByTagName('*') for(var i=0; i

    Выведет последовательность: ol1, li1, li2.

    Поиск по name:

    Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.

    Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких.

    Метод document.getElementsByName не будет работать с остальными элементами типа div,p и т.п.

    Создание и добавление элементов

    метод document.createElement(тип) - Создает новый элемент с указанным тегом:

    var newDiv = document.createElement('div')

    Тут же можно и проставить свойства и содержание созданному элементу.

    var newDiv = document.createElement('div') newDiv.className = 'my-class' newDiv.id = 'my-id' newDiv.style.backgroundColor = 'red' newDiv.innerHTML = 'Привет, мир!'

    document.createTextNode(text) - Создает новый текстовый узел с данным текстом:

    var textElem = document.createTextNode('Текстовый элемент');

    Добавление в DOM

    Добавить новый элемент к детям существующего элемента можно методом appendChild, который в DOM есть у любого тега.

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

    var list = document.getElementById('list')
    var li = document.createElement('LI') li.innerHTML = 'Новый элемент списка'

    Добавление в конец

    list.appendChild(li)

    Метод appendChild всегда добавляет элемент последним в список детей.

    Добавление в конкретное место

    Новый элемент можно добавить не в конец детей, а перед нужным элементом.

    Для этого используется метод insertBefore родительского элемента.

    Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять. parentElem.insertBefore(newElem, target)

    Например, в том же списке добавим элементы перед первым li.

    Первый элемент

    Родительский элемент UL

    var list = document.getElementById('list2')

    Элемент для вставки перед ним (первый LI)

    var firstLi = list.getElementsByTagName('LI')[0]
    var newListElem = document.createElement('LI') newListElem.innerHTML = 'Новый элемент списка'
    list.insertBefore(newListElem, firstLi)

    Метод insertBefore позволяет вставлять элемент в любое место, кроме как в конец. А с этим справляется appendChild. Так что эти методы дополняют друг друга.

    Метода insertAfter нет, но нужную функцию легко написать на основе комбинации insertBefore и appendChild.

    Удаление узла DOM

    Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя.

    Удаляет elem из списка детей parentElem.

    Этот метод возвращают удаленный узел, то есть elem. Его можно вставить в другое место DOM.

    Метод document.write

    Метод document.write — один из наиболее древних методов добавления текста к документу.

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

    Как работает document.write

    Метод document.write(str) работает, только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.

    Нет никаких ограничений на содержимое document.write .

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

    Также существует метод document.writeln(str) — не менее древний, который добавляет после str символ перевода строки "\n" .

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

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

    Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.

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

    Если вы нажмёте на такую кнопку — содержимое уже загруженной страницы удалится:

    Из-за этой особенности document.write для загруженных документов не используют.

    Метод document.write (или writeln) пишет текст прямо в HTML, как будто он там всегда был.

    • Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы. Запуск после загрузки приведёт к очистке документа.
    • Метод document.write очень быстр.

    В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.

    BOM-объекты: navigator, screen, location, frames

    navigator: платформа и браузер

    Объект navigator содержит общую информацию о браузере и операционной системе.

    Имеет два свойства:

    • navigator.userAgent — содержит информацию о браузере.
    • navigator.platform — содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п..

    Для вашего браузера значения:

    alert(navigator.userAgent); alert(navigator.platform); 

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

    Текущее разрешение экрана посетителя по горизонтали/вертикали находится в alert(screen.width+"x"+screen.height);

    Это свойство можно использовать для сбора статистической информации о посетителях.

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

    Объект Location предоставляет информацию о текущем URL и позволяет JavaScript перенаправить посетителя на другой URL. Значением этого свойства является объект типа Location .

    Методы и свойства Location

    Самый главный метод — toString . Он возвращает полный URL.

    Следующая кнопка выведет текущий адрес:

    Код, которому нужно провести строковую операцию над Location , должен сначала привести объект к строке. Вот так будет ошибка:

    // будет ошибка, т.к. location - не строка alert( window.location.indexOf('://') );

    … А так - правильно:

    // привели к строке перед indexOf alert( (window.location + '').indexOf('://') );

    Все следующие свойства являются строками.
    Колонка «Пример» содержит их значения для тестового URL:

    (в коде набирать так: window.location.href)

    часть URL, которая идет после символа решетки ‘#’, включая символ ‘#’

    Руководство по DOM

    Объектная Модель Документа (DOM) является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.

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

    DOM интерфейсы

    • Attr
    • CharacterData
    • ChildNode Экспериментальная возможность
    • Comment
    • CustomEvent (en-US)
    • Document
    • DocumentFragment
    • DocumentType (en-US)
    • DOMError (en-US)
    • DOMException (en-US)
    • DOMImplementation
    • DOMString
    • DOMTimeStamp (en-US)
    • DOMSettableTokenList
    • DOMStringList
    • DOMTokenList
    • Element
    • Event
    • EventTarget
    • HTMLCollection
    • MutationObserver
    • MutationRecord (en-US)
    • Node
    • NodeFilter (en-US)
    • NodeIterator (en-US)
    • NodeList
    • ParentNode Экспериментальная возможность
    • ProcessingInstruction (en-US)
    • Promise (en-US) Экспериментальная возможность
    • PromiseResolver (en-US) Экспериментальная возможность
    • Range
    • Text
    • TreeWalker (en-US)
    • URL
    • Window
    • Worker
    • XMLDocument Экспериментальная возможность

    Устаревшие интерфейсы

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

    • CDATASection
    • DOMConfiguration
    • DOMErrorHandler
    • DOMImplementationList
    • DOMImplementationRegistry
    • DOMImplementationSource
    • DOMLocator
    • DOMObject
    • DOMUserData
    • Entity
    • EntityReference
    • NamedNodeMap
    • NameList
    • Notation
    • TypeInfo
    • UserDataHandler

    HTML интерфейсы

    Документ, содержащий HTML описывается с помощью HTMLDocument интерфейса. Обратите внимание, что HTML спецификация также расширяет Document интерфейс.

    Объект HTMLDocument также даёт доступ к следующим возможностям браузера: вкладки, окна, в которых отрисовывается страница, используя интерфейс Window , ассоциированный с ним Style (обычно CSS), история браузера, относящаяся к контексту, History , в конце концов, Selection (en-US) в документе.

    Интерфейсы HTML-элементов

    • HTMLAnchorElement
    • HTMLAppletElement
    • HTMLAreaElement
    • HTMLAudioElement
    • HTMLBaseElement
    • HTMLBodyElement
    • HTMLBRElement
    • HTMLButtonElement
    • HTMLCanvasElement
    • HTMLDataElement
    • HTMLDataListElement (en-US)
    • HTMLDirectoryElement
    • HTMLDivElement
    • HTMLDListElement (en-US)
    • HTMLElement
    • HTMLEmbedElement (en-US)
    • HTMLFieldSetElement (en-US)
    • HTMLFontElement (en-US)
    • HTMLFormElement (en-US)
    • HTMLFrameElement
    • HTMLFrameSetElement (en-US)
    • HTMLHeadElement
    • HTMLHeadingElement
    • HTMLHtmlElement (en-US)
    • HTMLHRElement (en-US)
    • HTMLIFrameElement (en-US)
    • HTMLImageElement
    • HTMLInputElement (en-US)
    • HTMLLabelElement (en-US)
    • HTMLLegendElement (en-US)
    • HTMLLIElement (en-US)
    • HTMLLinkElement
    • HTMLMapElement (en-US)
    • HTMLMediaElement
    • HTMLMenuElement (en-US)
    • HTMLMetaElement (en-US)
    • HTMLMeterElement (en-US)
    • HTMLModElement (en-US)
    • HTMLObjectElement (en-US)
    • HTMLOListElement (en-US)
    • HTMLOptGroupElement (en-US)
    • HTMLOptionElement (en-US)
    • HTMLOutputElement (en-US)
    • HTMLParagraphElement (en-US)
    • HTMLParamElement (en-US)
    • HTMLPreElement (en-US)
    • HTMLProgressElement (en-US)
    • HTMLQuoteElement (en-US)
    • HTMLScriptElement
    • HTMLSelectElement (en-US)
    • HTMLSourceElement (en-US)
    • HTMLSpanElement (en-US)
    • HTMLStyleElement (en-US)
    • HTMLTableElement
    • HTMLTableCaptionElement (en-US)
    • HTMLTableCellElement (en-US)
    • HTMLTableDataCellElement (en-US)
    • HTMLTableHeaderCellElement (en-US)
    • HTMLTableColElement (en-US)
    • HTMLTableRowElement (en-US)
    • HTMLTableSectionElement (en-US)
    • HTMLTextAreaElement (en-US)
    • HTMLTimeElement
    • HTMLTitleElement (en-US)
    • HTMLTrackElement
    • HTMLUListElement (en-US)
    • HTMLUnknownElement
    • HTMLVideoElement

    Другие интерфейсы

    • CanvasRenderingContext2D
    • CanvasGradient
    • CanvasPattern
    • TextMetrics (en-US)
    • ImageData
    • CanvasPixelArray (en-US)
    • NotifyAudioAvailableEvent
    • HTMLAllCollection (en-US)
    • HTMLFormControlsCollection (en-US)
    • HTMLOptionsCollection (en-US)
    • HTMLPropertiesCollection
    • DOMStringMap
    • RadioNodeList (en-US)
    • MediaError

    Устаревшие HTML интерфейсы

    SVG интерфейсы

    Интерфейсы SVG элементов

    • SVGAElement
    • SVGAltGlyphElement
    • SVGAltGlyphDefElement
    • SVGAltGlyphItemElement
    • SVGAnimationElement (en-US)
    • SVGAnimateElement (en-US)
    • SVGAnimateColorElement (en-US)
    • SVGAnimateMotionElement (en-US)
    • SVGAnimateTransformElement (en-US)
    • SVGCircleElement (en-US)
    • SVGClipPathElement (en-US)
    • SVGColorProfileElement
    • SVGComponentTransferFunctionElement (en-US)
    • SVGCursorElement (en-US)
    • SVGDefsElement (en-US)
    • SVGDescElement (en-US)
    • SVGElement (en-US)
    • SVGEllipseElement (en-US)
    • SVGFEBlendElement (en-US)
    • SVGFEColorMatrixElement (en-US)
    • SVGFEComponentTransferElement (en-US)
    • SVGFECompositeElement (en-US)
    • SVGFEConvolveMatrixElement (en-US)
    • SVGFEDiffuseLightingElement (en-US)
    • SVGFEDisplacementMapElement (en-US)
    • SVGFEDistantLightElement (en-US)
    • SVGFEFloodElement (en-US)
    • SVGFEGaussianBlurElement (en-US)
    • SVGFEImageElement (en-US)
    • SVGFEMergeElement (en-US)
    • SVGFEMergeNodeElement (en-US)
    • SVGFEMorphologyElement (en-US)
    • SVGFEOffsetElement (en-US)
    • SVGFEPointLightElement (en-US)
    • SVGFESpecularLightingElement (en-US)
    • SVGFESpotLightElement (en-US)
    • SVGFETileElement (en-US)
    • SVGFETurbulenceElement (en-US)
    • SVGFEFuncRElement (en-US)
    • SVGFEFuncGElement (en-US)
    • SVGFEFuncBElement (en-US)
    • SVGFEFuncAElement (en-US)
    • SVGFilterElement (en-US)
    • SVGFilterPrimitiveStandardAttributes
    • SVGFontElement (en-US)
    • SVGFontFaceElement (en-US)
    • SVGFontFaceFormatElement (en-US)
    • SVGFontFaceNameElement (en-US)
    • SVGFontFaceSrcElement (en-US)
    • SVGFontFaceUriElement (en-US)
    • SVGForeignObjectElement (en-US)
    • SVGGElement (en-US)
    • SVGGlyphElement (en-US)
    • SVGGlyphRefElement (en-US)
    • SVGGradientElement (en-US)
    • SVGHKernElement (en-US)
    • SVGImageElement (en-US)
    • SVGLinearGradientElement (en-US)
    • SVGLineElement (en-US)
    • SVGMarkerElement (en-US)
    • SVGMaskElement (en-US)
    • SVGMetadataElement (en-US)
    • SVGMissingGlyphElement (en-US)
    • SVGMPathElement (en-US)
    • SVGPathElement (en-US)
    • SVGPatternElement (en-US)
    • SVGPolylineElement (en-US)
    • SVGPolygonElement (en-US)
    • SVGRadialGradientElement (en-US)
    • SVGRectElement (en-US)
    • SVGScriptElement (en-US)
    • SVGSetElement (en-US)
    • SVGStopElement (en-US)
    • SVGStyleElement (en-US)
    • SVGSVGElement (en-US)
    • SVGSwitchElement (en-US)
    • SVGSymbolElement (en-US)
    • SVGTextElement
    • SVGTextPathElement (en-US)
    • SVGTitleElement (en-US)
    • SVGTRefElement (en-US)
    • SVGTSpanElement (en-US)
    • SVGUseElement (en-US)
    • SVGViewElement (en-US)
    • SVGVKernElement (en-US)

    Интерфейсы SVG данных

    DOM API для типов данных, используемых в определениях SVG свойств и атрибутов.

    Примечание: Начиная с Gecko 5.0, следующие относящиеся к SVG DOM интерфейсы, представляя списки объектов, индексируются и к ним можно иметь доступ как к массивам; к тому же, у них есть свойство длины, обозначающее количество элементов в списках: SVGLengthList (en-US), SVGNumberList (en-US), SVGPathSegList и SVGPointList (en-US).

    Статический тип
    Анимированный тип
    • SVGAnimatedAngle (en-US)
    • SVGAnimatedBoolean (en-US)
    • SVGAnimatedEnumeration (en-US)
    • SVGAnimatedInteger (en-US)
    • SVGAnimatedLength (en-US)
    • SVGAnimatedLengthList (en-US)
    • SVGAnimatedNumber (en-US)
    • SVGAnimatedNumberList (en-US)
    • SVGAnimatedPreserveAspectRatio (en-US)
    • SVGAnimatedRect (en-US)
    • SVGAnimatedString (en-US)
    • SVGAnimatedTransformList (en-US)

    Относящиеся к SMIL

    Другие SVG интерфейсы

    • SVGAnimatedPathData
    • SVGAnimatedPoints (en-US)
    • SVGColorProfileRule
    • SVGCSSRule
    • SVGExternalResourcesRequired
    • SVGFitToViewBox
    • SVGLangSpace
    • SVGLocatable
    • SVGRenderingIntent (en-US)
    • SVGStylable (en-US)
    • SVGTests
    • SVGTextContentElement
    • SVGTextPositioningElement (en-US)
    • SVGTransformable
    • SVGUnitTypes (en-US)
    • SVGURIReference (en-US)
    • SVGViewSpec
    • SVGZoomAndPan

    Смотрите также

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 4 дек. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    • Product help
    • Report an issue

    Our communities

    Developers

    • Web Technologies
    • Learn Web Development
    • MDN Plus
    • Hacks Blog
    • Website Privacy Notice
    • Cookies
    • Legal
    • Community Participation Guidelines

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Работа с DOM-моделью

    Каждый объект Window имеет свойство document, ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.

    Обзор модели DOM

    - это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.

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

    , и узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

      Пример документа  

    Это HTML-документ

    Пример простого текста.

    DOM-представление этого документа приводится на следующей диаграмме:

    DOM

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

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

    Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:

    Иерархия классов узлов JavaScript

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

    Выбор элементов документа

    Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

    • по значению атрибута id;
    • по значению атрибута name;
    • по имени тега;
    • по имени класса или классов CSS;
    • по совпадению с определенным селектором CSS.

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

    Выбор элементов по значению атрибута id

    Все HTML-элементы имеют атрибуты id. Значение этого атрибута должно быть уникальным в пределах документа - никакие два элемента в одном и том же документе не должны иметь одинаковые значения атрибута id. Выбрать элемент по уникальному значению атрибута id можно с помощью метода getElementById() объекта Document:

    var section1 = document.getElementById("section1");

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

    В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.

    Выбор элементов по значению атрибута name

    HTML-атрибут name первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту id, атрибут name присваивает имя элементу. Однако, в отличие от id, значение атрибута name не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от id, атрибут name допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы и .

    Выбрать HTML-элементы, опираясь на значения их атрибутов name, можно с помощью метода getElementsByName() объекта Document:

    var radiobuttons = document.getElementsByName("favorite_color");

    Метод getElementsByName() определяется не классом Document, а классом HTMLDocument, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект NodeList, который ведет себя, как доступный только для чтения массив объектов Element.

    В IE метод getElementsByName() возвращает также элементы, значения атрибутов id которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями браузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов name и id.

    Выбор элементов по типу

    Метод getElementsByTagName() объекта Document позволяет выбрать все HTML или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты Element всех элементов в документе, можно следующим образом:

    var spans = document.getElementsByTagName("span"); 

    Подобно методу getElementsByName(), getElementsByTagName() возвращает объект NodeList. Элементы документа включаются в массив NodeList в том же порядке, в каком они следуют в документе, т.е. первый элемент

    в документе можно выбрать так:

    var firstParagraph = document.getElementsByTagName("p")[0];

    Имена HTML-тегов не чувствительны к регистру символов, и когда getElementsByTagName() применяется к HTML-документу, он выполняет сравнение с именем тега без учета регистра символов. Переменная spans, созданная выше, например, будет включать также все элементы , которые записаны как .

    Можно получить NodeList, содержащий все элементы документа, если передать методу getElementsByTagName() шаблонный символ «*».

    Кроме того, классом Element также определяет метод getElementsByTagName(). Он действует точно так же, как и версия метода в классе Document, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы внутри первого элемента

    можно следующим образом:

    var firstParagraph = document.getElementsByTagName("p")[0]; var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

    По историческим причинам класс HTMLDocument определяет специальные свойства для доступа к узлам определенных типов. Свойства images, forms и links, например, ссылаются на объекты, которые ведут себя как массивы, доступные только для чтения, содержащие элементы , и (но только те теги , которые имеют атрибут href). Эти свойства ссылаются на объекты HTMLCollection, которые во многом похожи на объекты NodeList, но дополнительно могут индексироваться значениями атрибутов id и name.

    Объект HTMLDocument также определяет свойства-синонимы embeds и plugins, являющиеся коллекциями HTMLCollection элементов . Свойство anchors является нестандартным, но с его помощью можно получить доступ к элементам , имеющим атрибут name, но не имеющим атрибут href. Свойство scripts определено стандартом HTML5 и является коллекцией HTMLCollection элементов .

    Кроме того, объект HTMLDocument определяет два свойства, каждое из которых ссылается не на коллекцию, а на единственный элемент. Свойство document.body представляет элемент HTML-документа, а свойство document.head - элемент . Эти свойства всегда определены в документе: даже если в исходном документе отсутствуют элементы и , браузер создаст их неявно. Свойство documentElement объекта Document ссылается на корневой элемент документа. В HTML-документах он всегда представляет элемент .

    Выбор элементов по классу CSS

    Значением HTML-атрибута class является список из нуля или более идентификаторов, разделенных пробелами. Он дает возможность определять множества связанных элементов документа: любые элементы, имеющие в атрибуте class один и тот же идентификатор, являются частью одного множества. Слово class зарезервировано в языке JavaScript, поэтому для хранения значения HTML-атрибута class в клиентском JavaScript используется свойство className.

    Обычно атрибут class используется вместе с каскадными таблицами стилей CSS, с целью применить общий стиль отображения ко всем членам множества. Однако кроме этого, стандарт HTML5 определяет метод getElementsByClassName(), позволяющий выбирать множества элементов документа на основе идентификаторов в их атрибутах class.

    Подобно методу getElementsByTagName(), метод getElementsByClassName() может вызываться и для HTML-документов, и для HTML-элементов, и возвращает «живой» объект NodeList, содержащий все потомки документа или элемента, соответствующие критерию поиска.

    Метод getElementsByClassName() принимает единственный строковый аргумент, но в самой строке может быть указано несколько идентификаторов, разделенных пробелами. Соответствующими будут считаться все элементы, атрибуты class которых содержат все указанные идентификаторы. Порядок следования идентификаторов не имеет значения. Обратите внимание, что и в атрибуте class, и в аргументе метода getElementsByClassName() идентификаторы классов разделяются пробелами, а не запятыми.

    Ниже приводится несколько примеров использования метода getElementsByClassName():

    // Отыскать все элементы с классом "warning" var warnings = document.getElementsByClassName("warning"); // Отыскать всех потомков элемента с идентификаторам "log" // с классами "error" и "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("fatal error");

    Выбор элементов с использованием селекторов CSS

    Каскадные таблицы стилей CSS имеют очень мощные синтаксические конструкции, известные как селекторы, позволяющие описывать элементы или множества элементов документа. Наряду со стандартизацией селекторов CSS3, другой стандарт консорциума W3C, известный как Selectors API, определяет методы JavaScript для получения элементов, соответствующих указанному селектору.

    Ключевым в этом API является метод querySelectorAll() объекта Document. Он принимает единственный строковый аргумент с селектором CSS и возвращает объект NodeList, представляющий все элементы документа, соответствующие селектору.

    В дополнение к методу querySelectorAll() объект документа также определяет метод querySelector(), подобный методу querySelectorAll(), - с тем отличием, что он возвращает только первый (в порядке следования в документе) соответствующий элемент или null, в случае отсутствия соответствующих элементов.

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

    Структура документа и навигация по документу

    После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект Document можно представить как дерево объектов Node. Тип Node определяет свойства, позволяющие перемещаться по такому дереву. Существует еще один прикладной интерфейс навигации по документу, как дерева объектов Element.

    Документы как деревья узлов

    Объект Document, его объекты Element и объекты Text, представляющие текстовые фрагменты в документе - все они являются объектами Node. Класс Node определяет следующие важные свойства:

    parentNode

    Родительский узел данного узла или null для узлов, не имеющих родителя, таких как Document.

    childNodes

    Доступный для чтения объект, подобный массиву (NodeList), обеспечивающий представление дочерних узлов.

    firstChild, lastChild

    Первый и последний дочерние узлы или null, если данный узел не имеет дочерних узлов.

    nextSibling, previousSibling

    Следующий и предыдущий братские узлы. Братскими называются два узла, имеющие одного и того же родителя. Порядок их следования соответствует порядку следования в документе. Эти свойства связывают узлы в двусвязный список.

    nodeType

    Тип данного узла. Узлы типа Document имеют значение 9 в этом свойстве. Узлы типа Element - значение 1. Текстовые узлы типа Text - значение 3. Узлы типа Comments - значение 8 и узлы типа DocumentFragment - значение 11.

    nodeValue

    Текстовое содержимое узлов Text и Comment.

    nodeName

    Имя тега элемента Element, в котором все символы преобразованы в верхний регистр.

    С помощью этих свойств класса Node можно сослаться на второй дочерний узел первого дочернего узла объекта Document, как показано ниже:

    document.childNodes[0].childNodes[1] == document.firstChild.firstChild.nextSibling

    Допустим, что рассматриваемый документ имеет следующий вид:

    TestHello World!

    Тогда вторым дочерним узлом первого дочернего узла будет элемент . В свойстве nodeType он содержит значение 1 и в свойстве nodeName - значение «BODY».

    Однако, обратите внимание, что этот прикладной интерфейс чрезвычайно чувствителен к изменениям в тексте документа. Например, если в этот документ добавить единственный перевод строки между тегами и , этот символ перевода строки станет первым дочерним узлом (текстовым узлом Text) первого дочернего узла, а вторым дочерним узлом станет элемент , а не .

    Документы как деревья элементов

    Когда основной интерес представляют сами элементы документа, а не текст в них (и пробельные символы между ними), гораздо удобнее использовать прикладной интерфейс, позволяющий интерпретировать документ как дерево объектов Element, игнорируя узлы Text и Comment, которые также являются частью документа.

    Первой частью этого прикладного интерфейса является свойство children объектов Element. Подобно свойству childNodes, его значением является объект NodeList. Однако, в отличие от свойства childNodes, список children содержит только объекты Element.

    Обратите внимание, что узлы Text и Comment не имеют дочерних узлов. Это означает, что описанное выше свойство Node.parentNode никогда не возвращает узлы типа Text или Comment. Значением свойства parentNode любого объекта Element всегда будет другой объект Element или корень дерева - объект Document или DocumentFragment.

    Второй частью прикладного интерфейса навигации по элементам документа являются свойства объекта Element, аналогичные свойствам доступа к дочерним и братским узлам объекта Node:

    firstElementChild, lastElementChild

    Похожи на свойства firstChild и lastChild, но возвращают дочерние элементы.

    nextElementSibling, previousElementSibling

    Похожи на свойства nextSibling и previousSibling, но возвращают братские элементы.

    childElementCount

    Количество дочерних элементов. Возвращает то же значение, что и свойство children.length.

    Эти свойства доступа к дочерним и братским элементам стандартизованы и реализованы во всех текущих браузерах, кроме IE.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *