p5.js selectAll() Function

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