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

Javascript:
mynewparagraph=document.createElement('p');
mynewtext=document.createTextNode('this is a new paragraph');

Изменение существующего содержания

setAttribute(attribute,value)

Добавляет новый атрибут с соответствующим значением к объекту

appendChild(child)

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

cloneNode()

Копирует узел со всеми дочерними узлами.

hasChildNodes()

Проверяет, имеет ли объект дочерние узлы и если да, возвращает true

insertBefore(newchild,oldchild)

Добавляет новый узел newchild перед узлом oldchild в дереве документа.

removeChild(oldchild)

Удаляет дочерний узел oldchild.

replaceChild(newchild,oldchild)

Перемещает узел newchild на место узла oldchild

removeAttribute(attribute)

Удаляет атрибут attribute объекта.

Пример с картинкой

Пусть у нас есть ссылки на изображения, и они должны открываться в новом окне браузера без Javascript, или под ссылками, если Javascript подключён.

Итак, в случае, когда Javascript и DOM доступны, мы хотим:

• Удалить надпись "(new window)" из ссылки
• Добавить обработчик события для вызова функции popw()

Эта функция должна:

• Показывать изображение, соответствующее ссылке, под ссылкой, если его ещё нет.
• Удалять изображение, если оно уже есть (чтобы не добавлять снова и снова изображение нажимая по ссылке)
• Сделать, чтобы изображение исчезало, когда пользователи кликают по нему.

Первую задачу решить нетрудно:

Javascript:
function imgpop()
{
 var il,imga,imgatxt;

// получаем все  LI из списка изображений, пробежаться по ним циклом
 il=document.getElementById('imglist').getElementsByTagName('li');
 for(i=0;i<il.length;i++)
 {

// вычленяем первую ссылку из LI
 imga=il[i].getElementsByTagName('a')[0];

// удаляем выражение (new window) из текста ссылки
// (который является содержанием(nodeValue) первого узла)  
 imgatxt=imga.firstChild;
 imgatxt.nodeValue=imgatxt.nodeValue.replace(/ \(new window\)/,'');

// добавляем обработчик события для вызова popw();
 imga.onclick=function(){return popw(this);}
 //imga.onkeypress=function(){return popw(this);}
 }
}

Далее, для функции popw() мы должны использовать некоторые из методов описанных выше:

Javascript:
function popw(o)
{
 var newimg;
// если уже есть изображение в parentNode (li) 
 if(o.parentNode.getElementsByTagName('img').length>0)
 {
// удаляем его
  o.parentNode.removeChild(o.parentNode.getElementsByTagName('img')[0]);
 } else {
// иначе создаём новое изображение и добавляем обработчик, который удаляет изображение
// когда вы кликаете по нему
  newimg=document.createElement('img');
  newimg.style.display='block';
  newimg.onclick=function(){this.parentNode.removeChild(this);};
  newimg.src=o.href;
  o.parentNode.appendChild(newimg)
 }
 return false;
}
Посмотреть работу скрипта показа изображений

Пример: ссылка на указатель даты

Пусть, например, у нас есть форма, содержащая поля даты и мы хотим предложить указатель даты пользователям, у которых подключён Javascript, и вводить дату вручную - прочим пользователям. Давайте не будем обсуждать здесь саму реализацию указателя даты, а сфокусируемся на том, как его вызвать.

Сначала напишем необходимый HTML. Чтобы видеть какие элементы должны выдавать ссылку на указатель даты, мы добавим к ним классы date.

Мы перебираем все input’ы документа, и проверяем, у какого из них содержится класс date в className (помните, элементы могут иметь более чем один класс в атрибуте class!)

Когда мы находим этот класс, то создаём новый объект ссылки и её текст. Этот текст мы присоединяем к объекту ссылки как дочерний объект и добавляем обработчик события, чтобы вызвать наш скрипт указателя даты.

Как только ссылка создана, мы добавляем её после поля ввода.

Javascript:
function addPickerLink()
{
 var inputs,pickLink,pickText;

// перебираем все inputы
 inputs=document.getElementsByTagName('input');
 for(i=0;i<inputs.length;i++)
 {
  
// если class содержит 'date'
  if(/date/.test(inputs[i].className))
  {

// создать новую ссылку с текстом
   pickLink=document.createElement('a');
   pickText=document.createTextNode('pick a date');

// добавляем текст дочерним узлом к ссылке
   pickLink.appendChild(pickText);

// устанавливаем атрибут href в # и вызывать picker на клик или переход с клавиатуры
   pickLink.setAttribute('href','#');
   pickLink.onclick=function(){picker(this);return false;};
   //pickLink.onkeypress=function(){picker(this);return false;};

// добавляем новую ссылку к родителю поля ввода (это P)
   inputs[i].parentNode.appendChild(pickLink)
  }
 }
}
Посмотреть демонстрационный пример

Сейчас после всех полей с датами есть ссылка на picker().

Всё что нам надо, это сказать функции picker к чему употребить возвращаемое значение.

Ссылка передаёт сама себя функции picker() в виде объекта, и мы должны получить доступ к предыдущему узлу того же уровня - INPUT.

