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

Работа с узлами элементов (Element Nodes)

Работа с узлами элементов (Element Nodes)

Добавление и удаление узлов элементов в основном похоже на действия с текстовыми узлами. Различие по-существу только в создании узла и размещении внутри него контента.

Начнем. Вы создаете узел, используя метод document.createElement(), которому передаете название тэга, который хотите создать, например "p", "div", "table" и т.п. Этот параметр регистронезависимый, т.е. "div", "Div" и "DIV" будут означать один и тот же тэг. Только помните, браузер вернет имя тэга в верхнем регистре, если попытаетесь у него это спросить, попробуйте:

var el = document.createElement("div");
alert(el.tagName);

в результате увидите "DIV".

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

Но вновь созданный элемент — это просто пустой тэг. Поэтому ему неплохо добавить какие-нибудь атрибуты и текст. Следующий пример поможет это показать.

Этот текст внутри элемента DIV.

Добавить параграф.

Здесь при клике по ссылке создаем новый элемент P со своими дочерними узлами, который присоединяем к существующему элементу DIV.

Этот текст внутри элемента DIV.


... код ссылки ...

var paraEl, boldEl;

paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(
document.createTextNode("Этот новый параграф с "));
boldEl.appendChild(document.createTextNode("полужирным"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" текстом, добавлен в DIV"));

document.getElementById("sample4").appendChild(paraEl);

Сперва здесь создаем два новых элемента: тэги

и . Затем элементу параграфа (P) добавляем новый текстовый узел со строкой "Этот новый параграф с ". Таким же образом добавляем "полужирным" элементу B. Затем добавляем этот элемент B (включая его дочерний текстовый узел) к параграфу. И следующий текстовый узел со строкой " текстом, добавлен в DIV" также добавляем к параграфу.

В данном случае элемент параграфа содержит три дочерних узла: текстовый узел (text node); узел элемента для тэга ; еще один текстовый узел. У элемента B только один текстовый узел. Завершающий этап — добавление вновь созданного параграфа существующему на странице тэгу

.

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

boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);

и

paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";

сделают полужирный текст красным. Другими словами, appendChild() фактически помещает не узел в дерево, а только его копию. Переменная boldEl по прежнему указывает на этот узел.

Вот пока и все...



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

  1. Dicos :

    Спасибо.


    2006-03-19 at 4:38 am
  2. Vbnzq :

    как добавить элемент – понятно.
    а можно ли удалить элемент? как называется метод, что-то вроде deleteElement()?


    2006-05-27 at 12:16 pm
  3. Баранов Андрей :

    Vbnzq, можно – removeChild()

    “nodeObj.removeChild(oldChild)
    Метод removeChild() объекта Node удаляет дочерний узел с именем oldChild из списка дочерних узлов данного узла. При использовании этого метода может вызываться объект DOMException со значением NO_MODIFICATION_ALLOWED_ERR, если данный узел доступен только для чтения, или со значением NOT_FOUND_ERR, если узел oldChild не является дочерним узлом данного узла.”

    Проще говоря:

    родитель.removeChild(удаляемый) – для случая, когда известны оба и удаляемый и родительский по отношению к удаляемому.

    А в случае когда известен только удаляемый узел это будет так:

    удаляемый.parentNode.removeChild(удаляемый) т.е. определяем родителя удаляемого узла и убираем этот узел.


    2006-05-27 at 7:54 pm
  4. maRine :

    Огромный Респект за цикл статей.


    2006-08-09 at 5:57 pm
  5. Макс :

    А можно
    удаляемый.removeNode();


    2007-01-09 at 5:53 pm
  6. Алексей aka Kramolnic :

    А можно такой тупой вопрос? Если я все примеры отрабатываю у себя на компе, то IE постоянно выдает предупреждение, что опасное содержимое было заблокировано и приходится его разрешать вручную. Однако при загрузке этого сайта и работе примеров IE молчит. Как это делается???


    2007-07-09 at 11:59 am
  7. Константин :

    Есть вопрос – после выполнения
    var newdiv = document.createElement(’div’);
    newdiv.id = ‘divID’;
    parent.appendChild(newdiv);

    напрочь отказывается выполняться
    getElementById(’divID’).value=”xxx”

    это можно обойти?


    2007-12-27 at 2:39 pm
  8. Баранов Андрей :

    для Константина:


    var newdiv = document.createElement('div');
    newdiv.id = 'divID';
    var newtxt = document.createTextNode('любой текст');
    newdiv.appendChild(newtxt);
    parent.appendChild(newdiv);


    2007-12-28 at 11:48 pm