Доступ к элементам
getElementsByTagName(‘tag_name’) – возвращает массив элементов, у которых название тэга равно tag_name.
getElementById(‘element_id’) – возвращает элемент, у которого атрибут id равен element_id.
document.body – доступ к элементу body страницы.
Чтобы воспользоваться преимуществом древовидной структуры, принятой в DOM для представления документа, следует использовать навигационные атрибуты элементов.
Атрибут |
Описание |
firstChild |
Возвращает первый узел-потомок |
lastChild |
Возвращает последний узел-потомок |
previousSibling |
Возвращает предыдущий соседний узел, имеющий с текущим одного родителя |
nextSibling |
Возвращает следующий соседний узел, имеющий с текущим одного родителя |
parentNode |
Возвращает родительский узел |
ownerDocument |
Возвращает корневой узел документа, содержащий текущей узел |
nodeName |
Возвращает имя узла |
nodeValue |
Возвращает значение узла в текстовом формате |
nodeType |
Возвращает тип узла в виде числа |
Свойства элементов
У DOM-элементов есть масса свойств. Обычно используется максимум треть из них. Некоторые из них можно читать и устанавливать, другие - только читать.
tagName - Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.
style - Это свойство управляет стилем. Оно аналогично установке стиля в CSS. Например, можно установить element.style.width.
innerHTML - Оно содержит весь HTML-код внутри узла, и его можно менять.
className - Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту "class".
Динамическая генерация элементов
Иногда требуется динамически формировать веб-страницы, например, в случае создания чатов, форумов, либо динамически создаваемых веб-страниц, содержимое которых хранится в базе данных. DOM позволяет решить такую задачу. Для создания объектов у объекта Document имеются следующие методы:
Метод |
Описание |
createElement(имя_элемента) |
Создает новый узел элемента с указанным именем |
createTextNode(текст) |
Создает текстовый узел с указанным текстом |
createAttribute(имя_атрибута) |
Создает новый узел атрибута с указанным именем |
Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node.
Метод |
Описание |
appendChild(новый_узел) |
Добавляет объект Node в конец списка узлов-потомков |
cloneNode(потомок-опция) |
Создает объект Node, идентичный указанному в аргументе. В качестве аргумента можно использовать и все узлы-потомки одновременно |
hasChildNodes() |
Возвращает true, если узел имеет потомков |
insertBefore(новый_узел, текущий_узел) |
Вставляет объект Node в список потомков перед узлом, указанным в качестве второго параметра |
removeChild(узел-потомок) |
Удаляет узел-потомок, указанный в качестве параметра |
replaceChild(новый_потомок, старый_потомок) |
Заменяет старого потомка на нового |