DOM. Понятие объектной модели документа. Методы поиска элементов на веб-странице

· Для работы с элементами web-страницы на клиентской стороне используется объектная модель документа (DocumentObjectModel, DOM). DOM-модель – это внутреннее представление HTML-страницы в виде дерева.

· Все элементы страницы, включая теги, текст, комментарии, являются взаимосвязанными узлами DOM(узлы DOM-дерева являются объектами). Из корня деревапо ссылкам можно добраться абсолютно до любого узла(корневым элементом документа является тег <html>). DOM. Понятие объектной модели документа. Методы поиска элементов на веб-странице - student2.ru

В HTML-странице помимо тегов используются комментарии и простой текст (перенос строки - это тоже текст). В DOM-модели они тоже представляют отдельные узлы. Поэтому общий вид дерева будет такой(см. рис).

Узлы-элементы - это теги, из которых состоит документ.

Текстовые узлы - весь текст внутри тега, включая пробелы и переносы строки.Перед <head> и после </body> текстовые узлы не создаются.

Комментарии - комментарии в коде страницы.

· У элементов DOM есть свойства и методы, которые позволяют изменять их.

· Основным назначением DOM-модели является возможность изменения HTML-страницы (и ее отображения на экране) в сценариях JavaScript.

Связи между объектами различных уровней, показанные на рис. ниже означают, что объект верхнего уровня содержит ссылку на объект нижнего уровня. Так, например, между объектами Window и Document есть связь. Это означает, что объект Window имеет свойство с именем document, содержащее ссылку на объект типа Document.

DOM. Понятие объектной модели документа. Методы поиска элементов на веб-странице - student2.ru

Рис. Иерархия объектов 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>

Наши рекомендации