- •Виды различаются от версии языка, на которого ориентированы.
- •Параметры
- •Для атрибутов тегов используются значения по умолчанию
- •Порядок атрибутов в тегах
- •Формат атрибутов
- •7) Css спрайты. Data: uri.
- •«Зачем мне это надо?»
- •Основные достоинства
- •Уровень 1 (css1)
- •[Править]Уровень 2 (css2)
- •[Править]Уровень 2, ревизия 1 (css2.1)
- •[Править]Уровень 3 (css3)
- •10) JavaScript. Что такое и зачем нужен. Альтернативы.
- •Что такое javascript?
- •Что умеет javascript?
- •Уникальность javascript
- •Другие технологии. Альтернативы javascript.
- •Фабрика объектов
- •Создание потомка
- •Простейший dom
- •14) Атрибуты dom объектов и свойства. Чем отличаются.
- •Свойства dom-элементов
- •Синхронизация
- •Возможные значения
- •[Править]Возможности
- •[Править]Объект Ajax
- •[Править]Класс Element
- •16) Как работает Sizzle (примерно).
- •17) Когда js - это плохо. Примеры.
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 (почему - см ниже) |