Summary of “Working with DOM”

Collections

There are several ways of finding several elements on the page at once. The returned elements are grouped in a structure that we call a collection. Collections work similarly to arrays, though they are something different from them. Collections of elements can be accessed by index, and you can iterate over them in the for loop, just like regular arrays.

The following are some of the ways of obtaining collections:

• element.querySelectorAll() returns all descendants of element that match the specified selector, as a static NodeList. The collection’s membership reflects the DOM at the time of the call and does not update when matching elements are added or removed. The nodes themselves can still change. To obtain an updated collection, call querySelectorAll again.
• parentElement.children is a property that returns the parent’s direct child elements as a dynamic collection. These collections react to changes in the DOM. If one of the elements in the collection is removed from the parent, 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 the DOM.

Cloning an Element

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

element.cloneNode(true);     
// Will return a cloned element with all its descendants.

element.cloneNode(false);   
// Will return a cloned element without child nodes.

element.cloneNode();        
// Copies only the element itself, without child nodes.

If you pass true as the argument, the element itself is cloned together with all of its descendant nodes. 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 nodes will be excluded.

Pass true or false explicitly to make the intended cloning depth clear.

How to Obtain Text from the Input Field

We need to read the input field’s value property. It stores information that has been entered in the field.

input.value;

The result can be assigned to 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 the value of 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 # at the start of the selector passed to querySelector indicates that you need to search by id.

The template element’s content property refers to a DocumentFragment, a container for its DOM nodes. These contents are inert and are not displayed as part of the page.

In order to obtain the desired elements in the template, we need to read its content property. We can then search the resulting DocumentFragment using querySelector or another search method.

<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 DocumentFragment.

var text = content.querySelector('.text');
// We found the paragraph element inside the fragment.

We can shorten this code. For example, we can assign the content directly to one variable and the element found inside it to 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 unchecked checkbox is checked, or a checked checkbox is unchecked.
• submit is triggered when the user submits the form. By default, the form data is sent to the address in the form’s action attribute, which may navigate away from the current page. If you don’t need to submit the form in some cases, then cancel the default action using preventDefault.