The selectAll() function is used to search for elements with the given id, class or tag name and return it as a p5.Element array. It has a syntax similar to the CSS selector. An optional parameter is available that can be used to search within a given element. This method returns all the elements that exist on the page and matches the selector.
Syntax:
selectAll(name, [container])
Parameters: This function accept two parameters as mentioned above and described below:
- name: This is a string which denotes the id, class or tag name of the element that has to be searched.
- container: This is an optional parameter which denotes an element to search within.
Returns: It returns a p5.Element array that contains all the matched elements.
Below example illustrates the selectAll() function in p5.js:
Example:
function setup() { createCanvas(600, 50); textSize(20); text("Click to select the paragraphs"+ " and change their position.", 0, 20); para1 = createP("This is paragraph 1"); para2 = createP("This is paragraph 2"); para3 = createP("This is paragraph 3"); } function mouseClicked() { // Select all the // paragraph elements selectedParas = selectAll("p"); // Loop through each of them for (i = 0; i < selectedParas.length; i++) { // Change the position of // of the elements selectedParas[i].position(100, 100 + i * 25); } } |
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/selectall
