Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
Топ:
Марксистская теория происхождения государства: По мнению Маркса и Энгельса, в основе развития общества, происходящих в нем изменений лежит...
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Интересное:
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Что нужно делать при лейкемии: Прежде всего, необходимо выяснить, не страдаете ли вы каким-либо душевным недугом...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Дисциплины:
2019-12-21 | 287 |
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 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!