JavaScript provides a variety of built-in methods that can be used to manipulate arrays. Here are some commonly used JavaScript array methods:
push: Adds one or more elements to the end of an array and returns the new length of the array.pop: Removes the last element from an array and returns that element.shift: Removes the first element from an array and returns that element.unshift: Adds one or more elements to the beginning of an array and returns the new length of the array.concat: Combines two or more arrays and returns a new array.slice: Returns a new array containing a portion of the original array.splice: Changes the contents of an array by adding, removing, or replacing elements.join: Joins all elements of an array into a string.indexOf: Returns the first index at which a specified element is found in an array, or -1 if not found.lastIndexOf: Returns the last index at which a specified element is found in an array, or -1 if not found.includes: Determines whether an array contains a specified element and returns true or false.forEach: Executes a provided function once for each array element.map: Creates a new array with the results of calling a provided function on every element in the array.filter: Creates a new array with all elements that pass a test implemented by a provided function.reduce: Applies a function to reduce the array to a single value (from left to right).reduceRight: Applies a function to reduce the array to a single value (from right to left).sort: Sorts the elements of an array in place.reverse: Reverses the order of the elements in an array.some: Tests whether at least one element in the array passes the test implemented by a provided function.every: Tests whether all elements in the array pass the test implemented by a provided function.
These methods, along with other properties and functions available for arrays, provide powerful tools for working with and manipulating array data in JavaScript.
In JavaScript, you can use the querySelectorAll method to select multiple elements in the DOM based on a CSS selector. This method returns a NodeList, which is a collection of elements. You can then use the forEach method of arrays to iterate over the NodeList and perform actions on each element. Here’s an example:
// Select all elements with the class "example"
const elements = document.querySelectorAll('.example');
// Iterate over each element using forEach
elements.forEach((element) => {
// Do something with each element
console.log(element.textContent);
});
In the above code, querySelectorAll is used to select all elements in the DOM with the class “example”. The returned NodeList is stored in the elements variable. Then, the forEach method is called on the elements array-like object to iterate over each element. The provided arrow function is executed for each element, allowing you to perform custom actions on each element.
Inside the forEach loop, you can access each element using the element parameter. In the example, element.textContent is logged to the console, but you can perform any desired operations or manipulations on the selected elements.
Note that the forEach method is part of the Array prototype, so it can be used directly on array-like objects such as the NodeList returned by querySelectorAll.
The getElementsByTagName method is a built-in method in JavaScript that allows you to retrieve a collection of elements in the DOM based on their tag name. It is a method of the document object, which represents the entire HTML document.
Here’s how you can use the getElementsByTagName method:
// Select all <p> elements in the document
const paragraphs = document.getElementsByTagName('p');
// Iterate over each paragraph using a loop
for (let i = 0; i < paragraphs.length; i++) {
const paragraph = paragraphs[i];
// Do something with each <p> element
console.log(paragraph.textContent);
}
In the above example, getElementsByTagName('p') is called on the document object to select all <p> elements in the document. The method returns a live HTMLCollection, which is an array-like object containing all the matching elements.
You can then iterate over the collection using a loop, such as a for loop, as shown in the example. Each element in the collection can be accessed by its index, and you can perform actions or access properties of the individual elements.
In the loop, paragraph.textContent is logged to the console for each <p> element. This retrieves the text content of each paragraph element.
Note that the getElementsByTagName method is not limited to <p> elements; you can pass any valid HTML tag name as an argument to select elements of that type. For example, getElementsByTagName('div') would select all <div> elements in the document.
