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/amp/
Reference: https://p5js.org/reference/#/p5/selectall