DOM. Понятие объектной модели документа. Методы поиска элементов на веб-странице
· Для работы с элементами web-страницы на клиентской стороне используется объектная модель документа (DocumentObjectModel, DOM). DOM-модель – это внутреннее представление HTML-страницы в виде дерева.
· Все элементы страницы, включая теги, текст, комментарии, являются взаимосвязанными узлами DOM(узлы DOM-дерева являются объектами). Из корня деревапо ссылкам можно добраться абсолютно до любого узла(корневым элементом документа является тег <html>). 
В HTML-странице помимо тегов используются комментарии и простой текст (перенос строки - это тоже текст). В DOM-модели они тоже представляют отдельные узлы. Поэтому общий вид дерева будет такой(см. рис).
Узлы-элементы - это теги, из которых состоит документ.
Текстовые узлы - весь текст внутри тега, включая пробелы и переносы строки.Перед <head> и после </body> текстовые узлы не создаются.
Комментарии - комментарии в коде страницы.
· У элементов DOM есть свойства и методы, которые позволяют изменять их.
· Основным назначением DOM-модели является возможность изменения HTML-страницы (и ее отображения на экране) в сценариях JavaScript.
Связи между объектами различных уровней, показанные на рис. ниже означают, что объект верхнего уровня содержит ссылку на объект нижнего уровня. Так, например, между объектами Window и Document есть связь. Это означает, что объект Window имеет свойство с именем document, содержащее ссылку на объект типа Document.
Рис. Иерархия объектов web-страницы
Основным объектомдля работы с DOM-моделью является глобальная переменная document, которая ссылается на объект Document, описывающий HTML-документ, отображаемый в окне браузера.
МетодыобъектаDocument:
· open() - открывает новый документ; при этом для текущего документа все его содержимое удаляется.
- close() - закрывает ранее открытый документ, фиксируя внесенные изменения.
- clear() - очищает содержимое документа.
- write() - записывает в документ заданную в качестве аргумента строку.
- writeln() - аналогичен предыдущему, но выведенная в документ строка заканчивается символом перевода строки.
Для хранения произвольного количества ссылок на объекты, расположенные на web-странице, используются массивы. Поэтому свойства объекта Document, предназначенные для связи с компонентами web-страницы, выглядят следующим образом:
• links[ ]– массив ссылок на гипертекстовые связи, сформированные в HTML-документе с помощью элементов <а>;
• images[ ] – массив ссылок на изображения, включенные в состав web-страницы с помощью элемента <img>;
• forms[ ] – массив ссылок на формы, созданные посредством элементов <form>.
В этих массивах ссылки на объекты Link, Image и Formсодержатся в том же порядке, в котором они встречаются в исходном тексте HTML- документа. Так, images[0] ссылается на первое изображение в составе web- страницы, images[1] – на второе изображение и т. д.
Объект Form ссылается на интерактивные элементы, принадлежащие HTML-форме документа. Несмотря на то, что каждый из элементов является объектом определенного типа (например, Text, Password, Radio, Checkbox и т. д.), для их описания существует также обобщенный тип Element. Соответственно, ссылки на интерактивные элементы, принадлежащие форме, содержатсяв свойстве elements объекта Form.
Например, чтобы получить строку текста (value), которую пользователь ввел в первой форме (forms[0]) с помощью 3-го элемента управления (elements[2]), можно использовать следующее выражение:
line = document.forms[0].elements[2].value;
В результате выполнения данной команды значение третьего элемента управления, принадлежащего первой форме, входящей в состав текущего документа, будет скопировано в переменную line.
Для получения ссылки на требуемый объект DOM чаще всего используются методы быстрого поиска элементов HTML:
• document.getElementByld(id)– для поиска элементов по значению атрибута id в элементах документа;
• document.getElementsByTagName(tag) – возвращает коллекцию всех элементов с определенным тэгом, и среди них можно искать нужный; например, можно получить второй элемент с тэгом <р>: document. getElementsByTagName('p')[1];
• document.getElementsByName(name)– возвращает все элементы, у которых имена (атрибут name) равны заданному значению; работает только с элементами, у которых имеется атрибут name, например, form, input, a, select, textarea и ряд других, более редких; данный метод не будет работать с остальными элементами типа div, р и т. п.;
• getElementsByClassName() – для поиска элементов по классу, но он работает не во всех браузерах, поэтому его редко используют.
После определения ссылки на требуемый объект (элемент документа), можно выполнять изменение его свойств и атрибутов. Например, следующий код изменит цвет текста наголубой (blue) в div- контейнере с идентификатором dataKeeper:
document.getElementByld('dataKeeper').style.color = 'blue';
Для изменения содержания элементов HTML-документа без перерисовки всей страницы нужно использовать свойство innerHTML. Обычно данное свойство используется вместе с функцией getElementByld() для получения ссылки на требуемый элемент документа:
document.getElementByld('ID эпемента').innerHTML = 'содержание';
Например, вывод сообщений в тэге <р> можно выполнить следующим образом:
<script>
function Msg1(){
document.getElementByld('myText').innerHTML = 'Спасибо!';
}
function Msg2(){
document.getElementByld('myText').innerHTML ='Попробуй получить сообщение 1 еще раз...';
}
</script>
<inputtype="button1" onclick="Msg1()” value=”Показать сообщение 1" />
<inputtype-'button2" onclick="Msg2()" value="Показать сообщение 2" />
<pid="myText"></p>
Введенный пользователем текст можно вывести на экран в тэге с id=”userMsg":
<scripttype="text/javascript”>functionshowMsg(){
varuserlnput = document.getElementByld('userlnput').value; document.getElementByld('userMsg').innerHTML = userlnput;
}
</script>
<inputtype=''input" maxlength=''40" id-'userlnput” onkeyup=”showMsg()" value="Введите текст здесь ..." />
<p id="userMsg"></p>