Введение в Объектную Модель Документа 3

Типы узлов (Node Types)
Атрибут, как узел Attribute
Атрибуты стилей

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

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

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

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

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

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

Атрибут, как узел 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";

Следует обратить внимание, что Explorer 5.5 и более ранние версии не поддерживают тип узла Attribute и такой метод, как document.createAttribute() там не работает, в то время как element.getAttribute() уже как-то поддерживается. В этих браузерах получить доступ к атрибутам можно так: element.attributeName. А начиная с версии IE 6.0 уже поддерживаются узлы атрибутов, их методы и свойства.

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

<p id="myParagraph" myAttribute="myValue">Здесь какой-то текст.</p>

...

alert(document.getElementById("myParagraph").getAttribute("myAttribute"));

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

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

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

<p id="sample1" align="left">Здесь какой-то текст.</p>

<p><a href="" onclick="document.getElementById('sample1').setAttribute('align', 'left'); return false;">Нале-во!</a>
::
<a href="" onclick="document.getElementById('sample1').setAttribute('align', 'right'); return false;">Напра-во!</a></p>

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

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

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

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

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

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

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

<p id="sample2" style="text-align:left">Здесь какой-то текст.</p>

<p><a href="" onclick="document.getElementById('sample2').style.textAlign = 'left'; return false;">Нале-во!</a>
::
<a href="" onclick="document.getElementById('sample2').style.textAlign = 'right'; return false;">Напра-во!</a></p>

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

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



Много комментариев (15) к “Введение в Объектную Модель Документа 3”

  1. MG :

    В последнем примере…
    Напра-во!

    style.textAlign = ‘right’ а не ‘left’

    danke


  2. Баранов Андрей :

    Да, конечно. Спасибо.


  3. Anton :

    setAttribute(”myAttribute”, “myValue”) не работает в Explorer 6!


  4. Алевтина :

    Подставляя вместо атрибута myAttribute –> class
    получаю null

    alert(document.getElementById(”myParagraph”).getAttribute(”class”));
    Здесь какой-то текст.

    или я что-то не так поняла?


  5. Алевтина :

    Подставляя вместо атрибута myAttribute –> class
    получаю null

    alert(document.getElementById(”myParagraph”).getAttribute(”class”));
    Здесь какой-то текст.

    или я что-то не так поняла?


  6. Алевтина :

    <p id=”myParagraph” class=”myValue”>Здесь какой-то текст.</p>


  7. gol :

    Алевтина. это не class, это className :)


  8. Egor :

    Подскажите, почему не срабатывает такой код?
    var el = document.getElementsByTagName(”span”);
    el.setAttribute(”onClick”, “show(this)”);


  9. Viteks :

    потому как в el будет массив из всех span-ов документа


  10. Alexus :

    В IE не работает такое:
    Красный!

    В мозиле все хокей. Кто нить знает почему?


  11. Alexus :

    сори…
    В IE не работает такое:

    a href=”" onclick=”document.getElementById(’sample1′).setAttribute(’style’, ‘color:red;’); return false;” Красный! /a

    В мозиле все хокей. Кто нить знает почему?


  12. ZZZubec :

    Скорее всего, правильней будет написать так:

    <p id="sample" style="color: blue;"> Текст</p>
    <a href="" onclick="document.getElementById('sample1').style.color = 'red'; return false;"> Красный! </a>

    на сколько я понял из предыдущих примеров, style как и class не является аттрибутом, скорее всего обращаться к ним надо напрямую.

    ЗЫ: поправте если чего…


  13. протопоп Аввакум :

    Сейчас голова треснет. Всё-таки знать всё это гораздо приятнее, чем учить!


  14. Soider :

    А мне кто-нибудь может объяснить зачем в примере с изменением text-align в конце return false?
    я понимаю, что без етого оно не работает, но почему? (


  15. Илья :

    Добрый день. Очень понравилась статья, спасибо! Есть такой вопрос: можно ли и, если да, то каким образом переопределить сам класс? Т.е. если есть файл с css:
    .testClass {
    color:red;
    }

    как изменить свойство цвета класса testClass на другой?

    Для чего это может понадобиться: например, есть множество div-ов с классом, в котором display:block, и хочется одним движением перевести их в display:none.

    Заранее спасибо.



22 queries 0.191 seconds.