querySelectorAll()
The querySelectorAll() function is a method of the Document object in JavaScript that allows you to select a group of elements in a document based on a given CSS selector. It returns a NodeList object, which is a collection of nodes (elements) that can be accessed like an array.
The forEach() method is an array method that allows you to iterate over the elements in an array and perform a specific action on each element. It takes a callback function as an argument, which will be called for each element in the array with that element as its argument.
To use the forEach() method with the querySelectorAll() function, you can do the following:
Here’s an example of how to use this combination to select all the p elements in a document and change their text color to red:
You can also use the forEach() method with a NodeList object obtained through other means, such as by calling the childNodes property of a parent element:
const parentElement = document.querySelector(‘#parent’); const childNodes = parentElement.childNodes; childNodes.forEach(function(node) < console.log(node.nodeType); >);
In this example, the forEach() method is used to iterate over the child nodes of the element with the ID «parent», and the nodeType property of each node is logged to the console.
Note that the forEach() method is not supported in older browsers, so you may need to use a polyfill or a different technique to achieve the same behavior in those cases.
querySelectorAll()
The querySelectorAll() function is used to select all elements in the document that match a specified CSS selector. It returns a NodeList, which is similar to an array but with some differences in the methods it supports. In order to use array methods like .map() or .forEach() on the results, you will need to convert the NodeList to an actual array.
Here is an example of how to convert the results of querySelectorAll() to an array:
// Select all elements with the class «example» let elements = document.querySelectorAll(‘.example’); // Convert the NodeList to an array let elementsArray = Array.from(elements); // Use array methods on the elements elementsArray.forEach(function(element) < console.log(element); >);
Another way to convert the NodeList to an array is using the spread operator .
// Select all elements with the class «example» let elements = document.querySelectorAll(‘.example’); // Convert the NodeList to an array let elementsArray = [. elements]; // Use array methods on the elements elementsArray.forEach(function(element) < console.log(element); >);
Another way to convert the NodeList to an array is using the Array.prototype.slice.call(elements)
// Select all elements with the class «example» let elements = document.querySelectorAll(‘.example’); // Convert the NodeList to an array let elementsArray = Array.prototype.slice.call(elements); // Use array methods on the elements elementsArray.forEach(function(element) < console.log(element); >);
In all the above examples, elementsArray is now an array that you can use array methods on.
Как преобразовать nodelist в массив js
Для преобразования в массив NodeList можно итерировать в цикле:
const nodeList = document.querySelectorAll('div'); const result = []; for (const node of nodeList) result.push(node); > console.log(result); // => [div#root, div.page-wrapper.document-page, . ] Также у NodeList есть метод forEach :
const nodeList = document.querySelectorAll('div'); const result = []; nodeList.forEach((node) => result.push(node); >); console.log(result); // => [div#root, div.page-wrapper.document-page, . ] И самый простой способ преобразовать в массив, это использовать Array.from() :
const nodeList = document.querySelectorAll('div'); const result = Array.from(nodeList); console.log(result); // => [div#root, div.page-wrapper.document-page, . ] nodeList — это массивоподобная коллекция узлов, которая возвращается методом document.querySelectorAll() .
Сходство с обычным массивом заключается в том, что по nodeList можно проитерироваться методом forEach() , а различия в том, что для nodeList недоступны такие методы массивов, как map() , filter() и reduce() .
Для обхода этого ограничения мы можем преобразовать nodeList в массив, используя spread оператор или метод Array.from() .
const divList = document.querySelectorAll('div'); const arr = [. divList]; const arr = Array.from(divList);