Возможности, которые дает dom
Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?
DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы.
Например, можно поменять цвет BODY и вернуть обратно:
document.body.style.backgroundColor = 'red';
alert('Поменяли цвет BODY');
document.body.style.backgroundColor = '';
alert('Сбросили цвет BODY');
Фактически, DOM предоставляет возможность делать со страницей всё, что угодно. Далее в этом разделе мы научимся этому.
Работа с dom из консоли Доступ к элементу
Чтобы проанализировать любой элемент:
Выберите его во вкладке Elements.
…Либо внизу вкладки Elements есть лупа, при нажатии на которую можно выбрать элемент кликом.
…Либо, что обычно удобнее всего, просто кликните на нужном месте на странице правой кнопкой и выберите в меню «Проверить Элемент».
Справа будет различная информация об элементе:
Computed Style
Итоговые свойства CSS элемента, которые он приобрёл в результате применения всего каскада стилей, включая внешние CSS-файлы и атрибут style.
Style
Каскад стилей, применённый к элементу. Каждое стилевое правило отдельно, здесь же можно менять стили кликом.
Metrics
Размеры элемента.
…
И еще некоторые реже используемые вкладки, которые станут понятны по мере изучения DOM.
Elements - Консоль
Зачастую бывает нужно выбрать элемент DOM и сделать с ним что-то на JavaScript.
Консоль можно либо открыть тут же, нажатием Esc, либо выбрать на соответствующую вкладку.
Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0, предыдущий — $1 и так далее.
Есть и обратный путь.
Чтобы показать элемент из JS-переменной во вкладке Elements:
Выведите его в консоли.
Кликните на нём правой кнопкой мыши.
Выберите соответствующий пункт меню.
Таким образом можно легко перемещаться из Elements в консоль и обратно. Выбрал элемент — попробовал на нём JavaScript — посмотрел что получилось в DOM.\
Навигация в dom, свойства-ссылки Корень: documentElement и body
Войти в «корень» дерева можно двумя путями.
Первая точка входа — document.documentElement. Это свойство ссылается на DOM-объект для тега HTML.
Вторая точка входа — document.body, который соответствует тегу BODY.
Оба варианта отлично работают. Но есть одна тонкость: document.body может быть равен null.
Например, при доступе к document.body в момент обработки тега HEAD, то document.body = null. Это вполне логично, потому что BODY еще не существует.
Нельзя получить доступ к элементу, которого еще не существует в момент выполнения скрипта.
В следующем примере, первый alert выведет null:
<!DOCTYPE HTML>
<html>
<head>
<script>
alert("Из HEAD: " + document.body); // null
</script>
</head>
<body>
<script>
alert("Из BODY: " + document.body);
</script>
</body>
</html>
Дочерние элементы
Из узла-родителя можно получить все дочерние элементы. Для этого есть несколько способов.
ChildNodes
Псевдо-массив childNodes хранит все дочерние элементы, включая текстовые.
Пример ниже последовательно выведет дочерние элементы document.body:
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<div>Пользователи:</div>
<ul>
<li>Маша</li>
<li>Вовочка</li>
</ul>
<!-- комментарий -->
<script>
var childNodes = document.body.childNodes;
for(var i=0; i<childNodes.length; i++) {
alert(childNodes[i]);
}
</script>
</body>
</html>