На этом уроке мы познакомимся с методами 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]);
Например, заменить у элемента div
с id="message"
один текстовый узел на другой:
<!--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);
Например, скопировать элементы из одного списка в другой с помощью метода cloneNode()
:
<!--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>
Задание
Заменить текстовый узел "Модель" текстовым узлом "Чертёж", который необходимо создать с помощью метода
createTextNode()
.<select id="myList"><li>Схема</li><li>Модель</li><li>Эскиз</li></select>
Поменяйте местами первый и последний дочерние узлы у списка
ul
сid="myList"
.
Комментарии ()