- •Окружение: dom,boMиJs
- •Bom-объекты:navigator,screen,location,frames navigator: платформа и браузер
- •Location
- •Методы и свойства Location
- •Методы объекта Location
- •History
- •Дерево dom
- •Пример dom
- •Ещё узлы
- •Возможности, которые дает dom
- •Работа с dom из консоли Доступ к элементу
- •Elements - Консоль
- •Навигация в dom, свойства-ссылки Корень: documentElement и body
- •Дочерние элементы
- •ChildNodes
- •Ссылки вверх и вниз
- •FirstChild и lastChild
- •Свойства узлов: тип, тег, содержимое и другие
- •Тип: nodeType
- •Тег: nodeName и tagName
- •Какая разница между tagName и nodeName ?
- •InnerHtml: содержимое элемента
- •Тонкости innerHtml
- •OuterHtml: html узла целиком
- •NodeValue/data: содержимое текстового узла
- •Другие свойства
- •InnerHtml
- •Атрибуты и "свои" свойства
- •«Свои» свойства
- •Атрибуты
Атрибуты и "свои" свойства
У DOM-узлов бывают не только свойства, но и атрибуты.
Между ними есть кое-что общее, поэтому иногда их путают. Но на самом деле, атрибуты и свойства — совершенно разные вещи.
«Свои» свойства
Узел DOM - это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.
Например, создадим в document.body новое свойство и запишем в него объект
document.body.myData = {
name: 'Петр',
familyName: 'Петрович'
};
alert(document.body.myData.name); // Петр
Можно добавить и новую функцию
document.body.sayHi = function() {
alert(this.nodeName);
}
document.body.sayHi(); // BODY, выполнилась с правильным this
Такие свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.
Эти свойства можно даже перечислить с помощью for..in (свойства будут все, и встроенные тоже)
document.body.custom = 5;
var list = [];
for (var key in document.body) {
list.push(key);
}
alert( list.join('\n') );
Пользовательские DOM-свойства:
Могут иметь любое значение.
Названия свойств чувствительны к регистру.
Работают за счет того, что DOM-узлы являются объектами JavaScr
Атрибуты
Узлы DOM, с другой стороны, являются HTML-элементами, у которых есть атрибуты. Доступ к атрибутам осуществляется при помощи стандартных методов:
elem.hasAttribute(name) - проверяет наличие атрибута
elem.getAttribute(name) - получает значение атрибута
elem.setAttribute(name, value) - устанавливает атрибут
elem.removeAttribute(name) - удаляет атрибут
Атрибуты неправильно работают в IE<8 и в IE8 в режиме совместимости:
Существуют только методы getAttribute и setAttribute.
Фактически, они изменяют DOM-свойства, а не атрибуты.
Атрибуты и свойства в IE<8 объединены. Иногда это приводит к странным результатам, но способы работы с атрибутами, о которых мы здесь говорим, работают правильно.
В отличие от свойств, атрибуты:
Могут быть только строками.
Их имя нечувствительно к регистру(т.к. это HTML)
Видны в innerHTML (за исключением старых IE)
Все атрибуты элемента можно получить с помощью свойства attributes, которое содержит псевдо-массив объектов типа Attr.
Например, рассмотрим этот HTML-код
<body>
<div about="Elephant" class="smiling"></div>
<script>
var div = document.body.children[0];
alert( div.getAttribute('ABOUT') ); // (1)
div.setAttribute('Test', 123); // (2)
alert( document.body.innerHTML ); // (3)
var attrs = div.attributes; // (4)
for (var i=0; i<attrs.length; i++) {
alert(attrs[i].name + " = " + attrs[i].value);
}
</script>
</body>
При запуске кода выше обратите внимание:
getAttribute('ABOUT') использует имя атрибута в верхнем регистре, но это не имеет значения, т.к имена нечувствительны к регистру.
Вы можете записать в атрибут строку или другое значение, которое будет превращено в строку. Объект, например, будет автоматически сконвертирован, но у IE<9 с этим проблемы, поэтому придерживайтесь примитивов.
В innerHTML появился новый атрибут "test".
Коллекция attributes содержит все атрибуты в виде объектов класса Attr со свойствами name и value.