Типы узлов (Node Types)

Перед тем, как продолжить, более детально рассмотрим типы узлов. Как упоминалось ранее, в Объектной Модели Документа определены несколько типов узлов, но в разметке web-страницы в основном используются element, text и attribute.

Узел Element, как вы уже могли видеть, соответствует отдельному тэгу или паре тэгов в HTML коде. У него могут быть дочерние узлы (child node), которые могут быть элементами или текстовыми узлами.

Узел Text представляет обычный текст, или набор символов. У него предполагается наличие родительского узла (parent node), могут быть соседние узлы от того же родительского (sibling), но не может быть дочерних узлов (child node).

Узел Attribute отличается от вышеописанных. Он не участвует в построении дерева документа, у него нет ни родительских, ни дочерних, ни соседних узлов. Вместо этого он используется для доступа к атрибутам узла элемента. Он представляет атрибуты, определенные у HTML тэга элемента, например, атрибут href тэга или src тэга .

Обратите внимание, что значение атрибута всегда будет представлено текстовой строкой.

Атрибут, как узел Attribute

Существует несколько способов обращения к атрибутам элемента. Причина тому — стандарт DOM2, который был разработан для различных типов документов (т.е. XML), не только HTML. Таким образом он формально определяет тип узла для атрибута.

Но для всех документов он обеспечивает несколько схожих методов для доступа к атрибутам, добавления новых или изменения существующих. Как это происходит, смотрите дальше.

Метод document.createAttribute() дает возможность создать новый узел атрибута, которому можно присвоить значение, и применить его к узлу элемента:

var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("myParagraph");
el.setAttributeNode(attr);

Однако, существует более простой способ доступа к атрибутам элемента, используя getAttribute() и setAttribute() методы элемента:

var el = document.getElementById("myParagraph");
el.setAttribute("myAttribute", "myValue");

Атрибуты элемента могут быть представлены и как свойства узла элемента. Другими словами, можно сделать и так:

var el = document.getElementById("myParagraph");
el.myAttribute = "myValue";

Вы можете определять ваши атрибуты в HTML тэгах, например:

Здесь какой-то текст.

увидите "myValue", а также обратите внимание: чтобы получить значение атрибута, следует использовать именно element.getAttribute(attributeName), а не element.attributeName, так как в последнем случае не все браузеры смогут определить ваши собственные атрибуты.

Атрибуты можно удалять из узла элемента, используя метод removeAttribute() или removeAttributeNode(), а также заменяя element.attributeName пустой строкой ("").

Изменение атрибутов — один из вариантов создания динамических эффектов. Например можно легко изменить выравнивание текста по правому или левому краю:

Здесь какой-то текст.

Атрибуты стилей

Большинство атрибутов для HTML тэгов примитивны, они могут определять значение свойства только конкретному тэгу. Применение стилей более интересно. Как известно, CSS может быть использовано для применения параметров стилей к одному тэгу, всем однотипным тэгам или назначено с помощью классов (class). Более того, некоторые элементы наследуют стили вышестоящих элементов.

Вы можете добавлять стили элементам. Для примера, можно изменить атрибут style или class HTML тэгу. Но этот метод добавит элементу все параметры стилей. Часто приходится только какой-нибудь один или несколько параметр стиля убрать или изменить, не трогая остальные.

Атрибут style узла элемента определен как объект со свойствами для всех возможных параметров стилей. Можно получить доступ и изменить каждый отдельный параметр стиля как угодно. Следующий пример похож на предыдущий:

Здесь какой-то текст.

Нале-во! :: Напра-во!

Но в этом случае выравнивание текста определено параметрами стилей вместо атрибута align. Вот фрагмент кода:

Здесь какой-то текст.

Здесь следует обратить внимание на то, что названия свойств в CSS пишутся через дефис "-" (text-align), тогда как название свойства style здесь будет написано textAlign, т.е. убираем дефис и следующую за ним букву делаем прописной.

А кроме этого, если параметры стилей изначально не были присвоены элементу, им все-равно можно устанавливать значения используя DOM. Например, в коде выше атрибут style= тэга "p" можно было вообще не указывать.