- •Окружение: 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
- •Атрибуты и "свои" свойства
- •«Свои» свойства
- •Атрибуты
NodeValue/data: содержимое текстового узла
Свойство innerHTML есть только у узлов-элементов.
Содержимое других узлов, например, текстовых или комментариев, доступно через два свойства: nodeValue и data.
Его тоже можно читать и обновлять. Следующий пример демонстрирует это:
<body>
Привет
<!-- Комментарий -->
<script>
for (var i=0; i<document.body.childNodes.length; i++) {
alert(document.body.childNodes[i].nodeValue);
alert(document.body.childNodes[i].data);
}
document.body.firstChild.data = "Здравствуйте!";
</script>
</body>
В этом примере выводятся последовательно:
Содержимое первого узла (текстового): Привет (2 раза).
Содержимое второго узла (комментария): Комментарий (2 раза).
Содержимого третьего узла (текста между комментарием и скриптом): (там пробелы, 2 раза)
Свойство nodeValue=null для узла SCRIPT, так как это узел-элемент. А вот data=undefined. Это единственное различие в поведении этих свойств.
Наконец, последний вызов заменит содержимое document.body.firstChild, и это тут же отразится в документе.
Кстати, после SCRIPT есть еще один текстовый узел, но на момент работы скрипта браузер дошел в разборе документа только до SCRIPT, поэтому он не будет выведен
Другие свойства
У DOM-узлов есть свойства, зависящие от типа, например:
value — значение для INPUT, SELECT или TEXTAREA
id — идентификатор
href — адрес ссылки
…многие другие…
<input type="text" id="my-input" value="значение">
<script>
var input = document.body.children[0];
alert(input.type); // "text"
alert(input.id); // "my-input"
alert(input.value); // значение
</script>
Полный список свойств можно получить из спецификации. В частности, для input[type="text"] она находится http://www.w3.org/TR/html-markup/input.text.html. Как правило, основные атрибуты элемента дают свойство с тем же названием
Итого
Основные свойства DOM-узлов:
nodeType
Тип узла. Самые популярные типы: "1" - для элементов и "3" - для текстовых узлов. Только для чтения.
nodeName/tagName
Название тега заглавными буквами. nodeName имеет специальные значения для узлов-неэлементов. Только для чтения.
InnerHtml
Внутреннее содержимое узла-элемента в виде HTML. Можно изменять.
outerHTML
Полный HTML узла-элемента. При записи в elem.outerHTML переменная elem сохраняет старый узел.
nodeValue/data
Содержимое текстового узла или комментария. Свойство nodeValue также определено и для других типов узлов. Можно изменять.
Задание
Что выведет этот код
<script>
var body = document.body;
body.innerHTML = "<!--" + body.tagName + "-->";
alert(body.firstChild.data); // что выведет?
</script>
Решение
<script>
var body = document.body;
body.innerHTML = "<!--" + body.tagName + "-->";
alert(body.firstChild.data); // BODY
</script>
Происходящее по шагам:
Заменяем содержимое <body> на комментарий. Он будет иметь вид <!--BODY-->, так как body.tagName == "BODY". Как мы помним, свойство tagName в HTML всегда находится в верхнем регистре.
Этот комментарий теперь является первым и единственным потомком body.firstChild.
Получим значение data для комментария body.firstChild. Оно равно содержимому узла для всех узлов, кроме элементов. Содержимое комментария: "BODY".