Javascript:
function picker(o)
{
 alert('This is a simulation only.') // это демонстрационная функция
 o.previousSibling.value='26/04/1975';  
}

Готово, но не вполне. Мы добавили новую ссылку как последнего ребёнка к родительскому узлу input, а ведь очень даже может быть, что предыдущий узел того же уровня, что и наша ссылка на самом деле не INPUT, а пробел! Следовательно, нам надо перебирать все предыдущие узлы того же уровня пока мы не наткнёмся на узел типа элемент.

Javascript:
function picker(o)
{
 alert('This is a simulation only.') // это демонстрационная функция
 while(o.previousSibling.nodeType!=1)
 {
  o=o.previousSibling;
 }
 o.previousSibling.value='26/04/1975';  
}

Перебор всегда операция нудная (hacky) и зачастую довольно медленная. Чтобы избежать перебора мы должны изменить нашу функцию.

Изменение функции addPickerLink().

Обходной манёвр - это использовать insertBefore() для следующего узла того же уровня, что и наше поле ввода.

Javascript:
function addPickerLink()
{
 var inputs,pickLink,pickText;

// перебираем все inputы
 inputs=document.getElementsByTagName('input');
 for(i=0;i<inputs.length;i++)
 {
  
// если class содержит 'date'
   if(/date/.test(inputs[i].className))
   {

// создаём новый элемент ссылки и текст
    pickLink=document.createElement('a');
    pickText=document.createTextNode('pick a date');
 
// добавляем текст как дочерний узел к ссылке
    pickLink.appendChild(pickText);

// устанавливаем атрибут href равным # и вызываем picker при клике или переходе с клавиатуры
    pickLink.setAttribute('href','#'); 
    pickLink.onclick=function(){picker(this)};
    //pickLink.onkeypress=function(){picker(this)};

// добавляем новую ссылку сразу после inputа
    inputs[i].parentNode.appendChild(pickLink)
    inputs[i].parentNode.insertBefore(pickLink,inputs[i].nextSibling);
    }
  }
}
Посмотреть демонстрационный пример.

Памятки

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

Возможно, поначалу применять DOM покажется немного трудным, но как только вы перенастроите вашу голову в сторону использования DOM, вам с каждым разом будет легче его применять.

Некоторые проблемы общего характера:

• Убедитесь что элемент существует, прежде чем попытаться обратиться к нему. Некоторые браузеры счастливы проверить object.nextSibling.nodeName и возвращают false когда следующего узла нет или же этот узел текстовый, но другие генерируют ошибку, когда вы пытаетесь обратиться к атрибуту несуществующего элемента.
• Убедитесь, что код не привязан слишком сильно к вёрстке, перевод строки могут быть прочитаны как новый узел, разметка может поменяться, а ведь вам неохота менять ваш скрипт с каждой сменой дизайна.
• Чтение содержания элемента осуществляется чтением значения его childNodes, а не самого элемента! document.getElementsByTagName('h2')[0].nodeValue пуст, document.getElementsByTagName('h2')[0].firstChild.nodeValue - нет.
• Проверяя nodeNames и атрибуты, убедитесь, что вы указываете правильный регистр , так как некоторые браузеры представляют элементы в вернем регистре, другие же в нижнем.
• HTML сгенерированный DOM в большинстве случаев не well-formed, если вы хотите повторно использовать HTML из сгенерированной браузером странице, вы должны вычистить его.
• Избегайте частого перебора элементов, если вы можете сами создать разметку, с которой вам предстоит работать, взамен перебора стремитесь использовать ID.
• Знайте ваш синтаксис. Много раз(Many a time) getElementsById может послужить причиной частого переписывания скрипта. (rescripting)
• Знайте ваши объекты Javascript и HTML атрибуты. Это означает не проверяйте атрибут, которого нет.
• Не рассчитывайте, что на других сайтах придерживаются ваших приёмов вёрстки. Например, стоит проверять, что className содержит вашу строку, а не то, что он ей равен, так как некоторым программистам нравиться использовать несколько классов на элемент.

Как насчёт innerHTML?

Когда появился Internet Explorer 4, родился innerHTML, быстрый способ создания и изменения контента. Этот способ прочитать содержание элементов много проще чем рекомендованный W3C. Это главным образом случай, если элемент содержит childNodes, которые сами элементы, а мы хотим прочитать всё содержание. Чтобы сделать это только с помощью DOM, вам надо пройти сквозь мучительные испытания – проверять тип и читать значения каждого узла. Свойство InnerHTML много проще использовать, но у него есть несколько недостатков. Например, вы не можете получить обратно ссылки на элементы, созданные с его помощью, так как итоговое значение скорее строка, чем объекты. Кроме того, innerHTML поддерживается только HTML, а не XML, в отличие от DOM, которая обеспечивает переносимость на любую разметку. Просмотрите раздел DOM в Quirksmode.org или всестороннее исследование в Developer-x, чтобы сравнить поддержку DOM разными браузерами.

Вызываем дождь (скрипты)

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

Старая школа

Когда-то давно, когда мы были молоды и невинны, мы добавляли атрибут onload к элементу body.

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div> <!-- <div class="gray_bg register_shadow"></div> --> </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br />  <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}