14) Атрибуты dom объектов и свойства. Чем отличаются.

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

Между ними есть соответствие, но оно не однозначное и его лучше понимать.

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

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

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

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

1	elem.master = {
2	name: vasya

3	}
4	alert(elem.master.name)

DOM-Атрибуты

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

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

<div id="MyElement" class="big" alpha="omega"></div>

Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:

setAttribute(name, value)

Устанавливает значение атрибута

getAttribute(name)

Получить значение атрибута

hasAttribute(name)

Проверить, есть ли такой атрибут

removeAttribute(name)

Удалить атрибут

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

1	// название маленькими буквами
2	document.body.setAttribute('test', 123)

3
4	// большими буквами

5	document.body.getAttribute('TEST') // 123

Значением атрибута может быть только строка. Это же HTML..

DOM-атрибуты VS DOM-свойства

Все, вроде бы, ясно. Есть свойства. Есть атрибуты.

Но создатели javascript решили (с лучшими намерениями) запутать ситуацию и создать искусственное соответствие между свойством и атрибутом.

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

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

Например:

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

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

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

Такая синхронизация гарантируется для всех основных стандартных атрибутов. При этом атрибуту с именем class соответствует свойство className, т.к. ключевое слово class зарезервировано в javascript.

Для "левых" атрибутов браузер ничего не гарантирует

1	document.body.setAttribute('cool', 'SomeValue')
2	alert(document.body.cool)  // undefined везде кроме IE (почему - см ниже)