07 Модуль - DOM. События -- 03 Создание и удаление узлов Flashcards
Какой метод мы используем для создания элемента HTML ? И как работает ?
document.createElement(tagName)
Создает HTML-элемент по указаному имени тега и возвращает ссылку на него как результат своего выполнения. tagName это строка, указывающая тип создаваемого элемента. Элемент создается в памяти, в DOM его еще нет.
Чтобы созданный элемент был отображен на странице, его необходимо добавить к уже существующему элементу в DOM. Какой метод мы будет использовать?
parentElem.appendChild(elem)
Добавляет elem в конец дочерних элементов parentElem.
Метод appendChild() может добавлять только один элемент. Если нужно добавить несколько элементов лучше использовать метод append().(Важно помнить, что порядок написания имеет значение)
Для чего использует метод parentElem.insertBefore(elem, nextSibling) ?
Он добавляет elem в коллекцию детей parentElem, перед элементом nextSibling. Если вторым аргументом указать null, тогда insertBefore сработает как appendChild.
Что делает метод elem.remove()
Более современный метод, но с гарантированной поддержкой только в новых браузерах, он вызывается на самом элементе elem который необходимо удалить.
Что делает метод parent.removeChild(elem) ?
Старый метод работающий во всех браузерах, позволяет удалить ребенка elem из родителя parent. В таком случае необходимо иметь ссылку как на родителя так и на ребенка.
Метод, который нужен для того чтобы клонировать элемент это?
elem.cloneNode(true)
Элемент можно клонировать и работать с этим клоном (точной копией). Так же мы могли бы создать новый элемент и работать с ним, но в ряде случаев гораздо эффективнее клонировать существующий, а потом изменить текст внутри.
Если вызвать с аргументом true, тогда создаст глубокую копию элемента – вместе с атрибутами, включая все поддерево. Если же вызвать с аргументом false, то копия будет сделана без дочерних элементов.
elem.innerHTML
свойство, позволяет получить содержимое элемента, включая теги, в виде строки.
Что происходит Repaint?
Происходит когда изменения произошли в стилях элемента влияющих на внешний вид, но не на геометрию. Например opacity, background-color, visibility и outline. Браузер отрисовывает его заново, с учётом нового стиля. Это дорогая операция, потому что браузер проверяет видимость всех остальных узлов в дереве, один или более могут оказаться скрыты под изменившим внешний вид.
Что знаешь про Reflow?
Происходит когда изменения затрагивают содержимое, структуру документа, положение элементов. Идет пересчет позиционирования и размеров всех элементов, что ведет к перерисовке части или всего документа. Изменения размера одного родительского контейнера повлияет на всех его детей и предков. Имеет значительно большее влияние на производительность чем repaint.
Страница не может выполнять никакие другие операции в то время, когда проиходит
reflow или repaint. Потому что перечисленные операции блокируют браузер.
elem.innerHTML говорит браузеру
распарсить строку, проверить на наличие тегов, если нашел таковые то создать DOM-элементы и вставить их в правильном порядке.
Метод insertAdjacentHTML()
Метод парсит указанную строку как HTML и добавляет результирующие узлы в указанное место DOM-дерева.
element.insertAdjacentHTML(position, string)
position — позиция относительно элемента. Принимает одно из следующих значений:
‘beforebegin’ - перед element
‘afterbegin’ - внутрь element, в самое начало контента
‘beforeend’ - внутрь element, в самый конец контента
‘afterend’ - после element
beforebegin и afterend работают только в том случае, если
узел уже находится в DOM-дереве и имеет родительский элемент.
elem.insertAdjacentElement(position, elem) — вставляет в
произвольное место не HTML-строку, а элемент elem.
