Изменение документа
Модификации DOM – это ключ к созданию «живых» страниц.
Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.
Пример: показать сообщение
Рассмотрим методы на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert .
Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).
Создание элемента
DOM-узел можно создать двумя методами:
Создаёт новый элемент с заданным тегом:
Создаёт новый текстовый узел с заданным текстом:
Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения.
Создание сообщения
В нашем случае сообщение – это div с классом alert и HTML в нём:
Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.
Методы вставки
Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .
Для этого есть метод append , в нашем случае: document.body.append(div) .
Вот полный пример:
Вот методы для различных вариантов вставки:
- node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
- node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
- node.before(. nodes or strings) –- вставляет узлы или строки до node ,
- node.after(. nodes or strings) –- вставляет узлы или строки после node ,
- node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.
Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:
Наглядная иллюстрация того, куда эти методы вставляют:
Итоговый список будет таким:
Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.
Например, здесь вставляется строка и элемент:
Весь текст вставляется как текст.
Поэтому финальный HTML будет:
Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .
Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.
А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?
insertAdjacentHTML/Text/Element
С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .
Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:
- "beforebegin" – вставить html непосредственно перед elem ,
- "afterbegin" – вставить html в начало elem ,
- "beforeend" – вставить html в конец elem ,
- "afterend" – вставить html непосредственно после elem .
Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».
Так мы можем добавлять произвольный HTML на страницу.
Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.
У метода есть два брата:
- elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
- elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .
Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.
Так что, вот альтернативный вариант показа сообщения:
Удаление узлов
Для удаления узла есть методы node.remove() .
Например, сделаем так, чтобы наше сообщение удалялось через секунду:
Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.
Все методы вставки автоматически удаляют узлы со старых мест.
Например, давайте поменяем местами элементы:
Клонирование узлов: cloneNode
Как вставить ещё одно подобное сообщение?
Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).
Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.
- Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.
Пример копирования сообщения:
DocumentFragment
DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.
Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.
Например, getListContent ниже генерирует фрагмент с элементами <li> , которые позже вставляются в <ul> :
Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:
DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:
Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.
Устаревшие методы вставки/удаления
Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.
Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.
Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:
Добавляет node в конец дочерних элементов parentElem .
Следующий пример добавляет новый <li> в конец <ol> :
Вставляет node перед nextSibling в parentElem .
Следующий пример вставляет новый элемент перед вторым <li> :
Чтобы вставить newLi в начало, мы можем сделать вот так:
Заменяет oldChild на node среди дочерних элементов parentElem .
Удаляет node из parentElem (предполагается, что он родитель node ).
Этот пример удалит первый <li> из <ol> :
Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.
Несколько слов о «document.write»
Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .
Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.
Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.
В современных скриптах он редко встречается из-за следующего важного ограничения:
Вызов document.write работает только во время загрузки страницы.
Если вызвать его позже, то существующее содержимое документа затрётся.
Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.
Это его недостаток.
Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.
Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.
Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.
Итого
Методы для создания узлов:
- document.createElement(tag) – создаёт элемент с заданным тегом,
- document.createTextNode(value) – создаёт текстовый узел (редко используется),
- elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.
Вставка и удаление:
- node.append(. nodes or strings) – вставляет в node в конец,
- node.prepend(. nodes or strings) – вставляет в node в начало,
- node.before(. nodes or strings) – вставляет прямо перед node ,
- node.after(. nodes or strings) – вставляет сразу после node ,
- node.replaceWith(. nodes or strings) – заменяет node .
- node.remove() – удаляет node .
- parent.appendChild(node)
- parent.insertBefore(node, nextSibling)
- parent.removeChild(node)
- parent.replaceChild(newElem, node)
Все эти методы возвращают node .
Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :
- "beforebegin" – вставляет html прямо перед elem ,
- "afterbegin" – вставляет html в elem в начало,
- "beforeend" – вставляет html в elem в конец,
- "afterend" – вставляет html сразу после elem .
Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.
Чтобы добавить HTML на страницу до завершения её загрузки:
- document.write(html)
После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.
Add elements with javaScript
The process of Adding elements in javaScript generally refers to creating and appending html elements to a container element in an html document. Also in core javaScript by itself in general, adding elements may refer to creating and appending elements for an Array. However in this post I will be going mainly over ways to go about adding html elements to an html document when it comes to client side javaScript.
In jQuery there is the add method that can be used as a way to add elements. It is true that jQuery is still a widely used front end javaScript framework, but it is a library that is starting to die out a little. There are many other front end frameworks that make adding elements, and many DOM mutation related tasks a little easier but today for the most part just working in the browser itself is not so hard and can still work just fine for small projects.
I have written a post on innerHTML not to long ago which is one typical way of adding elements once a reference to a container element is obtained. However in this post I will be covering the subject in general, and not just the use of innerHTML which might not always be the best choice. There are of course alternatives to innerHTML that involve the use of a collection of methods, such as createElement, and appendChild.
Also there is some things to cover when it comes to html node lists as well, and how they are like arrays. However they are not instances of the Array constructor so one can not just use array prototype methods with them. So there is a little to cover when it comes to adding elements to an html document, and everything else that might branch off from this topic such as removing elements.
1 — The very basics of Adding Elements in client side javaScript
To add an element in javaScript I first need to gain a reference to a hard coded element in the html to begin with. There are a number of ways to go about doing this such as with document.getElementById which shows up in a lot of javaScript examples, to properties such as document.body. Once I have a reference to a container element I can then use a property like innerHTML or a collection of element object methods to create an add elements. In this section I will be going over the very basic tools for doing adding elements, but will not get into that much detail with other topics that surround this. I also often use these first sections to mention any other additional things that you might want to know before continuing to read the rest of the post.
1.1 — The source code examples here are on github
I have the source code examples that I am writing about here up on my test vjs github repository. That is where you would want to make a pull request of you think that one needs to be made, there is also the comments section where something can be brought up with one of the examples here. This is also the repository where I hold my source code examples for all my other posts, and where I am working on examples for the next time I come around to edit and expand this post.
1.2 — Using innerHTML to add elements
The innerHTML property of an element object is one way to go about getting a string value of the innerHTML of an element, but it can also be used to set the innerHTML also with a string value of the desired innerHTML.
In this post I am not going to be going into detail about innerHTML as I have written a post on that all ready. However innerHTML is of course one option for making quick work of this when it comes to simple projects. When it comes to more advanced projects though there are some situations in which an alliterative way of doing this should be used.
So now that we have a very basic idea of what this is all about out of the way I can now move on to other ways of adding elements to an html document.
1.3 — The createElement, and append child methods for adding elements
The alternative to using innerhtml as a way to create elements is to use the document.createElement method along with something like appendChild, and createTextNode. This is generally the preferred way to create and add new elements into an html document because it allows for access to element object reference right away. In addition I can set all kinds of properties to the created element before appending it the the html, or I can even not append it at all if I find that I do not want to for whatever the reason.
2 — The createTextNode method and creating paragraph elements, and any element that might require a text node
Some elements such as a p, span, and pre might require a text node value added to after creating it in order for the element to actually show some text. So in this section I think that it is called for to cover a few quick examples that have to do with adding text nodes to newly created elements with the create element method.
2.1 — The createTextNode method and a paragraph element
So for starters there are paragraph elements, and when creating them it is often called for to define what the value of the text node is for that element. One way to do so it to use the createTextNode method to create a text node with the desired text, and then append that to the newly created paragraph element.
2.2 — pre element example
It might be fun to play around with some javaScript examples that have to do with preformatted text elements. If you are not familiar with them this kind of element is what is used in html for preformatted text that contains line breaks. WIth many other elements line breaks will be ignored when it comes to formating, but with preformatted elements they will not be ignored. So this might be a good way to become familiar with how to go about creating preformatted text with javaScript code by creating and adding pre elements to an html document.
There is more than one kind of line break depending on the operating system, but for the most part it is best to just go with the windows style one that contains a carriage return and then a line feed after. the reason why I say that it that that kind of line break will work o windows but will also work okay on just about every other operating system just fine also.
An example such as this could be expanded with additional methods to make a simple grid system, but this alone should help with the general idea of why it is that pre elements are useful in some situations.
3 — Removing elements
So there is the process of injecting new elements into a container element, however I can not write about adding elements without at least writing a thing or two about removing them also. This section will then be a few examples that have to do with removing elements that are there ti begin with, and also maybe a few exercise that have to do with both adding and removing them also while I am at it. As such in this section I will be going over methods like the remove method of an element object reference, but also many other topics such as event attachment.
3.1 — The remove method of an element
One of the first method to check out when it comes to removing elements might be the remove method of an element. Using this method is simple enough, once an reference to an element is obtained it is then just a matter of calling the remove element, and that is all there is to it.
3.2 — remove all elements the meet a given condition
Some times I might want to remove all elements that will meet a given condition. That is that I might want to use the document query selector all method to get a collection of elements, and then filter that collection by a given condition. I will then want to loop over all the filtered elements and call the remove method for all of them. One way to go about doing something like this would be to use one of the function prototype methods such as the call method to make the filter array prototype method work with an html collection and return an array of elements to each element that meets a given query, and condition in the form of a method that I given tot he array filter method. I can then use the array for each method to loop over all of the elements in the array that is returned by the array filter method and call the remove method for each of them.
3.4 — Remove and add elements
This is very much a post on adding elements to an html document, so in this section I will not just be going over an example that makes use of the remove method, but also append child and the create element methods. The idea here this is to have an unordered list element with a single starting li element. The li element then have some additional nested elements in which one of them is a delete button, and the other is a span that contains some text for the list item. There will then also be some additional html that will contain input buttons that can be used to inject additional list items that are formatted this way. As you might expect the additional html out side of the list wil be used to create and append additional li elements and the delete button will be used to remove a single li element from the list.
Event though this is a very basic list application using client side javaScript there are a lot of things to be aware of here. For example there is the target property of the event object in add item and delete item the event handlers, and the fact that these handers are attached to the parent elements of the elements that the user will be interacting with. This works because of something called event bubbling that is that something happens such as a click on a child element, and then events bubble up to parent elements. The target property of the event object is the element where the event happened and the current element property of the vent object is the current element where the event handlers are attached.
4 — Conclusion
So the two general ways to go about adding elements in front end javaScript is the inner html method, and then the createElements method that is often regarded as the more professional way of going about adding elements. There is also other properties and ways of doing things in front end javaScript that can be thought of as a way of adding nodes in general such as the innerText property. That is not a way of adding elements to some HTML, but it is a way of adding text nodes, and doing so in a way in which any inner content is removed while doing so.
Document: createElement() method
In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized.
Syntax
Parameters
A string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName. Don’t use qualified names (like «html:a») with this method. When called on an HTML document, createElement() converts tagName to lower case before creating the element. In Firefox, Opera, and Chrome, createElement(null) works like createElement(«null») .
An object with the following properties:
The tag name of a custom element previously defined via customElements.define() . See Web component example for more details.
Return value
Note: A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.
Examples
Basic example
This creates a new <div> and inserts it before the element with the ID » div1 «.
Изменения в DOM
Давайте теперь рассмотрим, как добавлять, изменять, заменять и удалять узлы из DOM. В частности рассмотрим методы createElement() и createTextNode() , а также node.textContent и node.innerHTML .
Создание новых узлов
В этом разделе работаем со следующим HTML:
Открываем вкладку Console в панели разработчика.
Воспользуемся методом createElement() в объекте document для создания нового элемента p .
Успешно! Переменная paragraph выдает p элемент.
Теперь можно добавить текст к нашему элементу со свойством textContent :
Таким образом, комбинируя createElement() и textContent , можно создавать узлы-элементы.
Также можно использовать свойство innerHTML , чтобы добавлять содержимое внутрь элемента:
Из двух рассмотренных методов textContent лучше — он немного быстрее, чем innerHTML .
Текстовый узел можно создать также с помощью метода createTextNode() :
Все эти методы создают новые элементы и текстовые узлы, однако они не видны на интерфейсе веб-сайта, пока не вставлены в document !
Вставка узлов в DOM
Чтобы увидеть созданные нами текстовые узлы и элементы на интерфейсе, нужно вставить их в document . Методы appendChild() и insertBefore() используются для добавления элементов в начало, середину или конец родительского элемента, а replaceChild() используется для замены старого узла на новый.
Продемонстрируем это, добавив список к нашему HTML:
Вот наша страница:
Скажем, мы хотим добавить новый пункт в конец списка. Сперва нам нужно создать элемент и добавить к нему текст, как мы делали раньше:
Теперь у нас есть элемент для нового списка! Добавляем его в конец списка, используя appendChild() :
И новый элемент li добавлен в конец ul :
Чтобы добавить пункт в начало списка, создадим другой элемент (мы должны создать новый элемент, потому что createElement() нельзя использовать повторно):
Используем метод insertBefore() , чтобы добавить элемент в начало списка. В нем будет два аргумента: первый будет новым добавленным дочерним узлом, а второй — соседним узлом, следующим сразу за дочерним.
Так мы добавим новый элемент anotherNewItem в начало списка:
Теперь новый узел добавлен в начало списка!
Давайте теперь посмотрим, как можно заменить существующий узел новым, используя replaceChild() . Во-первых, создаем новый элемент:
Метод replaceChild() также содержит два аргумента: новый узел и узел, который нужно заменить:
В нашем примере заменяем третий дочерний элемент списка:
Используя комбинацию методов appendChild() , insertBefore() и replaceChild() узлы и элементы можно вставлять в DOM где угодно!
Удаление узлов из DOM
Для удаления узлов из DOM используем removeChild() (чтобы удалить дочерние узлы), или remove() , чтобы удалить сам узел.
Возвращаясь к нашему примеру, давайте удалим последний пункт списка:
В качестве альтернативы можно использовать remove() , чтобы удалить сам узел:
Используя removeChild() и remove() , можно удалить любые узлы из DOM.
Изменение атрибутов
Атрибуты часто используются в HTML для предоставления дополнительной информации об элементе. Некоторые распространенные примеры: атрибут src тега img , href тега a , а также class , id и style . Встречаются атрибуты, начинающиеся с data- — это пользовательские атрибуты, которые тоже можно изменять.
Вот методы, которые используются в JavaScript для изменения атрибутов:
hasAttribute() — возвращает булев тип.
getAttribute() — возвращает значение определенного атрибута.
setAttribute() — добавляет или обновляет значение определенного атрибута.
removeAttribute() — удаляет атрибут из элемента.
В качестве примера используем данный HTML:
Откроем console и протестируем методы атрибутов:
Давайте используем setAttribute() , чтобы назначить новое изображение src :
Методы hasAttribute() and getAttribute() часто используются с условными операторами, в то время как setAttribute() и removeAttribute() чаще используются для изменения DOM напрямую.
Изменение классов
В работе с CSS мы используем классы для применения стилей к нескольким элементам. Давайте посмотрим, как можно работать с атрибутом класса в JavaScript, используя className и classList .
className — получает или задает значение класса.
classList.add() —добавляет значения классов.
classList.toggle() — отобразить/скрыть класс.
classList.contains() — проверяет, существует ли определенное значение.
classList.replace() — заменяет старое значение на новое.
classList.remove() — удаляет значение.
В следующем примере поработаем с каждым из этих методов:
Начальный выводимый результат:
Используем className , чтобы применить значение к классам:
Теперь класс alert , определенный в HTML, назначен первому div :
Это изменит любые существующие классы элемента. Можно добавлять несколько классов, используя className , если разделять имена классов пробелами.
Другой способ изменять классы — использование свойства classList , у которого есть несколько полезных методов:
После запуска всех этих методов, наш HTML отобразится так:
Пометка: classList.add() добавит новый класс к списку существующих (помните, что className изменяет любые существующие классы). Также можно добавлять несколько классов строками, разделенными запятыми.
Изменение стилей
Обычно стили добавляются при помощи отдельных CSS таблиц, однако бывают случаи, когда может понадобиться использовать встроенный стиль. Полезно будет знать, как изменять его непосредственно с помощью JavaScript! Продемонстрируем с помощью следующего HTML:
При работе со свойствами CSS в DOM мы используем camelCase (верблюжий регистр). Таким образом, вместо использования тире, как в CSS, например, border-radius , мы используем camelCase borderRadius , где первое слово начинается со строчной буквы, а второе с заглавной.
Пометка: можно использовать setAttribute() для изменения стилей, например, div.setAttribute('style', 'border-radius: 50%'); , но это удалит все существующие встроенные стили, поэтому лучше использовать непосредственно атрибут style .
Вывод после добавления этих стилей:
Конечно, если нужно применить несколько изменений стиля элемента, лучше применить их к классу в CSS и просто добавить этот новый класс к элементу, используя JavaScript ��.
Заключение
Вот и все!! ������ Мы поработали с деревом DOM и узлами, чтобы изучить все о доступе, прохождении и изменении элементов. Если вы прочитали все части — прекрасно! Теперь вы на пути к улучшению знаний о DOM!