Краткое описание интерфейса Node

13. Объектная модель документа. DOM W3C

Краткое описание интерфейса `Node`

Свойства

nodeType

Cвойство nodeType (только для чтения) позволяет определить тип узла. Для каждого типа предусмотрен дополнительный интерфейс, которым обладает узел данного типа. Таким образом, все узлы DOM-дерева обладают интерфейсом Node, и кроме того, дополнительно, интерфейсами соответствующего типа.

В таблице, приведенной ниже, указаны возможные значения свойства nodeType, и для каждого значения приводится название интерфейса, который этот тип узла дополнительно поддерживает.

Значение `nodeType`	Константа `nodeType`	Название интерфейса	Описание
`1`	`Node.ELEMENT_NODE`	`Element`	HTML-элемент (или XML-элемент)
`3`	`Node.TEXT_NODE`	`Text`	Текстовый узел
`9`	`Node.DOCUMENT_NODE`	`Document`	Oбъект `document`
`8`	`Node.COMMENT_NODE`	`Comment`	Узел, построенный для HTML-комментария (или XML-комментария)
`11`	`Node.DOCUMENT_FRAGMENT_NODE`	`DocumentFragment`	Смежные узлы и их поддеревья
`2`	`Node.ATTRIBUTE_NODE`	`Attr`	Атрибут элемента

Узлы Attr связаны с узлами Element, но не являются непосредственной частью DOM-дерева (значение свойства parentNode у них имеет значение null).

Узел DocumentFragment представляет часть (фрагмент) документа, а именно, список смежных узлов и всех их потомков, но без общего родительского узла. Сами по себе узлы DocumentFragment не являются частью DOM-дерева (значение свойства parentNode у них имеет значение null), но позволяют вставлять в документ дочерние узлы из своего списка. Интерфейс DocumentFragment используется для создания временного хранилища для узлов, которые требуется вставлять в документ все сразу, например, при реализации операций вырезания, копирования и вставки.

К сожалению браузер IE-6 не поддерживает констант, обозначающих тип узла (Node.ELEMENT_NODE, Node.TEXT_NODE и других). Поэтому приходится, либо использовать числовые константы, либо определять символьные константы самостоятельно.

nodeName

Только для чтения, строка.

Тип узла	Значение свойства `nodeName`
`Element`	Имя тега
`Attr`	Имя атрибута
`Text`	Строка `"#text"`

nodeValue

Строка.

Тип узла	Значение свойства `nodeName`
`Element`	`null`
`Attr`	Значение атрибута
`Text`	Текст узла

ownerDocument

Только для чтения. Ссылка на объект document (частью которого является данный узел).

parentNode

Только для чтения. Ссылка на узел-родитель, или null, если такого узла нет.

childNodes

Только для чтения. Объект NodeList, подобный массиву. Содержит дочерние узы текущего узла. Это свойство никогда не равно null. Если дочерних узлов нет, childNodes.length равно нулю. Объект NodeList — «живой», любые изменения узлов в списке немедленно видны через него.

firstChild

Только для чтения. Ссылка на первый дочерний узел или null, если дочерних узлов нет.

lastChild

Только для чтения. Ссылка на последний дочерний узел или null, если дочерних узлов нет.

nextSibling

Только для чтения. Ссылка на смежный узел (брата), который в списке узлов родителя непосредственно следует за данным, или null, если такого узла нет.

previousSibling

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

Методы

appendChild(node)

Вставляет узел node в качестве последнего дочернего узла данного узла. Если node уже присутствует в дереве документа, он удаляется из дерева и вставляется в новое место. Если node есть узел DocumentFragment, сам он не вставляется, а вместо него вставляются по порядку все его дочерние узлы. Метод возвращает ссылку на node.

Пример

praxis/13/examples/01/index.htm

Следующая функция добавляет новый абзац с текстом text в конец документа:


function appendP(text)
{
  // Создадим элемент "абзац"
  var el = document.createElement("p"); 
  // Добавим к созданному элементу потомка -- текстовый элемент 
  el.appendChild(document.createTextNode(text));
  // Добавим построенный элемент к BODY -- и он сразу отобразится на экране
  document.body.appendChild(el);
}

cloneNode(clonechild)

Создает и возвращает копию текущего узла. Если clonechild равно true, то копируются и все потомки. Возвращаемый узел не является частью дерева документа (значение свойства parentNode у него равно null). Когда копируется узел Element, копируются и все его атрибуты, однако, обработчики событий, зарегистрированные для узла не копируются.

Пример

praxis/13/examples/02/index.htm

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <META http-equiv="Content-Script-Type" content="text/javascript">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Пример 02</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 02</H1>
     <P id="fp">
&laquo;Главное ребята&nbsp;&mdash; <EM>сердцем</EM> не стареть!&raquo; 
     <P>
