How to use @pluginjs/dom - 10 common examples

const baselineUl = parseHTML('<ul></ul>')
    let [start, end] = this.options.weekly.timeBetween.split('-')
    this.tableBegin = start
    start = parseInt(start.split(':')[0]) + 1 /* eslint-disable-line */
    end = parseInt(end.split(':')[0]) /* eslint-disable-line */
    this.timeDruation = end - start + 2
    for (let i = start; i &lt;= end; i++) {
      const time = String(i).length === 1 ? `0${i}:00` : `${i}:00`
      const li = `<li>
                      <span>${time}</span>
                    </li>`
      append(li, baselineUl)
    }

    append(baselineUl, this.$baseline)
    append(this.$baseline, this.element)
  }

buildBaseline() {
    this.$baseline = parseHTML(`<div class="${this.classes.BASELINE}"></div>`)

    const baselineUl = parseHTML('<ul></ul>')
    let [start, end] = this.options.weekly.timeBetween.split('-')
    this.tableBegin = start
    start = parseInt(start.split(':')[0]) + 1 /* eslint-disable-line */
    end = parseInt(end.split(':')[0]) /* eslint-disable-line */
    this.timeDruation = end - start + 2
    for (let i = start; i &lt;= end; i++) {
      const time = String(i).length === 1 ? `0${i}:00` : `${i}:00`
      const li = `<li>
                      <span>${time}</span>
                    </li>`
      append(li, baselineUl)
    }

    append(baselineUl, this.$baseline)
    append(this.$baseline, this.element)
  }

init() {
    this.thumbs = this.instance.getElement('thumbnails')
    this.inner = this.thumbs.children[0]
    this.elements = {}

    const length = this.instance.length
    for (let i = 1; i <= length; i++) {
      const item = this.instance.items[i]
      const itemHtml = this.instance.getElement('thumb')
      const image = itemHtml.children[0]
      // image.dataset.index = i
      setData('index', i, image)
      setStyle('background-image', `url(${item.thumbHref})`, image)
      append(itemHtml, this.inner)
      this.elements[i] = itemHtml
    }
    this.index = this.instance.activeIndex

    this.bind()
    this.goTo(this.instance.activeIndex)
  }

init() {
    addClass(this.instance.classes.CHUNK, this.element)

    const $children = children(this.element)

    append(
      `<div class="${this.instance.classes.CHUNKINNER}"></div>`,
      this.element
    )
    this.chunkInner = find(`.${this.instance.classes.CHUNKINNER}`, this.element)

    $children.forEach(child =&gt; {
      append(child, this.chunkInner)
    })

    this.index = this.options.index

    // aspectRatio =&gt; [width, height]
    const aspectRatio = this.compileAspectRatio(this.options.aspectRatio)

    // element Attribute First
    // this.width = aspectRatio[0] || this.element.offsetWidth || 1
    // this.height = aspectRatio[1] || this.element.offsetHeight || 1

    this.width =
      aspectRatio[0] || parseFloat(getStyle('width', this.element), 10) || 1

return result
    }
    if (currentTarget !== window && !currentTarget.contains(node)) {
      return result
    }
    const matchEventList = eventStorage.listeners[eventName].filter(
      ({ identity }) => {
        const { type, value } = identity
        const identityMapper = attrVerify[type]
        if (identityMapper && identityMapper(node, value)) {
          return true
        }
        return false
      }
    )
    return nodeTreeCheck(parent(node), result.concat(matchEventList))
  }
  // nodeTreeCheck(target).map(e => console.log(e.handler.toString()))

initPanel() {
    this.$panel = this.createEl('panel', {
      classes: this.classes
    })
    append(this.$panel, this.$wrap)

    this.$handle = query(`.${this.classes.HANDLE}`, this.$panel)
    // this.registerComponent()
    this.initHandle()
    if (!this.options.inline || this.options.showControl) {
      this.initControl()
    } else {
      query(`.${this.classes.CONTROL}`, this.$panel).remove()
    }
  }

createHtml() {
    const that = this
    this.$wrap = parseHTML(
      template.compile(this.options.template())({
        classes: this.classes,
        placeholder: this.translate('placeholder')
      })
    )

    insertAfter(this.$wrap, this.element)

    this.$empty = query(`.${this.classes.EMPTY}`, this.$wrap)
    this.$image = query(`.${this.classes.FILLIMAGE}`, this.$wrap)
    this.$remove = query(`.${this.classes.REMOVE}`, this.$wrap)
    this.$reselect = query(`.${this.classes.RESELECT}`, this.$wrap)

    // init popDialog
    this.pop = PopDialog.of(this.$remove, {
      placement: 'bottom',
      content: this.translate('deleteTitle'),
      buttons: [
        {
          action: 'cancel',
          label: this.translate('cancel')
        },
        {
          action: 'delete',
          label: this.translate('delete'),

initialize() {
    this.initContent()
    this.$wrap = wrap(`<div class="${this.classes.WRAP}"></div>`, this.element)
    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrap)
    }

    this.$inner = parseHTML(`<div class="${this.classes.INNER}"></div>`)
    this.$on = parseHTML(`<div class="${this.classes.ON}">${this.onText}</div>`)
    this.$off = parseHTML(
      `<div class="${this.classes.OFF}">${this.offText}</div>`
    )
    this.$handle = parseHTML(`<div class="${this.classes.HANDLE}"></div>`)

    this.$inner.append(this.$on, this.$handle, this.$off)

    this.$wrap.append(this.$inner)

    this.initIcon()

    if (this.options.size !== null) {
      addClass(
        this.getClass(this.classes.SIZE, 'size', this.options.size),
        this.$wrap
      )
    }
    // get components width
    this.distance = this.$wrap.clientWidth - getWidth(this.$handle)

const perOfGrid = 100 / (num - 1)
    const perOfValue = 100 / (len - 1)

    this.scale = parseHTML('<div></div>')
    addClass(instance.classes.SCALE, this.scale)
    this.lines = parseHTML('<ul></ul>')
    addClass(instance.classes.LINES, this.lines)
    this.values = parseHTML('<ul></ul>')
    addClass(instance.classes.VALUES, this.values)

    for (let i = 0; i &lt; num; i++) {
      let list
      if (i === 0 || i === num || i % ((num - 1) / (len - 1)) === 0) {
        list = parseHTML(`<li class="${instance.classes.GRID}"></li>`)
      } else if (i % scale.grid === 0) {
        list = parseHTML(`<li class="${instance.classes.INLINEGRID}"></li>`)
      } else {
        list = parseHTML('<li></li>')
      }

      // position scale
      setStyle('left', `${perOfGrid * i}%`, list)
      append(list, this.lines)
    }

    for (let v = 0; v &lt; len; v++) {
      // position value
      const li = parseHTML(`<li><span>${scale.values[v]}</span></li>`)
      setStyle('left', `${perOfValue * v}%`, li)
      append(li, this.values)
    }

// init scrollable
    const $scorllWrap = parseHTML(
      `<div class="${
        this.classes.COLLECTIONSCROLLWRAP
      }"><div><div></div></div></div>`
    )
    prepend($scorllWrap, this.element)
    const scrollWrapChildren = children($scorllWrap)
      .filter(el =&gt; el.tagName === 'DIV')
      .map(el =&gt;
        children(el)
          .filter(el =&gt; el.tagName === 'DIV')
          .reduce((a, b) =&gt; a.concat(b))
      )
    scrollWrapChildren.map(append(this.$selectorList))

    return null
  }