Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...
Топ:
Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...
Процедура выполнения команд. Рабочий цикл процессора: Функционирование процессора в основном состоит из повторяющихся рабочих циклов, каждый из которых соответствует...
Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...
Интересное:
Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...
Дисциплины:
 2019-12-21 |
 279 |
из
5.00
|
Заказать работу |
|
|
|
|
Послание по JS № 8
Окружение: DOM, BOM и JS
Сам по себе язык JavaScript не предусматривает работы с браузером.
Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами.
На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с «высоты птичьего полёта».
Как видно из рисунка, на вершине стоит window.
У этого объекта двоякая позиция – он с одной стороны является глобальным объектом в JavaScript, с другой – содержит свойства и методы для управления окном браузера, открытия новых окон, например:
// открыть новое окно/вкладку с URL http://ya.ru
window.open('http://ya.ru');
Объектная модель браузера (BOM)
BOM – это объекты для работы с чем угодно, кроме документа.
К примеру, объект navigator содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства: navigator.userAgent – содержит информацию о браузере и navigator.platform – содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п.
Объект location содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.
Функции alert/confirm/prompt – тоже входят в BOM.
Пример использования:
alert(location.href); // выведет текущий адрес
Модель BOM конечно интересна, но для нас больший интерес представляет DOM.
Дерево DOM
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.
Важно!
DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.
|
|
Пример DOM
Построим, для начала, дерево DOM для следующего документа.
<!DOCTYPE HTML>
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
Его вид:
В этом дереве выделено два типа узлов.
1. Теги образуют узлы-элементы (element node). Естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них.
2. Текст внутри элементов образует текстовые узлы (text node), обозначенные как #text. Текстовый узел содержит исключительно строку текста и не может иметь потомков, то есть он всегда на самом нижнем уровне.
Обратите внимание на специальные символы в текстовых узлах:
· перевод строки: ↵
· пробел: ␣
Пробелы и переводы строки – это тоже текст, полноправные символы, которые учитываются в DOM.
В частности, в примере выше тег <html> содержит не только узлы-элементы <head> и <body>, но и #text (пробелы, переводы строки) между ними.
Впрочем, как раз на самом верхнем уровне из этого правила есть исключения: пробелы до <head> по стандарту игнорируются, а любое содержимое после </body> не создаёт узла, браузер переносит его внутрь, в конец body.
В остальных случаях всё честно – если пробелы есть в документе, то они есть и в DOM, а если их убрать, то и в DOM их не будет, получится так:
<!DOCTYPE HTML>
<html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
Автоисправление
При чтении неверного HTML браузер автоматически корректирует его для показа и при построении DOM.
В частности, всегда будет верхний тег <html>. Даже если в тексте нет – в DOM он будет, браузер создаст его самостоятельно.
То же самое касается и тега <body>.
Например, если файл состоит из одного слова "Привет", то браузер автоматически обернёт его в <html>и <body>.
При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
Выбор элементов документа
Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа.
|
|
Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:
· по значению атрибута id;
· по значению атрибута name;
· по имени тега;
· по имени класса или классов CSS;
· по совпадению с определенным селектором CSS.
Все эти приемы выборки элементов мы с вами сейчас и разберем.
Поиск элементов по тегу.
Метод elem.getElementsByTagName(tag) ищет все элементы с заданным тегом tag внутри элемента elem и возвращает их в виде списка.
Регистр тега не имеет значения.
Например, получить все div-элементы:
var elements = document.getElementsByTagName('div');
Внимание!
В отличие от getElementById, который существует только в контексте document, метод getElementsByTagName может искать внутри любого элемента.
Можно получить всех потомков, передав звездочку '*' вместо тега:
document.getElementsByTagName('*'); // получить все элементы документа
elem.getElementsByTagName('*'); // получить всех потомков элемента elem:
Важно!
Не забываем про букву " s "!
Одна из самых частых ошибок начинающих (впрочем, иногда и не только) – это забыть букву "s", то есть пробовать вызывать метод getElementByTagName вместо getElement s ByTagName. Буква "s" не нужна там, где элемент только один, то есть в getElementById, в остальных методах она обязательна.
Послание по JS № 8
Окружение: DOM, BOM и JS
Сам по себе язык JavaScript не предусматривает работы с браузером.
Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами.
На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с «высоты птичьего полёта».
Как видно из рисунка, на вершине стоит window.
У этого объекта двоякая позиция – он с одной стороны является глобальным объектом в JavaScript, с другой – содержит свойства и методы для управления окном браузера, открытия новых окон, например:
// открыть новое окно/вкладку с URL http://ya.ru
window.open('http://ya.ru');
Объектная модель браузера (BOM)
|
|
BOM – это объекты для работы с чем угодно, кроме документа.
К примеру, объект navigator содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства: navigator.userAgent – содержит информацию о браузере и navigator.platform – содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п.
Объект location содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.
Функции alert/confirm/prompt – тоже входят в BOM.
Пример использования:
alert(location.href); // выведет текущий адрес
Модель BOM конечно интересна, но для нас больший интерес представляет DOM.
Дерево DOM
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.
Важно!
DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.
Пример DOM
Построим, для начала, дерево DOM для следующего документа.
<!DOCTYPE HTML>
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
Его вид:
В этом дереве выделено два типа узлов.
1. Теги образуют узлы-элементы (element node). Естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них.
2. Текст внутри элементов образует текстовые узлы (text node), обозначенные как #text. Текстовый узел содержит исключительно строку текста и не может иметь потомков, то есть он всегда на самом нижнем уровне.
Обратите внимание на специальные символы в текстовых узлах:
· перевод строки: ↵
· пробел: ␣
Пробелы и переводы строки – это тоже текст, полноправные символы, которые учитываются в DOM.
В частности, в примере выше тег <html> содержит не только узлы-элементы <head> и <body>, но и #text (пробелы, переводы строки) между ними.
Впрочем, как раз на самом верхнем уровне из этого правила есть исключения: пробелы до <head> по стандарту игнорируются, а любое содержимое после </body> не создаёт узла, браузер переносит его внутрь, в конец body.
|
|
В остальных случаях всё честно – если пробелы есть в документе, то они есть и в DOM, а если их убрать, то и в DOM их не будет, получится так:
<!DOCTYPE HTML>
<html><head><title>О лосях</title></head><body>Правда о лосях</body></html>
Автоисправление
При чтении неверного HTML браузер автоматически корректирует его для показа и при построении DOM.
В частности, всегда будет верхний тег <html>. Даже если в тексте нет – в DOM он будет, браузер создаст его самостоятельно.
То же самое касается и тега <body>.
Например, если файл состоит из одного слова "Привет", то браузер автоматически обернёт его в <html>и <body>.
При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
|
|
|
Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьшения длины пробега и улучшения маневрирования ВС при...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!