<BUTTON id="button">Клонировать первый абзац</BUTTON>
  </BODY>
</HTML>

Файл main.js


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  // Назначить обработчик события onclick элементу с id="button"
  document.getElementById("button").onclick = function ()
  {
    // Получить доступ к элементу с id="fp" 
    var fp = document.getElementById("fp"); 
    // Клонировать элемент 
    var node = fp.cloneNode(true); 
    // Добавить клон в конец документа
    document.body.appendChild(node);
  };
};

hasAttributes()

Возвращает true, если в узле есть атрибуты (атрибуты могут иметь только узлы Element).

Браузер IE6 не поддерживает этот метод

hasChildNodes()

Возвращает true, если в узле есть дочерние узлы.

Пример

praxis/13/examples/03/index.htm

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <META http-equiv="Content-Script-Type" content="text/javascript">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Пример 03</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 03</H1>

     <P>
&laquo;Главное ребята&nbsp;&mdash; <EM>сердцем</EM> не стареть!&raquo; 

     <P>
<BUTTON id="button">Анализ первого абзаца</BUTTON>
  </BODY>
</HTML>

Файл main.js


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  var first = true;
  // Назначить обработчик события onclick элементу с id="button"
  document.getElementById("button").onclick = function ()
  {
    if (first) // Однократная работа обработчика
    {
      // Метод getElementsByTagName возвращает массив узлов с заданным тегом 
      // Получить доступ к первому абзацу документа 
      var fp = document.getElementsByTagName("p")[0]; 
      var attr = "не знаю, есть ли атрибуты";
      if (fp.hasAttributes) // Проверим, поддерживает ли браузер этот метод
        attr = fp.hasAttributes() ? "есть атрибуты" : "нет атрибутов";
      var child = "не знаю, есть ли дочерние узлы";
      if (fp.hasChildNodes) // Проверим, поддерживает ли браузер этот метод
        child = fp.hasChildNodes() ? "есть дочерние узлы" : "нет дочерних узлов";
      var text = "В первом абзаце " + attr + " и " + child + ".";
      // Добавить абзац к документу
      appendP(text);
      first = false; // Чтобы больше внутренность if не работала
    }  
  };

  // Добавить абзац к документу
  function appendP(text)
  {
    // Создадим элемент "абзац"
    var el = document.createElement("p"); 
    // Добавим к созданному элементу потомка -- текстовый элемент 
    el.appendChild(document.createTextNode(text));
    // Добавим построенный элемент к BODY -- и он сразу отобразится на экране
    document.body.appendChild(el);
  }
};

insertBefore(newnode, node)

Вставляет узел newnode перед дочерним узлом node. Если node равно null, узел newnode вставляется в качестве последнего дочернего узла (как в случае вызова метода appendChild). Если узел newnode уже присутствует в дереве документа, он удаляется из дерева и вставляется в новое место. Если newnode есть узел DocumentFragment, сам он не вставляется, а вместо него вставляются по порядку все дочерние узлы newnode. Метод возвращает ссылку на newnode.

Пример

praxis/13/examples/04/index.htm

Следующая функция вставляет новый абзац с текстом text в начало документа:


function insertP(text)
{
  // Создадим элемент "абзац"
  var el = document.createElement("p"); 
  // Добавим к созданному элементу потомка -- текстовый элемент 
  el.appendChild(document.createTextNode(text));
  // Добавим построенный элемент к BODY -- и он сразу отобразится на экране
  document.body.insertBefore(el, document.body.firstChild);
}

removeChild(oldnode)

Удаляет из дерева и возвращает указанный дочерний узел oldnode.

Пример

praxis/13/examples/05/index.htm

Следующая функция удаляет из узла-аргумента все прямые текстовые потомки:


// Удалить из узла node текстовые узлы, которые являются 
// прямыми потомками node. Обратите внимание: если узел 
// удаляется, счетчик цикла не наращивается. Так сделано потому,
// что список узлов -- "живой", на место удалённого узла встает  
// следующий (childNodes.length тоже меняется автоматически), и он 
// не будет проверен, если счетчик цикла увеличится в его заголовке.
function delTextNodes(node)
{
  var childNodes = node.childNodes; // Ссылка на "живой" массив детей
  for(var i=0; i<childNodes.length;)
   if(childNodes[i].nodeType == 3 /* Node.TEXT_NODE */)
     node.removeChild(childNodes[i]);
   else i++;   
}

replaceChild(newnode, oldnode)

Заменяет дочерний узел oldnode новым узлом newnode. Если новый узел newnode уже является частью документа, он сначала удаляется из документа, затем вставляется в новую позицию. Если newnode есть узел DocumentFragment, сам он не вставляется, а вместо него вставляются по порядку все дочерние узлы newnode. Метод возвращает oldnode.