Create new or select existing DOM element.

x0.element.js

/**
 * Find or make the DOM things
 */

let createRE = /^<\s*|\s*\/*>$/g;

createRE = /^<\s*|\s*\/?>$/g;

function parseTag(tag) {
    
}

export class X0 {
  constructor(...args) {
    this.args = args;
  }

  query(selector, context = document) {
    return context.querySelector(selector);
  }

  queryAll(selector, context = document) {
    return [...context.querySelectorAll(selector)];
  }

  queryId(id, context = document) {
    return context.getElementById(id);
  }

  queryClass(className, context = document) {
    return [...context.getElementsByName(className)];
  }

  queryTag(tagName, context = document) {
    return [...context.getElementsByTagName(tagName)];
  }
  
  create(opts) {
    Object.assign(this, {...opts});
    
    // this.tag
    // this.attr
    // this.prop
    // this.children
    
    const {
      tag = '',
      attr = {},
      prop = {},
      children = []
    } = opts;

    
    if (/^</.test(tag)) {
      this.element = document.createElement(tag.replace(createRE, ''));
    } else {
      // Not creating? RETURN!
      return this;
    }
    
    return this;
  }

  attr(attrs) {
    for (const [name, val] of Object.entries(attrs)) {
      try {
        this.element.setAttribute(name, String(val));
      } catch (e) {
        console.warn(e);
      }
    }
    return this;
  }
  
  prop(props) {
    for (const [name, val] of Object.entries(props)) {
      try {
        this.element[name] = val;
      } catch (e) {
        console.warn(e);
      }
    }
    return this; 
  }
  
  appendItems(items = []) {
    
  }
}

export function x0(tag, opts, children) {
  // Start 'selector' with `<` to *create* an element
}