4.2.3.Операторы и комментарии
Операторы в программах на языке JavaScript разделяются точкой с запятой. Точку с запятой во многих случаях можно не ставить, если есть переход на новую строку, однако во избежание проблем и для лучшей читаемости кода лучше все-таки ставить точку запятой «явно».
Комментарии могут находиться в любом месте программы и никак не влияют на ее выполнение. Интерпретатор JavaScript попросту игнорирует их. Однострочные комментарии начинаются с двойного слэша //. Текст считается комментарием до конца строки. Многострочные комментарии начинаются слешем-звездочкой /* и заканчиваются звездочкой-слэшем */
4.3.Dom: работа с html-страницей
4.3.1.Глобальная структура объектов браузера
На рисунке схематически отображена структура основных браузерных объектов.
DOM (Document Object Model, объектная модель документа) – набор объектов, который дает доступ к содержимому страницы.
BOM (Browser Object Model, объектная модель браузера) – доступ к объектам, не относящимся к веб-страницы – фреймам, запросам к серверу, функциям alert/confirm/prompt.
Глобальный объект window имеет две роли: 1) окно браузера. У него есть методы window.focus(),window.open() и другие; 2) глобальный объект JavaScript.
4.3.2.Дерево dom-объектов
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией. Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. Проще говоря, DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.
Ниже приведен пример HTML-документа и изображения дерева DOM-объектов для него:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div id="dataKeeper">Заголовок</div>
<ul>
<li>Тескт 1</li>
<li>Тескт 2</li>
</ul>
<div id="footer">Конец документа</div>
</body>
</html>
На рисунке для краткости текстовые узлы обозначены просто решеткой.
Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.
4.3.3.Доступ к элементам dom и навигация
Для манипуляций с DOM используется объект document. Используя document, можно получать нужный элемент дерева и менять его содержание. Любой доступ и изменения DOM берут свое начало от объекта document.
Существуют следующие способы доступа к элементом DOM:
document.documentElement – Самый верхний тег. В случае корректной HTML-страницы, это будет <html>;
document.body – тег <body>, если есть в документе (обязан быть);
document.getElementsByTagName(«тэг”) – доступ к элементу по имени тэга;
document.getElementById(«ID”) – доступ к элементу по атрибуту id;
document.getElementByName(«имя”) – доступ к элементу по атрибуту name.
Для навигации по дереву существую понятия дочерних, родительских элементов, а также «братьев». Для навигации по дереву используются следующие правила:
Все дочерние элементы, включая текстовые находятся в массиве childNodes[].
Свойства firstChild и lastChild показывают на первый и последний дочерние элементы и равны null, если детей нет.
Свойство parentNode указывает на родителя.
Свойства previousSibling и nextSibling указывают на левого и правого братьев узла.