Являясь элементом HTML, DOM-элемент может иметь любое количество атрибутов.
В следующем примере элемент div имеет атрибуты id, class и нестандартный атрибут alpha:
<div id="MyElement" class="big" alpha="omega"></div>
Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:
setAttribute(name, value) – устанавливает значение атрибута;
getAttribute(name) – получить значение атрибута;
hasAttribute(name) – проверить, есть ли такой атрибут;
removeAttribute(name) – удалить атрибут.
Имя атрибута является регистронезависимым.
В некоторых случаях между понятием «свойство» и «атрибут» имеется связь – браузер синхронизирует значения стандартных свойств с атрибутами. Если меняется атрибут, то меняется и свойство с этим именем, и наоборот. Такая синхронизация гарантируется для всех основных стандартных атрибутов. При этом атрибуту с именем class соответствует свойство className, т.к. ключевое слово class зарезервировано в javascript.
Следующий пример показывает идентичность атрибута и свойства с именем id:
<html>
<head>
<script>
function go() {
document.body.setAttribute('id', 'NewId'); //устанавливаем атрибут
alert(document.body.id) //читаем его значение как свойство
}
</script>
</head>
<body>
<input type="button" onclick="go()" value="Go"/>
</body>
</html>
