JavaScript - DOM: методы для клонирования и замены узлов

На этом уроке мы познакомимся с методами cloneNode() и replaceChild(), которые соответственно предназначены для клонирования и замены узлов в документе.

Метод replaceChild()

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

Синтаксис:

node.replaceChild(newnode,oldnode).

Данный метод имеет 2 обязательных параметра:

• newnode - узел, которым мы хотим заменить существующий узел у родителя. Если в качестве этого узла мы используем существующий узел документа, то он будет удалён.
• oldnode — существующий узел у родителя, т.е. тот который мы хотим заменить.

Например, в имеющемся списке ul заменить первый элемент на новый.

<ul id="myTech"><li>Телефон</li><li>Ноутбук</li><li>Компьютер</li></ul>

//Создать новый элемент li
var elementLI = document.createElement("LI");
//Создать новый текстовый узел, содержащий текст "Смартфон"
var textSmartPhone = document.createTextNode("Cмapтфoн");
//добавить к только что созданному элементу li текстовый узел, содержащий текст "Смартфон"
elementLI.appendChild(textSmartPhone);
//получить элемент ul с id="myTech"
var myTech = document.getElementById("myTech");
//заменим первый дочерний узел (элемент li с индексом О) элемента ul на только что созданный узел
myTech.replaceChild(elementLI,myTech.childNodes[0]);

<!--HTML-->
<div id="message" class="alert аlert-warning">Предупреждение</div>
<!--JavaScript-->
<script>
//создать новый текстовый узел
var textMessage = document.createTextNode("Новое предупреждение");
//получить элемент div, имеющий id="message" 
var message = document.getElementById("message");
//заменить текстовый узел у элемента div с id="message"
message.replaceChild(textMessage,message.firstChild);
</script>

Метод cloneNode()

Метод cloneNode() создаёт копию узла, который он возвращает в качестве результата. Обычно следующим действием после клонирования узла является его вставка в документ с помощью метода appendChild() или insertBefore().

Синтаксис:

node.cloneNode(deep)

Данный метод имеет один необязательный параметр (deep), который может принимать одно из следующих значений:

• true - клонирует узел, его атрибуты и всех его потомков.
• false (по умолчанию) - клонирует только узел и его атрибуты.

Например, клонировать первый узел списка и вставить его в конец.

<ul id="myTech"><li>Телефон</li><li>Ноутбук</li><li>Компьютер</li></ul>

//получить элемент, имеющий id="myTech"
var myTech = document.getElementById("myTech");
//получить узел, который мы хотим клонировать
var myPhone = myTech.firstChild;
//клонировать узел
var myClone = myPhone.cloneNode(true);
//вставить узел в конец списка
myTech.appendChild(myClone);

<!--HTML-->
<ul id="order"><li>Чайник</li><li>Сковорода</li><li>Утюг</li></ul>
<ul id="oldOrder"><li>Пылесос</li><li>Микроволновая печь</li></ul>
<!--JavaScript-->
<script>
//получить элемент ul с id="order"
var myOrder = document.getElementById("order");
//получить элемент ul с id="oldOrder"
var myOldOrder = document.getElementById("oldOrder");
//перебрать все элементы в списке ul с id="oldOrder"
for (var i = 0; i < myOldOrder.length, i++) {
  //клонировать i дочерний узел элемента ul c id="oldOrder" 
  var myNode = myOldOrder[i].cloneNode(true);
  //вставить клонированный узел в список ul с id="order"
  myOrder.appendChild(myNode);
}
</script>

Задание

1. Заменить текстовый узел "Модель" текстовым узлом "Чертёж", который необходимо создать с помощью метода createTextNode().

   <select id="myList"><li>Схема</li><li>Модель</li><li>Эскиз</li></select>
   

2. Поменяйте местами первый и последний дочерние узлы у списка ul с id="myList".