базовый курс

ГРУППА КУРСА

Атрибуты тэга и свойства объекта

Связь атрибутов и свойств

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

Для обращения к атрибутам есть метод getAttribute(), который возвращает значение атрибута и метод setAttribute(), который присваивает новое значение атрибуту.

элемент.getAttribute(атрибут)

элемент.setAttribute(атрибут, значение)

Также метод setAttribute() можно использовать для установки атрибута, который не был установлен в коде страницы.

Создадим страницу, добавим на неё элемент и установим ему id. Выведем id через атрибут и через свойство:

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
<div id="inform">Блок</div>

JavaScript:

10
11
12
var div = document.getElementById('inform');
console.log('Атрибут: '+div.getAttribute('id'));
console.log('Свойство: '+div.id);

В основном, атрибут и свойство совпадают, но есть исключения:

  • Значением атрибута может быть только строка. Если атрибуту присвоить другой тип данных, то он преобразуется в строку. А свойство может иметь любое значение.
  • В имени атрибута регистр символов не имеет значения. А свойство объекта подчинается обычным правилам JavaScript, то есть в имени свойства регистр символов имеет значение.
  • Для классов названия атрибута и свойства не совпадают. Атрибут назавается class, а свойство называется className.
  • В атрибуте может быть указан относительный путь к файлу, а свойством объекта может быть только абсолютный путь к файлу. Если в атрубуте указан относительный путь, то в свойстве он преобразуется в абсолютный.

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

Изменение атрибутов и свойств

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

Добавим на страницу элемент, изменим у него класс и посмотрим как изменится свойство:

HTML код:

9
<p class="art">Текст</p>

JavaScript:

14
15
16
var p = document.querySelector('p');
p.setAttribute('class', 'user');
console.log(p.className);

Измените свойство объекта, поcмотрите, изменится ли атрибут.

Список атрибутов

Свойство attributes содержит список всех атрибутов, которые есть у элемента.

Для примера создадим тэг input, добавим ему атрибут и выведем список всех атрибутов:

HTML код:

10
<input type="text" name="login">

JavaScript:

18
19
20
var login = document.querySelector('input');
login.setAttribute('size', '20');
console.log(login.attributes);