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

Метод 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"

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

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

var oRemovedItem = oList.removeChild(oList.lastChild)

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

currentNode.replaceChild(newChild, oldChild)

Если мы хотим удалить некоторый узел из документа, то надо воспользоваться методом removeNode(). Этот метод не входит в список рекомендуемых W3C, но поддерживается браузерами. В качестве параметра метод принимает выражение типа 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

Хотя свойства innerHTML и outerHTML не являются официально поддерживаемыми стандартами, однако они поддерживаются практически всеми современными браузерами.

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

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

Для следующих элементов это свойство доступно только при чтении: CAPTION, COL, COLGROUP, HTML, TBODY, TD, 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>

-->