p5.js | función selectAll()

La función selectAll() se utiliza para buscar elementos con el id, la clase o el nombre de etiqueta dados y devolverlos como una array p5.Element. Tiene una sintaxis similar al selector CSS. Hay un parámetro opcional disponible que se puede usar para buscar dentro de un elemento determinado. Este método devuelve todos los elementos que existen en la página y coincide con el selector.

Sintaxis:

selectAll(name, [container])

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

nombre: Esta es una string que denota el id, la clase o el nombre de la etiqueta del elemento que debe buscarse.
contenedor: este es un parámetro opcional que denota un elemento para buscar dentro.

Devoluciones: Devuelve una array p5.Element que contiene todos los elementos coincidentes.

El siguiente ejemplo ilustra la función selectAll() en p5.js:

Ejemplo:

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);
  }
}

Producción: