В этой записи я хочу рассказать как добавить или удалить элемент из объекта в JavaScript. Это очень просто, но многие новички, как и я раньше, часто путались в этом.
Создадим объект для примера
var obj = { name: "alex", last_name: "petrov", website: "сайт", };У нас есть простой объект, внутри которого есть такие данные как name (имя), last_name (фамилия) и website (сайт). Данные могут быть абсолютно любыми, но в целях этой записи они будут именно такими.
Добавление нового элемента
obj.country = "ru"; // добавит новый ключ "country" в объект cо значением "ru" obj["city"] = "Moscow"; // так же добавит новый ключ, только "city" со значением "Moscow"В коде выше все понятно, но лишь придам ясности: вы можете добавлять новые значения в объект в синтаксисе объекта, используя «.» и ключ или же обычный формат массива. Если вы объявите как массив, то obj все равно остается объектом, так как ранее вы его обозначили именно таким благодаря {} .
Создать объект внутри объекта
obj.other_obj = {}; // создадим новое значение other_obj в obj и сделаем его объектомТеперь добавим туда какие-нибудь данные:
Obj.other_obj.first = "первый ключ нового объекта"; obj.other_obj.second = "второй";
Мы создали два новых значения first и second внутри other_obj .
Удаление элемента
delete obj.name; // возвращает: trueВы можете воспользоваться delete , которая может удалять элементы из объектов. Весь объект таким образом удалить нельзя, но если вам это нужно, то вы можете сделать так:
Obj = {}; // Сделает объект снова пустым
На этой все, если у вас остались какие-то вопросы по объектам в JavaScript, пишите ниже комментарий, постараюсь вам помочь.
Это четвертая часть постов, посвященная нативным эквивалентам jQuery методов. Вы можете почитать , и прежде чем продолжить.
В данной статье мы рассмотрим способы создания, вставки, перемещения и удаления элементов. И хотя jQuery уже содержит большое количество полезных методов, вы будете удивлены, когда узнаете, что все это можно легко сделать используя родные методы.
Манипуляции с HTML кодом элементов
jQuery
// get var html = $(elem).html(); // set $(elem).html("Нативный JS
// get var html = elem.innerHTML; // set elem.innerHTML = "Манипуляции с текстом элементов
jQuery
// get var text = $(elem).text(); // set $(elem).text("New text");Нативный JS
// get var text = elem.textContent; // set elem.textContent = "New text";Создание элемента
jQuery
$("");Нативный JS
document.createElement("div");Добавляет содержимое в конец элементов
jQuery
$(parentNode).append(newNode);Нативный JS
parentNode.appendChild(newNode);Добавляет содержимое в начало элементов
jQuery
$(referenceNode).prepend(newNode);Нативный JS
referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // or referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+Вставить непосредственно перед элементом Insert directly before an Element
jQuery
$(referenceNode).before(newNode);Нативный JS
referenceNode.parentNode.insertBefore(newNode, referenceNode); // or referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+Вставить непосредственно после элемента Insert directly after an Element
jQuery
$(referenceNode).after(newNode);Нативный JS
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // or referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+Примечание: ‘beforebegin’ и ‘afterend’ будут работать только тогда, когда referenceNode находиться в DOM дереве и имеет родительский элемент.
Посмотрите на следующее:
ReferenceNode.insertAdjacentElement(position, node);
Метод insertAdjacentElement принимает два параметра:
- position — позиция относительно referenceNode , должна быть одной из следующих:
- ‘beforebegin’ — Перед самим элементом.
- ‘afterbegin’ — Внутри элемента, перед первым потомком.
- ‘beforeend’ — Внутри элемента, после последнего потомка.
- ‘afterend’ — После самого элемента.
- node — узел для вставки
Метод insertAdjacentElement более понятный и интуитивный чем insertBefore метод, но последний лучше поддерживается в старых браузерах.
Многократное добавление элементов
Стоит так же отметить, что добавление элемента к узлу, который находиться в DOM дереве приведет к перерисовке. Это не очень хорошо, потому что браузер должен пересчитать размеры и положение нового элемента, что так же приведет к изменениям потомков элемента, предков и элементов, которые появятся после него в DOM. Если вы добавляете много элементов в DOM, то это может занять некоторое время.
Что бы этого избежать, вы можете сделать добавление с DocumentFragment. Фрагмент документа является объектом document который существует только в памяти, поэтому добавление к нему не будет вызывать никаких перекомпоновок.
Допустим, нам нужно добавить 100 элементов li к ul элементу, который присутствует в DOM дереве:
// Get the element that will contain our items var ul = document.querySelector("ul"); // make 100 list elements for (var i = 1; i < 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }
В приведенном выше примере li элементы добавляются напрямую к ul элементу, который находиться в DOM дереве, следовательно, приведет к перерисовке на каждой итерации — это 100 изменений!
Давайте найдем лучший способ.
// Get the element that will contain our items var ul = document.querySelector("ul"); // create a document fragment to append the list elements to var docFrag = document.createDocumentFragment(); // make 100 list elements for (var i = 1; i < 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);
В этом же примере элементы li добавляются к фрагменту документа в памяти, так что перекомпоновка сработает, когда фрагмент добавится к элементу ul. Этот способ уменьшит количество перерисовок от 100 до 1.
Удаление элемента
jQuery
$(referenceNode).remove();Нативный JS
referenceNode.parentNode.removeChild(referenceNode); // or referenceNode.remove(); // FF 23.0+, 23.0+, Edge (No IE support)На этом уроке мы научимся создавать узлы-элементы (createElement) и текстовые узлы (createTextNode). А также рассмотрим методы, предназначенные для добавления узлов к дереву (appendChild , insertBefore) и для удаления узлов из дерева (removeChild).
Добавление узлов к дереву
Добавление нового узла к дереву обычно осуществляется в 2 этапа:
- Создать необходимый узел, используя один из следующих методов:
- createElement() - создаёт элемент (узел) с указанным именем (тегом). Метод createElement(element) имеет один обязательный параметр (element) - это строка, содержащая имя создаваемого элемент (тега). Указывать имя элемента (тега) в параметре необходимо заглавными буквами. В качестве результата данный метод возвращает элемент, который был создан.
- createTextNode() - создаёт текстовый узел с указанным текстом. Метод createTextNode(text) имеет один обязательный параметр (text) - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан.
- appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод appendChild(node) имеет один обязательный параметр это узел (node), который Вы хотите добавить. В качестве результата данный метод возвращает добавленный узел.
- insertBefore() - вставляет узел как дочерний узел элемента, для которого вызывается данный метод. Метод insertBefore(newNode,existingNode) имеет два параметра: newNode (обязательный) - узел, который Вы хотите добавить, existingNode (не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр (existingNode) не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата метод insertBefore() возвращает вставленный узел.
Например:
- Компьютер
- Ноутбук
- Планшет
Рассмотрим более сложный пример, в котором добавим к дереву узел LI , содержащий текстовый узел с текстом "Смартфон", в конец списка ul .
Для этого необходимо выполнить следующее:
- Создать элемент (узел) LI .
- Создать текстовый узел, содержащий текст "Смартфон".
- Добавить созданный текстовый узел как последний дочерний узел только что созданному элементу LI
- Добавить недавно созданный узел LI как последний дочерний узел элемента ul
Методы appendChild() и insertBefore() при работе с существующими узлами
Работа с существующими узлами методами appendChild() и insertBefore() также осуществляется в 2 этапа:
- Получить существующий узел в дереве.
- Указать место, куда необходимо вставить узел, с помощью метода appendChild() или insertBefore() . При этом узел будет удалён из предыдущего места.
Например, добавить существующий элемент li , содержащий текст “Планшет" в начало списка (при этом он будет удалён из предыдущего места):
//получаем элемент UL, содержащий список, по его id var elementUL = document.getElementById("list"); //получить элемент li, содержащий текстовый узел "Планшет" var elementLI = elementUL.childNodes; //добавляем элемент в начало списка //при этом он будет удалён из исходного места elementUL.insertBefore(elementLI,elementUL.firstChild);
Задание
- Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый.
- Создать список, текстовое поле и 2 кнопки. Написать код на языке JavaScript, который в зависимости от нажатой кнопки добавляет текст, находящийся в текстовом поле, в начало или в конец списка.
Удаление узлов
Удаление узла из дерева осуществляется в 2 этапа:
- Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() или querySelectorAll() .
- Вызвать у родительского узла метод removeChild()
, которому в качестве параметра необходимо передать узел, который мы хотим у него удалить.
Метод removeChild() возвращает в качестве значения удалённый узел или null , если узел, который мы хотели удалить, не существовал.
//найти узел, который мы хотим удалить var findElement = document.getElementById("notebook"); //вызвать у родительского узла метод removeChild //и передать ему в качестве параметра найденный узел findElement.parentNode.removeChild(findElement);
Например, удалить последний дочерний элемент у элемента, имеющего id="myID" :
//получить элемент, имеющий id="myID" var myID = document.getElementById("myID"); //получить последний дочерний узел у элемента myID var lastNode = myID.lastChild; //т.к. мы не знаем, является ли последний дочерний узел элемента элементом, //то воспользуемся циклом while для поиска последнего дочернего элемента у элемента myID //пока у элемента есть узел и его тип не равен 1 (т.е. он не элемент) выполнять while(lastNode && lastNode.nodeType!=1) { //перейти к предыдущему узлу lastNode = lastNode.previousSibling; } //если у узла myID мы нашли элемент if (lastNode) { //то его необходимо удалить lastNode.parentNode.removeChild(lastNode); }
Например, удалить все дочерние узлы у элемента, имеющего id="myQuestion" :
//получить элемент, у которого мы хотим удалить все его дочерние узлы var elementQuestion = document.getElementById("myQuestion"); //пока есть первый элемент while (elementQuestion.firstElement) { //удалить его elementQuestion.removeChild(element.firstChild); }
Задание
- Напишите функцию, удаляющую все текстовые узлы у элемента.
- Имеется 2 списка (), напишите код на языке JavaScript, удаляющий все элементы из 1 и 2 списка.