Method getElements

src/utils.ts:112–141

* Convert a potential selector into an actual list of HTML elements. * Supports CSS selectors, element references, and special ID handling. * * @param els selector string, HTMLElement, or array of elements * @param root optional root element to search within (defaults to document, useful

(els: GridStackElement, root: HTMLElement | Document = document)

   * const fromShadow = Utils.getElements('.item', shadowRoot);
   */
  static getElements(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement[] {
    if (typeof els === 'string') {
      const doc = ('getElementById' in root) ? root as Document : undefined;

      // Note: very common for people use to id='1,2,3' which is only legal as HTML5 id, but not CSS selectors
      // so if we start with a number, assume it's an id and just return that one item...
      // see https://github.com/gridstack/gridstack.js/issues/2234#issuecomment-1523796562
      if (doc && !isNaN(+els[0])) { // start with digit
        const el = doc.getElementById(els);
        return el ? [el] : [];
      }

      let list = root.querySelectorAll(els);
      if (!list.length && els[0] !== '.' && els[0] !== '#') {
        // see if mean to be a class
        list = root.querySelectorAll('.' + els);

        // else if mean to be an id
        if (!list.length) list = root.querySelectorAll('#' + els);

        // else see if gs-id attribute
        if (!list.length) {
          const el = root.querySelector<HTMLElement>(`[gs-id="${els}"]`);
          return el ? [el] : [];
        }
      }
      return Array.from(list) as HTMLElement[];
    }
    return [els];
  }

  /**
   * Convert a potential selector into a single HTML element.