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 access an element in a collection by index. The index identifies the element’s position. Counting starts at zero, so the first element has an index of 0 and the second has an index of 1. Write the index 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 (let element of collection) {
  // Code that must be executed several times
}

When you create a loop, specify a variable inside the parentheses. Usually, you declare a new variable that is used only inside the loop. At each iteration, JavaScript automatically stores the next element in the collection in 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 executes the instructions in curly braces whenever the user changes the value in the input field, including by adding or deleting characters.

// 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 number on the left is greater than the number on the right 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;