JavaScript. Атрибуты и свойста элементов.

Всем привет!

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

Как известно, все элементы DOM – объекты, и у них есть свойства. В тоже время всё, что есть на странице, – это элементы html, у которых есть атрибуты. Как же две эти сущности между собой соотносятся.

Допустим, у нас на странице есть div с определённым классом:

<div class="bold">Какое-то содержимое</div>

Очевидно, что здесь мы установили его атрибуту class значение bold.

Посмотрим, появится ли это в свойствах данного объекта. Действительно, у него есть свойство className со значением bold. Убедиться в этом можно, написав следующий код:

var elems = document.getElementsByClassName('bold');
var div = elems[0];
alert(div.className); // выведет bold

Интересно, а если мы изменим данное свойство, изменится ли атрибут? Проверим:

var elems = document.getElementsByClassName('bold');
var div = elems[0]; 
div.className = "small";
alert(div.className); // выведет small
alert(div.getAttribute('class')); // выведет small

Как видим, атрибут и свойство изменились одновременно. Из-за этого сейчас мы может сделать вывод, что атрибуты и свойства – это одно и тоже, и изменяются они синхронно. Но на самом деле это не так. Синхронизация происходит только для стандартных атрибутов. Попробуем добавиться какой-либо свой атрибут и проверим, появится ли он в свойствах объекта:

var elems = document.getElementsByClassName('bold');
var div = elems[0];
div.setAttribute('myAttr', 100);
alert(div.getAttribute('myAttr')); // выведет 100
alert(div.myAttr); // выведет undefined

Т.е. если мы устанавливаем какой-то собственный атрибут, то объекту такого свойства не добавляется. Теперь сделаем наоборот – установим свойство и проверим, появится ли атрибут:

var elems = document.getElementsByClassName('bold');
var div = elems[0];
div.myAttr = 100;
alert(div.getAttribute('myAttr')); // выведет 100
alert(div.myAttr); // выведет 100

В этот раз всё нормально – установлены и свойство и атрибут. Вроде бы всё достаточно просто, где же мы рискуем сделать ошибку?

При написании кода на чистом javascript-е это очень маловероятно. Вряд ли кому-то из вас больше нравится писать div.setAttribute(‘myAttr’, 100); чем div.myAttr = 100; потому что вторая запись короче и понятнее. Но ведь все мы уже давно подсели на великолепную библиотеку jQuery, в котором есть очень удобная функция attr. Давайте ею воспользуемся:

$('.bold').attr('myAttr', '100');

А теперь поищем свойство myAttr у данного объекта:

var elems = document.getElementsByClassName('bold');
var div = elems[0];
alert(div.myAttr); // выведет undefined

Вот так! Функция attr установила лишь значение атрибута, не изменив при этом реальных свойств данного объекта. Над подобной ошибкой один из учеников провёл немалое количество времени, прежде чем выяснилось, что атрибуты и свойства – это не одно и тоже.

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

В идеале мы не должны придумывать для элементов собственные атрибуты, мы должны задавать свойства. Однако, кто же из нас теперь откажется от простой и удобной функции attr!? Да никто! Поэтому просто необходимо понимать эту разницу между свойства и атрибутами, чтобы задав элементу какой-нибудь атрибут, не искать данное значение в свойствах.

24.02.2015

Понравился материал? Поделись с друзьями!