0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<h2>querySelectorAll Method</h2>
1
<h2>querySelectorAll Method</h2>
2
<p>The querySelectorAll method finds all the elements on the page that match the specified selector, and it returns a <b>collection</b>, meaning a set of these elements.</p>
2
<p>The querySelectorAll method finds all the elements on the page that match the specified selector, and it returns a <b>collection</b>, meaning a set of these elements.</p>
3
// Finds all paragraphs on the page let elements = document. querySelectorAll ('p');<h2>Collection</h2>
3
// Finds all paragraphs on the page let elements = document. querySelectorAll ('p');<h2>Collection</h2>
4
<p>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:</p>
4
<p>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:</p>
5
// Displays the collection in the console console.log(elements);<p>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.</p>
5
// Displays the collection in the console console.log(elements);<p>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.</p>
6
<p>[p.card__text, p, p, p] </p>
6
<p>[p.card__text, p, p, p] </p>
7
<p>[p.card__text, p, p] </p>
7
<p>[p.card__text, p, p] </p>
8
<p><p class="card__text">Let’s make ice cream!</p> </p>
8
<p><p class="card__text">Let’s make ice cream!</p> </p>
9
<p><p>St. Petersburg</p> </p>
9
<p><p>St. Petersburg</p> </p>
10
<p><p>mail@htmlacademy.ru</p> </p>
10
<p><p>mail@htmlacademy.ru</p> </p>
11
<p>You can address the collection element by index. The<b>index</b> 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:</p>
11
<p>You can address the collection element by index. The<b>index</b> 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:</p>
12
console.log(elements[0]); // Displays the first element in the collection console.log(elements[1]); // Displays the second element in the collection<h2>Data Attributes</h2>
12
console.log(elements[0]); // Displays the first element in the collection console.log(elements[1]); // Displays the second element in the collection<h2>Data Attributes</h2>
13
<p>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.</p>
13
<p>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.</p>
14
<div data-cat-name="Muffin"><p>To get the value of a data attribute in JavaScript, use the dataset property followed by the attribute name without the data- prefix:</p>
14
<div data-cat-name="Muffin"><p>To get the value of a data attribute in JavaScript, use the dataset property followed by the attribute name without the data- prefix:</p>
15
element.dataset.attributeNameWithoutPrefix<p>If the attribute name consists of several words that use hyphens, then in JavaScript it is written in <i>camelCase</i>: the hyphens are removed, and each word is capitalized except for the first one.</p>
15
element.dataset.attributeNameWithoutPrefix<p>If the attribute name consists of several words that use hyphens, then in JavaScript it is written in <i>camelCase</i>: the hyphens are removed, and each word is capitalized except for the first one.</p>
16
let element = document.querySelector('div'); console.log(element.dataset.catName); // Displays: Muffin<h2>for of Loop</h2>
16
let element = document.querySelector('div'); console.log(element.dataset.catName); // Displays: Muffin<h2>for of Loop</h2>
17
<p>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 <i>iteration</i>.</p>
17
<p>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 <i>iteration</i>.</p>
18
for (of collection variable) { // Code that must be executed several times }<p>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.</p>
18
for (of collection variable) { // Code that must be executed several times }<p>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.</p>
19
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 }<p>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.</p>
19
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 }<p>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.</p>
20
<h2>The oninput Event Handler</h2>
20
<h2>The oninput Event Handler</h2>
21
<p>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.</p>
21
<p>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.</p>
22
// 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); };<h2>length Property</h2>
22
// 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); };<h2>length Property</h2>
23
<p>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.</p>
23
<p>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.</p>
24
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<h2>The Comparison Operator ></h2>
24
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<h2>The Comparison Operator ></h2>
25
<p>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:</p>
25
<p>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:</p>
26
console.log(3 > 2); // Returns: true console.log(1 > 2); // Returns: false console.log(2 > 2); // Returns: false<h2>The disabled Property</h2>
26
console.log(3 > 2); // Returns: true console.log(1 > 2); // Returns: false console.log(2 > 2); // Returns: false<h2>The disabled Property</h2>
27
<p>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.</p>
27
<p>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.</p>
28
let button = document.querySelector('button'); // Locks the button button.disabled = true; // Unlocks the button button.disabled = false;<a>Continue</a>
28
let button = document.querySelector('button'); // Locks the button button.disabled = true; // Unlocks the button button.disabled = false;<a>Continue</a>