Блог web-мастера

Название DOM (Document Object Model — объектная модель документа) говорит само за себя. DOM является способом моделирования HTML-документов. В рамках этой модели обеспечивается возможность доступа, навигации и манипулирования HTML-документами. DOM обеспечивает полный контроль над документом, предоставляя полный доступ и позволяя модифицировать содержимое документа.

Для того, чтобы наглядно представить модель DOM для Web-страницы, лучше всего воспользоваться инспектором DOM (DOM Inspector), входящим в состав браузеров Mozilla. В объектной модели документа все элементы страницы располагаются в виде древовидной иерархии.

Каждый дескриптор HTML является узлом такого дерева и связан с соответствующими подузлами и родительскими узлами. Кроме того, у каждого текстового блока имеется свой узел DOM, а точнее, текстовой узел.

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

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

Идеальный способ доступа к отдельному элементу на странице во время работы с DOM — присвоить ему уникальный идентификационный номер (ID). В таком случае метод document.getElementById() предоставляет доступ к заданному элементу, после чего можно видоизменить этот элемент, присоединить к нему дочерние элементы или переместиться дальше по дереву DOM.

В приведенном ниже фрагменте кода осуществляется доступ к элементу <p>. Строковое представление класса этого элемента может меняться в зависимости от типа браузера. Так, если MS IE выводит лишь информацию [object], то браузеры Mozilla более многословны, предоставляя больше сведений об искомом элементе: [object HTMLParagraphElement].

Доступ по имени дескриптора

Другой способ доступа к отдельным элементам на текущей странице — по именам дескрипторов.

Когда приходится работать с рядом элементов, обозначенных одними и теми же дескрипторами HTML (например, со всеми элементами списка или же со всеми абзацами), рекомендуется использовать метод document.getElementsByTagName(). Достаточно указать имя дескриптора, чтобы получить массив всех элементов для их последующей обработки.

В приведенном ниже фрагменте кода осуществляется доступ ко всем элементам <p> и последующий их подсчет.

Результат выполнения приведенного выше кода следующий: [object HTMLCollection] (2 elements), т.е. два искомых элемента. Опять же браузер MS IE предоставляет меньше информации, выводя лишь следующую строку: [object] (2 elements).