Function dom

src/dom/dom.js:22–1847

(p5, fn)

import { File } from './p5.File';

function dom(p5, fn){
  /**
   * Searches the page for the first element that matches the given
   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
   *
   * The selector string can be an ID, class, tag name, or a combination.
   * `select()` returns a <a href="#/p5.Element">p5.Element</a> object if it
   * finds a match and `null` if not.
   *
   * The second parameter, `container`, is optional. It specifies a container to
   * search within. `container` can be CSS selector string, a
   * <a href="#/p5.Element">p5.Element</a> object, or an
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
   *
   * @method select
   * @param  {String} selectors CSS selector string of element to search for.
   * @param  {String|p5.Element|HTMLElement} [container] CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
   *                                             <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
   * @return {p5.Element|null} <a href="#/p5.Element">p5.Element</a> containing the element.
   *
   * @example
   * function setup() {
   *   createCanvas(100, 100);
   *   background(200);
   *
   *   // Select the canvas by its tag.
   *   let cnv = select('canvas');
   *   cnv.style('border', '5px deeppink dashed');
   *
   *   describe('A gray square with a dashed pink border.');
   * }
   *
   * @example
   * function setup() {
   *   let cnv = createCanvas(100, 100);
   *
   *   // Add a class attribute to the canvas.
   *   cnv.class('pinkborder');
   *
   *   background(200);
   *
   *   // Select the canvas by its class.
   *   cnv = select('.pinkborder');
   *
   *   // Style its border.
   *   cnv.style('border', '5px deeppink dashed');
   *
   *   describe('A gray square with a dashed pink border.');
   * }
   *
   * @example
   * function setup() {
   *   let cnv = createCanvas(100, 100);
   *
   *   // Set the canvas' ID.
   *   cnv.id('mycanvas');
   *
   *   background(200);