p5.js | selectAll()函数

selectAll()函数用于搜索具有给定 id、类或标签名称的元素，并将其作为 p5.Element 数组返回。它的语法类似于 CSS 选择器。有一个可选参数可用于在给定元素内进行搜索。此方法返回页面上存在并匹配选择器的所有元素。

句法：

selectAll(name, [container])

参数：此函数接受上面提到的两个参数，如下所述：

• name：这是一个字符串，表示必须搜索的元素的 id、类或标签名称。
• 容器：这是一个可选参数，表示要在其中搜索的元素。

返回：它返回一个 p5.Element 数组，其中包含所有匹配的元素。

下面的示例说明了 p5.js 中的selectAll()函数：

例子：

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

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/selectall