Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.
При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.
Например, если тег выглядит как , то у объекта будет свойство body.id = «page» .
Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.
Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.
Свои DOM-свойства
Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.
Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.
Например, создадим в document.body новое свойство и запишем в него объект:
Эти методы работают со значением, которое находится в HTML.
Также все атрибуты элемента можно получить с помощью свойства elem.attributes , которое содержит псевдо-массив объектов типа Attr.
В отличие от свойств, атрибуты:
Всегда являются строками.
Их имя нечувствительно к регистру (ведь это HTML)
Видны в innerHTML (за исключением старых IE)
Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:
Пример ниже устанавливает атрибуты и демонстрирует их особенности.
alert( elem.getAttribute('About') ); // (1) 'Elephant', атрибут получен elem.setAttribute('Test', 123); // (2) атрибут Test установлен alert( document.body.innerHTML ); // (3) в HTML видны все атрибуты! var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов for (var i = 0; i
При запуске кода выше обратите внимание:
getAttribute(‘About’) – первая буква имени атрибута About написана в верхнем регистре, а в HTML – в нижнем, но это не имеет значения, так как имена нечувствительны к регистру.
Мы можем записать в атрибут любое значение, но оно будет превращено в строку. Объекты также будут автоматически преобразованы.
После добавления атрибута его можно увидеть в innerHTML элемента.
Коллекция attributes содержит все атрибуты в виде объектов со свойствами name и value .
Когда полезен доступ к атрибутам?
Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов.
Например, свойства тега ‘A’ описаны в спецификации DOM: HTMLAnchorElement.
Например, у него есть свойство «href» . Кроме того, он имеет «id» и другие свойства, общие для всех элементов, которые описаны в спецификации в HTMLElement.
Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут.
Рассмотрим несколько примеров.
Ссылка «как есть» из атрибута href
Синхронизация не гарантирует одинакового значения в атрибуте и свойстве.
Для примера, посмотрим, что произойдёт с атрибутом «href» при изменении свойства:
Это происходит потому, что атрибут может быть любым, а свойство href , в соответствии со спецификацией W3C, должно быть полной ссылкой.
Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.
Есть и другие подобные атрибуты
Кстати, есть и другие атрибуты, которые не копируются в точности. Например, DOM-свойство input.checked имеет логическое значение true/false , а HTML-атрибут checked – любое строковое, важно лишь его наличие.
Работа с checked через атрибут и свойство:
Чаще синхронизация – односторонняя: свойство зависит от атрибута, но не наоборот.
Например, при изменении свойства input.value атрибут input.getAttribute('value') не меняется:
То есть, изменение DOM-свойства value на атрибут не влияет, он остаётся таким же.
А вот изменение атрибута обновляет свойство:
Эту особенность можно красиво использовать.
Получается, что атрибут input.getAttribute('value') хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось.
Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.
Классы в виде строки: className
Атрибуту "class" соответствует свойство className .
Так как слово "class" является зарезервированным словом в JavaScript, то при проектировании DOM решили, что соответствующее свойство будет называться className .
Кстати, есть и другие атрибуты, которые называются иначе, чем свойство. Например, атрибуту for ( ) соответствует свойство с названием htmlFor .
Классы в виде объекта: classList
Атрибут class – уникален. Ему соответствует аж целых два свойства!
Работать с классами как со строкой неудобно. Поэтому, кроме className , в современных браузерах есть свойство classList .
Свойство classList – это объект для работы с классами.
Оно поддерживается в IE начиная с IE10, но его можно эмулировать в IE8+, подключив мини-библиотеку classList.js.
elem.classList.contains("class") – возвращает true/false , в зависимости от того, есть ли у элемента класс class .
elem.classList.add/remove("class") – добавляет/удаляет класс class
elem.classList.toggle("class") – если класса class нет, добавляет его, если есть – удаляет.
Кроме того, можно перебрать классы через for , так как classList – это псевдо-массив.
Нестандартные атрибуты
У каждого элемента есть некоторый набор стандартных свойств, например для это будут href , name , а для это будут src , alt , и так далее.
Точный набор свойств описан в стандарте, обычно мы более-менее представляем, если пользуемся HTML, какие свойства могут быть, а какие – нет.
Для нестандартных атрибутов DOM-свойство не создаётся.
Свойство является стандартным, только если оно описано в стандарте именно для этого элемента.
То есть, если назначить элементу атрибут href , то свойство img.href от этого не появится. Как, впрочем, и если назначить ссылке атрибут alt :
Нестандартные атрибуты иногда используют для CSS.
В примере ниже для показа «состояния заказа» используется атрибут order-state :
…То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.
Проще говоря, значение атрибута – произвольная строка, значение класса – это «есть» или «нет», поэтому естественно, что атрибуты «мощнее» и бывают удобнее классов как в JS так и в CSS.
Свойство dataset, data-атрибуты
С помощью нестандартных атрибутов можно привязать к элементу данные, которые будут доступны в JavaScript.
Как правило, это делается при помощи атрибутов с названиями, начинающимися на data- , например:
По улице прошёлся слон. Весьма красив и толст был он.
Стандарт HTML5 специально разрешает атрибуты data-* и резервирует их для пользовательских данных.
При этом во всех браузерах, кроме IE10-, к таким атрибутам можно обратиться не только как к атрибутам, но и как к свойствам, при помощи специального свойства dataset :
По улице прошёлся слон. Весьма красив и толст был он.
Обратим внимание – название data-user-location трансформировалось в dataset.userLocation . Дефис превращается в большую букву.
Полифил для атрибута hidden
Для старых браузеров современные атрибуты иногда нуждаются в полифиле. Как правило, такой полифил включает в себя не только JavaScript, но и CSS.
Этот атрибут должен прятать элемент, действие весьма простое, для его поддержки в HTML достаточно такого CSS:
[hidden]
Текст
С атрибутом hidden
Если запустить в IE11- пример выше, то будет скрыт, а вот последний div , которому поставили свойство hidden в JavaScript – по-прежнему виден.
Это потому что CSS «не видит» присвоенное свойство, нужно синхронизировать его в атрибут.
Вот так – уже работает:
[hidden]
Текст
С атрибутом hidden
«Особенности» IE8
Если вам нужна поддержка этих версий IE – есть пара нюансов.
Во-первых, версии IE8- синхронизируют все свойства и атрибуты, а не только стандартные:
document.body.setAttribute('my', 123); alert( document.body.my ); // 123 в IE8-
Вывод из этого довольно прост – чтобы не иметь проблем в IE8, нужно использовать всегда только свойства, кроме тех ситуаций, когда нужны именно атрибуты. Впрочем, это в любом случае хорошая практика.
Итого
Атрибуты – это то, что написано в HTML.
Свойство – это то, что находится внутри DOM-объекта.
Таблица сравнений для атрибутов и свойств:
Свойства
Атрибуты
Любое значение
Строка
Названия регистрозависимы
Не чувствительны к регистру
Не видны в innerHTML
Видны в innerHTML
Синхронизация между атрибутами и свойствами:
Стандартные свойства и атрибуты синхронизируются: установка атрибута автоматически ставит свойство DOM. Некоторые свойства синхронизируются в обе стороны.
Бывает так, что свойство не совсем соответствует атрибуту. Например, «логические» свойства вроде checked , selected всегда имеют значение true/false , а в атрибут можно записать произвольную строку.Выше мы видели другие примеры на эту тему, например href .
Нестандартный атрибут (если забыть глюки старых IE) никогда не попадёт в свойство, так что для кросс-браузерного доступа к нему нужно обязательно использовать getAttribute .
Атрибуты, название которых начинается с data- , можно прочитать через dataset . Эта возможность не поддерживается IE10-.
Для того, чтобы избежать проблем со старыми IE, а также для более короткого и понятного кода старайтесь везде использовать свойства, а атрибуты – только там, где это действительно нужно.
А действительно нужны атрибуты очень редко – лишь в следующих трёх случаях:
Когда нужно кросс-браузерно получить нестандартный HTML-атрибут.
Когда нужно получить «оригинальное значение» стандартного HTML-атрибута, например, .
Когда нужно получить список всех атрибутов, включая пользовательские. Для этого используется коллекция attributes .
Если вы хотите использовать собственные атрибуты в HTML, то помните, что атрибуты с именем, начинающимся на data- валидны в HTML5 и современные браузеры поддерживают доступ к ним через свойство dataset .
Задачи
Поставьте класс ссылкам
важность: 3
Сделайте жёлтыми внешние ссылки, добавив им класс external .
Что является свойством объекта входящего в dom
На чём стоят три слона, на которых держится веб?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 6 октября 2022
Кратко
Скопировать ссылку "Кратко" Скопировано
DOM (Document Object Model) — это специальная древовидная структура, которая позволяет управлять HTML-разметкой из JavaScript-кода. Управление обычно состоит из добавления и удаления элементов, изменения их стилей и содержимого.
Браузер создаёт DOM при загрузке страницы, складывает его в переменную document и сообщает, что DOM создан, с помощью события DOM Content Loaded . С переменной document начинается любая работа с HTML-разметкой в JavaScript.
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Объект document содержит большое количество свойств и методов, которые позволяют работать с HTML. Чаще всего используются методы, позволяющие найти элементы страницы.
Свойства
Скопировать ссылку "Свойства" Скопировано
title — заголовок документа. Браузер обычно показывает его на вкладке.
Установить свой заголовок можно простым присваиванием:
document.title = 'Мое название документа'console.log(document.title)// Мое название документаdocument.title='Мое название документа'console.log(document.title)// Мое название документа
forms — получить список форм на странице. Свойство только для чтения, напрямую перезаписать его нельзя.
body — получить элемент страницы.
head — получить элемент страницы.
Методы
Скопировать ссылку "Методы" Скопировано
get Element By Id — поиск элемента по идентификатору;
get Elements By Class Name — поиск элементов по названию класса;
get Elements By Tag Name — поиск элементов по названию тега;
query Selector — поиск первого элемента, подходящего под CSS-селектор;
query Selector All — поиск всех элементов подходящих под CSS-селектор.
Как понять
Скопировать ссылку "Как понять" Скопировано
Браузер создаёт DOM на основе HTML-кода страницы. Затем на основе DOM и других структур, браузер рисует страницу пользователю. При изменении DOM, браузер анализирует это и обновляет страницу.
DOM и страница, которую видит пользователь, связаны. Если изменишь одно, то изменится и второе:
пользователь заполняет форму — можно прочитать введённые значения в DOM;
при выборе страны, мы заполняем список городов в DOM — пользователь видит список.
Высокоуровневая схема такого взаимодействия:
Из чего состоит DOM
Скопировать ссылку "Из чего состоит DOM" Скопировано
HTML страница — это теги, вложенные друг в друга. Например:
Браузер превращает эту разметку в JavaScript представление, сохраняя при этом вложенность и свойства каждого HTML-элемента. Этого удаётся достичь с помощью специальной структуры данных — дерева.
Каждый тег представляет собой узел дерева. У каждого узла могут быть дочерние узлы — таким образом сохраняется информация о вложенности тегов. Правда, слово тег в этом контексте не используют и говорят элемент. Например, HTML-код выше превратится в такое дерево:
Дерево состоит из обычных и текстовых узлов. Обычные узлы — это HTML-теги, а текстовые узлы — текст внутри тегов.
Обычный узел называется Element , и он содержит в себе описание тега, атрибутов тега и обработчиков. Если изменить описание — изменится и HTML-код этого элемента (возможно что-то даже изменится на экране. Например, если поменять цвет шрифта). В статье Element мы разбираем всё необходимое для работы с элементами.
У любого узла есть один родительский узел и дочерние. Родительский узел — элемент, в который вложен текущий узел, он может быть только один. Дочерние — узлы, которые вложены в текущий узел.
Это правило не работает только в двух случаях:
корневой узел — у такого узла нет родителя;
текстовый узел — у таких узлов нет дочерних узлов, только родитель. Последний уровень любого DOM-дерева состоит из текстовых узлов.
�� Напрямую с DOM работают редко. Обычно работают на уровне элементов.
�� Из-за своей древовидной структуры искать элементы по DOM можно не только от корня. В диаграмме выше можно найти сначала элемент ul , а затем искать элементы среди его потомков.
let ulElement = document.getElementsByTagName('ul')[0]// среди потомков ul нашли последний lilet lastLi = ulElement.querySelector('li:last-child')lastLi.style.color = 'red'let ulElement =document.getElementsByTagName('ul')[0]// среди потомков ul нашли последний lilet lastLi = ulElement.querySelector('li:last-child') lastLi.style.color='red'
Функции и объекты
Объект - это главный тип данных JavaScript. Любой другой тип данных имеет объектовую "обертку" ( wrapper ). Это означает, что прежде чем можно будет получить доступ к значению переменной того или иного типа, происходит конвертирование переменной в объект , и только после этого выполняются действия над значением. Тип данных Object сам определяет объекты.
В сценарии JavaScript могут использоваться объекты нескольких видов:
клиентские объекты , входящие в модель DOM , т.е. отвечающие тому, что содержится или происходит на Web-странице в окне браузера. Они создаются браузером при разборе ( парсинге ) HTML-страницы. Примеры: window , document , location , navigator и т.п.
серверные объекты , отвечающие за взаимодействие клиент-сервер . Примеры: Server , Project , Client , File и т.п. Серверные объекты в этом курсе рассматриваться не будут.
встроенные объекты . Они представляют собой различные типы данных, свойства, методы, присущие самому языку JavaScript, независимо от содержимого HTML-страницы. Примеры: встроенные классы объектов Array , String , Date , Number , Function , Boolean , а также встроенный объект Math .
пользовательские объекты . Они создаются программистом в процессе написания сценария с использованием конструкторов типа объектов (класса). Например, можно создать свои классы Cat и Dog . Создание и использование таких объектов будет рассмотрено далее в этой лекции.
Операторы работы с объектами
for . in .
Оператор for(переменная in объект) позволяет "пробежаться" по свойствам объекта . Рассмотрим пример (об объекте document см. ниже):
for(v in document) document.write("document."+v+" = "+ document[v]+"");
Результатом работы этого скрипта будет длинный список свойств объекта document , мы приведем лишь его начало (полностью получите его самостоятельно):
Примечание Попробуйте запустить этот скрипт в разных браузерах - и Вы увидите, что набор свойств у объекта document различный в различных браузерах. Аналогичная ситуация со многими объектами модели DOM , о которой пойдет речь ниже. Именно поэтому приходится постоянно заботиться о так называемой кроссбраузерной совместимости при программировании динамических HTML-документов.
with
Оператор with задает объект по умолчанию для блока операторов , определенных в его теле. Синтаксис его таков:
with (объект) оператор;
Все встречающиеся в теле этого оператора свойства и методы должны быть либо записанными полностью, либо они будут считаться свойствами и методами объекта, указанного в операторе with . Например, если в документе есть форма с именем anketa , а в ней есть поля ввода с именами age и speciality , то мы можем воспользоваться оператором with для сокращения записи:
with (document.anketa)
Здесь age.value есть сокращенное обращение к document.anketa.age.value , length есть краткая запись свойства document.anketa. length (означающего число полей в форме), submit () есть краткая запись метода document.anketa. submit () (отсылающего введенные в форму данные на сервер), тогда как метод window. alert () записан полностью и не относится к объекту document.anketa .
Оператором with полезно пользоваться при работе с объектом Math , используемым для доступа к математическим функциям и константам. Например, внутри тела оператора with( Math ) можно смело писать: sin(f)* cos (h+PI/2) ; без оператора with пришлось бы указывать Math три раза: Math .sin(f)* Math . cos (h+ Math .PI/2)
Клиентские объекты
свойства
методы
события
Объектную модель можно представить как способ связи между страницами и браузером. Объектная модель документа - это представление объектов , их методов , свойств и событий , которые присутствуют и происходят в программном обеспечении браузера, в виде, удобном для работы с ними из кода HTML и исходного текста сценария на странице. Мы можем с ее помощью сообщать наши пожелания браузеру и далее - посетителю страницы. Браузер выполнит наши команды и соответственно изменит страницу на экране.
Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов. Классы - это описания возможных объектов . Сами объекты появляются только после загрузки документа браузером или как результат работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту, которого нет.
Иерархия классов DOM
Объектно-ориентированный язык программирования предполагает наличие иерархии классов объектов . В JavaScript такая иерархия начинается с класса объектов window , т.е. каждый объект приписан к тому или иному окну. Для обращения к любому объекту или его свойству указывают полное или частичное имя этого объекта или свойства объекта, начиная с имени объекта, старшего в иерархии, в который входит данный объект:
Рис. 3.1. Иерархия объектов DOM (фрагмент)
Сразу оговоримся, что приведенная нами схема объектной модели верна для Netscape Navigator версии 4 и выше, а также для Microsoft Internet Explorer версии 4 и выше. Еще раз отметим, что объектные модели у Internet Explorer и Netscape Navigator совершенно разные, а приведенная схема составлена на основе их общей части.
Вообще говоря, JavaScript не является классическим объектным языком (его еще называют облегченным объектным языком ). В нем нет наследования и полиморфизма . Имеется лишь отношение "объект A содержит объект B " (которое и проиллюстрировано на рис. 3.1). Оно не является иерархией классов в буквальном смысле. Действительно, нахождение класса window в этой иерархии выше класса history не означает, что всякий объект типа history является объектом типа window и наследует все его свойства и методы, как это понималось бы в стандартных объектно-ориентированных языках. В JavaScript же это отношение означает лишь то, что объект history является свойством объекта window , а значит, чтобы получить к нему доступ, нужно воспользоваться " точечной нотацией ": window. history .
У объектов DOM некоторые свойства обязательно присутствуют, тогда как наличие других зависит от Web-страницы. Например, объект window всегда имеет в качестве своих свойств объекты location и history , т.е. это обязательные свойства. Если HTML-страница содержит контейнер , то у объекта window будет присутствовать в качестве свойства объект document . Если HTML-страница содержит контейнер FRAMESET > со вложенными в него контейнерами FRAME > , то у объекта window будут присутствовать в качестве свойств имена фреймов, например window.f1 . Последние, как мы увидим в будущих лекциях, сами являются объектами класса window , и для них в свою очередь справедливо все вышесказанное.
Примечание. Строго говоря, каждый браузер, будь то Internet Explorer , Netscape Navigator или Opera, имеет свою объектную модель . Объектные модели разных браузеров (и даже разные версии одного) отличаются друг от друга, но имеют принципиально одинаковую структуру. Поэтому нет смысла останавливаться на каждой из них по отдельности. Мы будем рассматривать общий подход применительно ко всем браузерам, иногда, конечно, заостряя внимание на различиях между ними.
DOM (Document Object Model)
Полученная в HTML/XHTML/XML страница отображается браузером. При этом с программной точки зрения каждый входящий в документ элемент (в том числе и сам документ) являются объектом. DOM — это не зависящий ни от платформы, ни от языка программирования программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому документов HTML, XHTML, XML; а также менять содержимое, структуру, оформление таких документов. Несмотря на все усилия специалистов W3C по стандартизации, модель DOM и поведение входящих в нее объектов до сих пор отличаются друг от друга в разных браузерах. Отличия несущественны, но они — есть. Поэтому для корректной работы клиентской части web-приложения лучше перед применением какой-либо особенности проверить, поддерживается ли данная особенность данным браузером. Для отображения страницы DOM не нужен, браузер при форматировании страницы и выводе ее на экран не обязан знать о существовании внутри него каких-то объектов. Но факт существования DOM дает возможность оживить клиентскую часть web-приложения, динамически изменяя содержимое и/или оформление страницы.
Согласно DOM-модели, документ является иерархией объекта. Каждый HTML-тэг образует отдельный элемент-узел, каждый фрагмент текста — текстовый элемент и так далее. Проще говоря, DOM — это представление документа в виде дерева объектов. Это дерево формируется за счет вложенной структуры тэгов и текстовых фрагментов страницы, каждый из которых образует отдельный узел.
