Методы объекта Location
assign(url)
загрузить документ по данному url. Можно и просто приравнять window.location.href = url.
reload([forceget])
перезагрузить документ по текущему URL. Аргумент forceget - булево значение, если оно true, то документ перезагружается всегда с сервера, если false или не указано, то браузер может взять страницу из своего кэша.
replace(url)
заменить текущий документ на документ по указанному url.
toString()
Как обсуждалось выше, возвращает строковое представление URL.
При изменении любых свойств window.location, кроме hash, документ будет перезагружен, как если бы для модифицированного url был вызван метод window.location.assign().
Можно перенаправить и явным присвоением location, например:
// браузер загрузит страницу http://javascript.ru
window.location = "http://javascript.ru";
frames
Коллекция, содержащая фреймы и ифреймы. Можно обращаться к ним как по номеру, так и по имени.
В frames содержатся window-объекты дочерних фреймов.
Следующий код переводит фрейм на новый URL:
<iframe name="example" src="http://example.com" width="200" height="100"></iframe>
<script>
window.frames.example.location = 'http://example.com';
</script>
History
Объект history позволяет менять URL без перезагрузки страницы (в пределах того же домена) при помощи History API, а также перенаправлять посетителя назад-вперед по истории. Эта тема достаточно обширна, поэтому будет раскрыта в отдельной главе.
Объект history не предоставляет возможности читать историю посещений. Можно отправить посетителя назад вызовом history.back() или вперед вызовом history.forward(), но сами адреса браузер не дает из соображений безопасности.
Дерево dom
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом.
Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».
Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.
Пример dom
Построим, для начала, дерево DOM для следующего документа.
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
В этом дереве выделено два типа узлов.
Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.
Структура дерева образована за счет синих элементов-узлов — тегов HTML.
Ещё узлы
Дополним страницу новыми тегами и комментарием:
<!DOCTYPE HTML>
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
<ol>
<li>Лось — животное хитрое</li>
<!-- комментарий -->
<li>..и коварное!</li>
</ol>
</body>
</html>
В этом примере тегов уже больше, и даже появился узел нового типа — узел-комментарий. Казалось бы, зачем комментарий в DOM? На отображение-то он всё равно не влияет. Но так как он есть в HTML — обязан присутствовать в DOM-дереве.
Всё, что есть в HTML, находится и в DOM.
Как вы думаете, пробелы и переводы строки между тегами должны попадать в DOM ?
Элемент с пробелами <li> </li> чем-то должен отличаться от <li></li> в DOM ?
Поскольку DOM-модель в точности соответствует документу, пробельные символы так же важны, как и любой другой текст. Ответ на оба вопроса: «Да».
На картинке выше текстовые узлы, содержащие пробелы, выделены серым. Единственное исключение — пробелы перед и между HEAD/BODY на самом верхнем уровне документа. В DOM их никогда нет, согласно требованиям стандарта. Все остальные пробелы сохраняются в точности.