Копирование: метод cloneNode()

В качестве параметра можно указать, должны ли копироваться все дочерние узлы, по умолчанию значение параметра false. Если оно равно false, то копируется только тот узел, который активизирует метод.

Если мы хотим скопировать некоторый узел вместе со всеми его атрибутами, то надо воспользоваться методом cloneNode(true). Например, строка кода:

var oClone = oList.cloneNode(true)

копирует в память всю ветвь дерева, начинающуюся на узле oList, то есть весь список целиком. Метод возвращает ссылку на копию узла.

Удаление и замена узлов в документе

Метод replaceChild()позволяет у узла, который его активизирует, заменить одного из его деток на нового. Ссылку на новый и на заменяемый узлы метод принимает в качестве первого и второго параметров, соответственно. Так, следующий фрагмент сценария

var oItem = document.createElement("LI")

oItem.appendChild(document.createTextNode("JScript"))

oList.replaceChild(oItem, oList.lastChild)

создает сначала элемент списка с текстом "JScript", а затем заменяет им последний элемент нашего списка. Отметим, что метод возвращает ссылку на вставленный в документ узел.

Теперь наш список выглядит так:

<UL ID="components">

<LI>HTML</LI>

<LI>CSS</LI>

<LI>JScript</LI>

</UL>

Конечно, описанный выше пример надо рассматривать только как иллюстративный, поскольку тот же результат можно получить гораздо проще:

oList.lastChild.firstChild.nodeValue= "JScript"

Если мы хотим заменить некоторый узел в документе другим узлом, то надо воспользоваться методом replaceNode(). Подчеркнем, что этот метод не входит в список рекомендуемых W3C, но поддерживается Internet Explorer 5. Метод replaceNode()удаляет из документа узел, который его активизирует, и вставляет в документ вместо него новый узел, ссылку на который принимает в качестве параметра. Заметим, что узел удаляется вместе со всеми своими атрибутами и потомками. Так, следующий фрагмент сценария

var oParagraph = document.createElement("P")

var oText = document.createTextNode("Составные части DHTML")

oParagraph.appendChild(oText)

oList.replaceNode(oParagraph)

создает сначала параграф с текстом "Составные части DHTML", а затем заменяет наш списокoListна этот параграф. Отметим, что метод возвращает ссылку на вставленный в документ узел.

Удаление: методы removeChild()и removeNode()

Метод removeChild() позволяет у узла удалить одного из его потомков. Ссылку на удаляемый узел метод принимает в качестве параметра. Например, строка кода

var oRemovedItem = oList.removeChild(oList.lastChild)

удаляет из списка последний элемент. Метод возвращает ссылку на удаляемый им узел. Поскольку удаленный из документа узел остается в памяти, мы можем в дальнейшем работать с ним, используя эту ссылку. Еще один метод

currentNode.replaceChild(newChild, oldChild)

– заменяет узел oldChild на newChild.

Если мы хотим удалить некоторый узел из документа, то надо воспользоваться методом removeNode(). Этот метод не входит в список рекомендуемых W3C, но поддерживается Internet Explorer 5. В качестве параметра метод принимает выражение типа Boolean. Если оно равно false, то удаляется только тот узел, который активизировал метод. При этом, идущая от него ветвь дерева присоединяется к его родительскому узлу. Если параметр метода равен true, то узел удаляется вместе со всеми своими потомками. Например, строка кода

var oRemovedList = oList.removeNode(true)

удаляет из документа весь наш список целиком. Метод removeNode()возвращает ссылку на удаляемый им узел. Поскольку удаленный из документа узел остается в памяти, мы можем в дальнейшем работать с ним, используя эту ссылку.

Использование каскадных таблиц стилей в DOM

Каждый узел DOM имеет объект style, который описывает применяемые стили. Например, можно изменить цвет шрифта элемента "samplePtag", document.getElementById("samplePtag").style.color = «red».

Более подробно обо всех свойствах можно узнать в спецификации CSS (http://www.w3.org/Style/CSS/#specs).

Свойство элемента innerHTML и outerHTML

W3C DOM не поддерживает известные еще с Internet Explorer 4 свойства объектов, innerHTML, innerText, outerHTML и outerText. Хотя свойства innerHTML и outerHTML не являются официально поддерживаемыми стандартами, однако они поддерживаются практически всеми современными браузерами.

Свойство innerHTML содержит HTML-код между открывающим и закрывающим тегом. С помощью этого свойства можно работать с кодом внутри тега, как со строкой – считывать и записывать. Однако для следующей группы элементов это свойство доступно только для чтения: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. Свойство innerHTML не существует у элементов, которые не имеют одновременно открывающего и закрывающего тега (например <br>).

Отличие свойства outerHTML в том, что это свойство включает в себя HTML-код между открывающим и закрывающим тегом, а также открывающий и закрывающий тег этого элемента.

Для следующих элементов это свойство доступно только при чтении: CAPTION, COL, COLGROUP, FRAMESET, HTML, TBODY, TD, TFOOT, TH, THEAD, TR. Свойство outerHTML доступно для записи только после того, как весь документ будет загружен, т.е. произойдет событие window.onload.

В качестве иллюстрации ниже приведен пример использования свойства outerHTML. Когда пользователь щелкает по кнопке передачи формы на сервер, вместо кнопки появляется сообщение с благодарностью:

<INPUT TYPE="submit" VALUE="Отправить"

onClick="this.outerHTML='Благодарим Вас за участие в нашем опросе.'">

А вот как это же действие можно реализовать, используя только средства W3C DOM:

<INPUT TYPE="submit" VALUE="Отправить"

onClick="replaceButton(this)">

<script type="text/javascript">

function replaceButton(oButton) {

var oText = document.createTextNode("Благодарим Вас за участие в нашем опросе.")

var oParent = oButton.parentNode

oParent.replaceChild(oParagraph,oButton)

}

</script>

Ниже приведен пример использования свойств innerHTML и outerHTML:

<!-- пример pr31: использование свойств -->

<html><head>

<script type="text/javascript">

function transformBody() {

var myPar = document.getElementById("myP");

myP.innerHTML = "<i>Hello, World!</i>";

myP.outerHTML = "<strong>" + myP.innerHTML

+ "</strong>";

}

</script>

</head>

<body onload="transformBody();">

<p id="myP">sample text</p>

</body>

</html>

<!-- после выполнения функции структура элемента body будет:

<BODY><STRONG><I>Hello, World!</I></STRONG></BODY>

-->