Использование DOM. Доступ к элементам онлайн урок.


При помощи JS можно получать доступ к элементам (которые являются объектами DOM) веб-страницы с целью дальнейшей работы с ними. Для этого необходимо воспользоваться специальными методами объекта document. Рассмотрим основные способы получения доступа к объектам (элементам) веб-документа

Получение конкретного элемента в дереве DOM. Для получения доступа к конкретному элементу объектной модели необходимо для начала указать идентификатор этого элемента, для его однозначного определения. Как было отмечено в предыдущих уроках, это можно реализовать при помощи атрибута id - значения этих атрибутов должны быть уникальными в рамках одного веб-документа. Для получения доступа к элементу по id необходимо воспользоваться методом getElementById(id) объекта DOM (например объекта document), который принимает строку со значением атрибута id.

Например, пусть у нас есть такая несложная веб-страничка:

<!DOCTYPE html>
<html>
<head>
<title>Title of document</title>
</head>
<body>
<div id="header">
<p>Menu</p>
</div>
<div id="content">
Test content
</div>
<div id="footer">
Footer
</div>

</body>
</html>


Добавим в конец "тела" следующий скрипт:

var element = document.getElementById('header');
console.log(element);

Тогда мы получим в консоли информацию об объекте DOM element. Заметим, что этот скрипт не сработает, если его разместить до того, как элемент (тег) <div id="header"> будет обработан браузером и добавлен к DOM.

Получение коллекции объектов. Коллекция объекта - это набор дочерних объектов или свойств данного объекта. Коллекцию объектов можно получить, например, при помощи поиска по названию тега или по названию класса.

Для получения доступа к элементам документа по названию тега необходимо использовать метод getElementsByTagName(tagName) объекта DOM. Этот метод принимает аргумент в виде строки с названием тега.

Для получения доступа к элементам документа по названию класса тегов необходимо использовать метод getElementsByClassName(className) объекта DOM. Этот метод принимает аргумент в виде строки с названием класса.

Например,



Еще раз отметим, что доступ к элементам DOM при помощи скриптов JS возможен по мере загрузки страницы и формирования самой DOM. Это означает, что скрипты, зависящие от объектов DOM должны быть размещены после соответствующих тегов элементов, либо выполнятся в результате события onload (загрузка документа завершена).