Summary of “Element Collections and Properties”

querySelectorAll Method

The querySelectorAll method finds all the elements on the page that match the specified selector, and it returns a collection, meaning a set of these elements.

// Finds all paragraphs on the page
let elements = document.  querySelectorAll  ('p');

Collection

A collection can be saved in a variable. The easiest way to find out what elements are contained in a collection is to display it in the console:

// Displays the collection in the console
console.log(elements);

The collection looks like a list in the console in which the elements are presented as a comma-separated list. The entire list is wrapped in square brackets, and only the tag and class, for example, are specified for the elements. To display the elements in the same way as in the markup, you need to expand the collection by clicking on the triangle arrow on the left.

You can address the collection element by index. The index is the serial number of the element in the collection. The serial number increases starting from zero, so the first element has an index of 0 and the second has an index of 1. Indices are written in square brackets after the collection name:

console.log(elements[0]); // Displays the first element in the collection
console.log(elements[1]); // Displays the second element in the collection

Data Attributes

You can create your own attributes in HTML. The names of these attributes start with the data- prefix followed by any word that is selected by the developer.

<div data-cat-name="Muffin">

To get the value of a data attribute in JavaScript, use the dataset property followed by the attribute name without the data- prefix:

element.dataset.attributeNameWithoutPrefix

If the attribute name consists of several words that use hyphens, then in JavaScript it is written in camelCase: the hyphens are removed, and each word is capitalized except for the first one.

let element = document.querySelector('div');
console.log(element.dataset.catName); // Displays: Muffin

for of Loop

A loop is a statement that allows you to execute code several times. The for of loop will execute the code in the curly braces as many times as there are elements in the collection indicated in parentheses. Each such repetition is called an iteration.

for (of collection variable) {
  // Code that must be executed several times
}

When a loop is created in parentheses, you must also specify a variable. Usually in order to do this, a new variable is declared, and it is used only inside the loop. At each iteration, JavaScript will automatically write the next element in the collection to this variable.

let elements = document.querySelectorAll('p'); // Find all paragraphs

for (let element of elements) {  // Create a loop and variable
  console.log(element);          // Display the elements in the console
}

The for of loop is complete when the elements in the collection are finished. After that, JavaScript will proceed to execute the instructions that come after the loop.

The oninput Event Handler

The oninput event handler makes it possible to execute instructions in curly braces every time the value in the input field changes. Either adding or deleting characters is considered a change.

// Find an input field
let textarea = document.querySelector('textarea');

// Add an event handler
textarea.oninput = function () {
  // Display the data from the input field
  console.log(textarea.value);
};

length Property

You can determine the string length using the length property. The value of this property is equal to the number of characters in the string. Characters are more than just letters and numbers. They also include white spaces and line breaks.

let text = 'I love JavaScript';
console.log(text.length); // Displays: 17

let textarea = document.querySelector('textarea');
console.log(textarea.value); // Displays: Muffin
console.log(textarea.value.length); // Displays: 6

The Comparison Operator >

The comparison operator > (“greater than”) compares two numbers and returns the Boolean value true if the the left one is greater than the right one and false in all other cases:

console.log(3 > 2); // Returns: true
console.log(1 > 2); // Returns: false
console.log(2 > 2); // Returns: false

The disabled Property

You can lock and unlock the button in JavaScript by assigning Boolean values to the disabled property for this button. If the true value is assigned, then the button is locked, whereas if it is assigned false, then the button is unlocked.

let button = document.querySelector('button');

// Locks the button
button.disabled = true;

// Unlocks the button
button.disabled = false;