dom

DOM — объектная модель документа

DOM — это множество документов, которые браузер создает на основе кода html. Работая с этими объектами, можно изменять страницу на экране. Этот способ является основным в создании динамических html страниц. Т.е. вы работаете не с кодом html, а с объектами, которые создаются в памяти браузера на основе этого кода. И все эти объекты доступны в javaScript. Изменяя свойства этих, вы изменяете саму страницу.

На основе кода html документа браузер строит ‘дерево’ объектов. И на основе этого дерева страница строится и выводится на экран.

DOM

По сути дерево — это множество узлов, связанных друг с другом. Каждый элемент html вложен в другой. Родительский элемент всегда один, но дочерних элементов может быть несколько. Узлы в дереве объектов — это объекты, каждый их которых построен на основе элемента html. Т.е. элемент html образует узел в этом дереве. И эти узлы выстраиваются в дерево на основе вложенности элементов html.

Наверху дерева расположен корневой элемент документа — html. Внутри него 2 обязательных дочерних элемента — body, head.

Узлы в дереве также образуются на основе текста, атрибутов, комментариев в html.

В итоге основная работа с html страницей из javaScript состоит в том, что работаете с объектами из дерева элементов. При изменении объектов меняется код html.

Доступ к элементам DOM

Чтобы работать с элементами дерева, надо получить к ним доступ. Корневые объекты можно получить как свойства объекта document (например, доступ к элементу ‘html’ можно получить так: document.documentElement). А к элементу ‘body’ получить доступ можно через: document.body.

DOM документ

Типы узлов документа

  • ELEMENT — узел, образованный тегом.
  • ATTRIBUTE — атрибут (например, padding-left=»7px»).
  • TEXT — узел образован текстом (например, сам текст).
  • COMMENT — комментарии (‘!— comment —‘).
  • DOCUMENT — узел документа.
  • DocumentType — декларация типа документа.

Связи между объектами

У каждого узла в дереве есть несколько свойств, которые позволяют по этому дереву двигаться вверх или вниз, влево или вправо:

  • Массив childNodes — содержит все дочерние узлы.
  • Свойство firstChild — перый элемент в массиве childNodes.
  • Свойство lastChild — последний элемент в массиве childNodes.
  • Свойство parentNode — указывает на родительский узел.
  • Свойство previousSibling — предыдущий левый узел.
  • Свойство nextSiblibg — следующий узел справа.

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

var my = document.getElementByID('my'); //указываем искомый id

Теперь, когда мы получили доступ к элементу через его id, можем рассмотреть его основные свойства и методы (ранее нерассмотренные):

  • Свойство nodeValue — применимо к текстовым узлам, представляет из себя саму строку текста.
  • Свойство tagName — название тега без угловых скобок.
  • Свойства, дублирующие атрибуты html: id, title, lang, dir, style, className.
  • Метод getElementsByTagName — позволяет получить элементы в дереве с одним тегом. Возвращает массив всех элементов с искомым тегом.
  • Методы для работы с атрибутами: setAtribute — изменить значение любого атрибута, getAtribute — получить значение любого атрибута, removeAtribute — удалить атрибут.



Добавить комментарий

Ваш e-mail не будет опубликован.