Interactive online courses HTML Academy
2026-03-09 10:53 Diff
https://htmlacademy.org/courses/javascript-browser/dom/summary

Collections

There are several ways of finding several elements on the page at once. Elements are written to a structure, which we call a collection. Collections work similarly to arrays, though they are something different from them. Collections of elements can be called by index, and you can sort them in the for loop, just like regular arrays.

The following are some of the ways of obtaining collections:

  • element.querySelectorAll() returns all of the elements that match the specified rule. This code is static, and the changes in DOM do not affect it whatsoever. We can say that querySelectorAll works like any other variable that we have written some value to. Until we redefine the variable, it will contain the value that we wrote to it, regardless of what happens in the code. Therefore, this collection is called static.
  • parentElement.children is called in the parent element, and it collects all of the child elements in a dynamic collection. These collections react to changes in DOM. If one of the elements in the collection is deleted from DOM, then it will also disappear from the collection.

Working with Elements

Removing an Element

There are various ways of removing elements from the page, of which one of the simplest is calling the remove method for the element that needs to be removed.

element.remove();

The method in the example above removes the element from DOM.

Cloning an Element

We can copy elements as many times as we like and insert them anywhere on the page using cloning. This what the cloneNode method is for. The syntax is as follows:

element.cloneNode(true); // Will return a cloned element with all nested elements. element.cloneNode(false); // Will return a cloned element without nested elements. element.cloneNode(); // 0_o

If you pass true as the argument, the element itself is cloned together with all of its nested elements. This type of cloning includes all attributes, classes, and the text contents of all nested elements. We call this deep cloning.

However, if you pass the value false as the argument, then the element itself with its classes and attributes will be cloned, but any child elements will be excluded.

It is best to always explicitly pass the argument to cloneNode to avoid any errors in the program operation.

How to Obtain Text from the Input Field

We need to call the property of the value input field. It stores information that has been entered in the field.

input.value;

The result can be saved as a variable and used later in the code.

Templates and the template Tag

The template tag stores a template for future elements. It is stored in the same place as the rest of the site markup, only its contents are not displayed on the page.

In order to obtain the template in JavaScript, you can find it by its identifier. This unique name is written to the id attribute. You can specify this attribute for various elements. The main thing is to follow the rule that the attribute value should not be repeated on the same page.

The template in the markup:

<body> … <template id="text-template"> <p class="text"></p> </template> </body>

Searching for an element in JavaScript:

document.querySelector('#text-template');

The hashtag in the querySelector parameter indicates that you need to search by id.

The document-fragment or just a code fragment is contained inside the template. It is the repository for the contents of the template tag. It is also the reason why the markup from the template is not displayed on the page.

In order to obtain the desired elements in the template, we need to call document-fragment. It is located in the content property so that we can continue to search for the desired elements using the usual search methods.

<body> … <template id="text-template"> <p class="text"></p> </template> </body>

If we want to find an element in the template, we need to perform the following search:

var template = document.querySelector('#text-template'); // A template was found in the document. var content = template.content; // We obtained the contents, a text fragment. var text = content.querySelector('.text'); // We found the desired template.

We can shorten this code. For example, we can write the the content as one variable and the sought template as another variable.

var textTemplate = document.querySelector('#text-template').content; var text = textTemplate.querySelector('.text');

Events

  • change is triggered when the state of the input field changes. For example, an unselected checkbox is selected or unselected.
  • submit responds to the form submission. Forms are sent by default in the same way as when you click on a link. The result is that you are directed to the specified address. If you don’t need to submit the form in some cases, then cancel the default action using preventDefault.

Continue