Добавляем...


Удаление и замена узлов
Часто удобно иметь возможность удалять узлы дерева. Объект Node предлагает метод removeChild {дочернийУзел), который используется для удаления узла, указанного значением переданного методу аргумента дочернийУзел. Например,

current.removeChild(current.lastChild) ;

удалит последний дочерний узел узла, указанного переменной current. При этом метод removeChild () возвращает объект Node, который был удален:

var lostChild = current.removeChild(current.lastChild);

Кроме удаления Node можно выполнить замену узла с помощью метода replaceChild (новыйДочерний, старыйДочерний), где новыйДочерний является узлом, заменяющим старыйДочерний. Но будьте осторожны: при использовании replaceChild () содержимое замененных узлов уничтожается. Следующий пример демонстрирует возможности удаления и замены узлов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Удаление и замена узлов</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
<!--
function doDelete()
{
var deletePoint = document.getElementById('toDelete');
if (deletePoint.hasChildNodes())
deletePoint.removeChild(deletePoint.lastChild);
}
function doReplace()
{
var replace = document.getElementById('toReplace');
if (replace)
{
var newNode = document.createElement("strong");
var newText = document.createTextNode("strong element");
newNode.appendChild(newText);
replace.parentNode.replaceChild(newNode, replace);
}
}
//-->
</script>
</head>
<body>
<div id="toDelete">
<p>Это абзац</p>
<p>Это<em>другой абзац</em> для удаления</p>
<p>Это еще один абзац</p>
</div>
<p>
Этот абзац содержит <em id="toReplace">элемент 'em'</em>.
</p>
<hr />
<form action="#" method="get">
<input type="button" value="Удаление" onclick="doDelete();" />
<input type="button" value="Замена" onclick="doReplace();" />
</form>
</body>
</html>

Ввиду того что Opera и браузеры на базе Mozilla включают символы пустого пространства в деревья DOM, в указанных браузерах с этим примером вам придется нажимать кнопку "Удаление" на пару раз больше по сравнению с IE, чтобы получить аналогичный эффект. Так что даже при наличии стандарта DOM разница в его интерпретации может иметь существенные последствия.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


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







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика