als-document 0.6.1 → 0.7.0

package/document.mjs

@@ -0,0 +1,804 @@
+export class HtmlSelector {
+   constructor(html) {
+      if(typeof html == 'string') {
+         this.html = new HtmlParser(html)
+         this.elements.forEach((element,i) => {this.makeSelectable(element)});
+      } else console.log('Parameter is not string')
+   }
+   get elements() {return this.html.elements}
+
+   makeSelectable(element) {
+      if(element.type == 'tag' && element.status !== 'close') {
+         element.$$ = (query) => this.$$(query,element.index,element.endIndex)
+         element.$ = (query) => this.$(query,element.index,element.endIndex)
+      }
+   }
+
+   $(query,start=0,end=this.elements.length) {
+      return this.$$(query,start,end,true)
+   }
+
+   $$(query,start=0,end=this.elements.length,single=false) {
+      let result = []
+      this.selectors = new Query(query).selectors
+      this.query = query
+      this.selectors.forEach(selector => {
+         for(let i=start; i<end; i++) {
+            let el = this.elements[i]
+            if(this.checkElement(el,selector) && !result.includes(el)) result.push(el)
+            if(single && result.length == 1) break
+         }
+      });
+      if(single && result.length == 1) return result[0]
+      else if(single && result.length == 0) return null
+      else return result
+   }
+
+   checkElement(el,selector) {
+      if(selector == undefined) return true
+      if(el == null) return false
+      let {tag,classList,attribs,id,prev,ancestors,parents,prevAny} = selector
+      
+      if(el.status == 'close' || el.type == 'text') return false
+      if(id !== undefined && el.id == undefined) return false
+      if(id && id !== el.id) return false
+      if(tag && el.tag == undefined) return false
+      else if(tag && tag !== el.tag) return false
+      if(classList !== undefined && el.classList == undefined) return false
+      else if(classList !== undefined && Array.isArray(el.classList)) {
+         if(classList.every(e => el.classList.includes(e)) == false) return false
+      }
+      if(this.checkAttribs(attribs,el) == false) return false
+      if(this.checkElement(el.prev,prev) == false) return false
+      if(this.checkAncestors(el.ancestors,ancestors) == false) return false
+      if(this.checkParents(el.ancestors,parents) == false) return false
+      if(el.parent) {
+         if(this.prevAny(el.parent.children,el.childIndex,prevAny) == false) return false
+      }
+      return true
+   }
+
+   prevAny(children=[],index,prevAny) {
+      let size = children.length
+      if((size == 0 || index == 0) && prevAny) return false
+      for(let i=index; i>=0; i--) {
+         if(this.checkElement(children[i],prevAny)) return true
+      }
+      return false
+   }
+
+   checkAncestors(ancestors=[],selectorAncestors=[]) {
+      let count = 0
+      if(selectorAncestors.length == 0) return true
+      let endIndex = ancestors.length-1
+      let selectorIndex = selectorAncestors.length-1
+      while(selectorIndex>=0) {
+         for(let i=endIndex; i>=0; i--) {
+            endIndex=i-1
+            if(this.checkElement(ancestors[i],selectorAncestors[selectorIndex]) == true) {
+               count++
+               break
+            }
+         }
+         selectorIndex--
+      }
+      if(count == selectorAncestors.length) return true
+      else return false
+   }
+
+   checkParents(ancestors=[],selectorParents=[]) {
+      if(selectorParents.length == 0) return true
+      if(ancestors.length < selectorParents.length) return false
+      let index = ancestors.length-1
+      for(let i=selectorParents.length-1; i>=0; i--) {
+         if(this.checkElement(ancestors[index],selectorParents[i]) == false) return false
+         index--
+      }
+      return true
+   }
+
+   checkAttribs(attribs=[],el) {
+      let elAttribs = el.attribs
+      let names = Object.keys(elAttribs)
+      let passedTests = 0
+      if(attribs) for(let i=0; i<attribs.length; i++) {
+         let {name,value,check} = attribs[i]
+         if(name == 'inner' && value !== undefined && check && el.inner) {
+            if(check(el.inner)) passedTests++
+         }
+         
+         if(!names.includes(name)) continue
+         else if(value == undefined) passedTests++
+         else if(value && elAttribs[name]) {
+            if(check(elAttribs[name]) == false) continue
+            else passedTests++
+         } 
+      }
+      if(passedTests == attribs.length) return true
+      else return false
+   }
+}
+export class Query {
+   static get(query) {
+      let q = new Query(query)
+      return q.selectors
+   }
+
+   constructor(query) {
+      this.query = query
+      this.selectors = []
+      this.getQueries(query.split(','))
+  }
+
+  getQueries(selectors) {
+      selectors.forEach(selector => {
+         let originalSelector = selector
+         selector = this.removeSpaces(selector)
+         this.stringValues = []
+         selector = selector.replace(/\[.*?\]/g,(value) => {
+            this.stringValues.push(value)
+            return `[${this.stringValues.length-1}]`
+         })
+         let [element,ancestors] = this.splitAndCutLast(selector,' ') // \s - ancestor
+         element = this.getFamily(element)
+         if(ancestors.length > 0) 
+            element.ancestors = ancestors.map(ancestor => this.getFamily(ancestor))
+         element.group = originalSelector
+         this.selectors.push(element)
+      });
+   }
+
+   splitAndCutLast(string,splitBy) {
+      let array = string.split(splitBy)
+      let last
+      if(array.length == 1) {
+         last = array[0]
+         array = []
+      } else last = array.splice(array.length-1,array.length-1)[0]
+      return [last,array]
+   }
+
+   getFamily(group,element,prev,prevAny,sign) {
+      if(group.match(/\~|\+/) !== null) {
+         let [last,prevBrothers] = this.splitAndCutLast(group,/\~|\+/)
+         let signs = group.replace(last,'')
+         prevBrothers.forEach(el => signs = signs.replace(el,''))
+         signs = signs.match(/\~|\+/g)
+         if(signs.length == 1) {
+            sign = signs[0]
+         } else if(signs.length > 1){
+            sign = signs.splice(signs.length-1,signs.length-1)[0]
+            prevBrothers[0] = prevBrothers.map((b,i) => {
+               if(i<prevBrothers.length-1) b += signs[i]
+               return b
+            }).join('')
+            prevBrothers[0] = this.getFamily(prevBrothers[0])
+         }
+         if(sign == '~') prevAny = prevBrothers[0] // ~ - any prev brother
+         else if(sign == '+') prev = prevBrothers[0] // + - prev brother
+         element = last
+      } else element = group
+      let family
+      if(prev || prevAny) {
+         family = this.getParents(element)
+         if(prev) family.prev = this.getParents(prev)
+         if(prevAny) family.prevAny = this.getParents(prevAny)
+      } else family = this.getParents(element)
+      if(family.query !== group) family.group = group
+      return family
+   }
+
+   getParents(selector) {
+      if(typeof selector == 'string') {
+         let [element,parents] = this.splitAndCutLast(selector,'>')
+         element = this.buildElement(element)
+         parents = parents.map(parent => this.buildElement(parent))
+         if(parents.length > 0) element.parents = parents
+         return element
+      } else return selector
+   }
+
+
+   buildElement(element,id=null,tag=null,classList=[]) {
+      let query = element
+      element = element.replace(/\#(\w-?)*/,$id => {
+         id = $id.replace(/^\#/,''); return ''
+      })
+      element = element.replace(/\.(\w-?)*/,$class => {
+         classList.push($class.replace(/^\./,'')); return ''
+      })
+      element = element.replace(/(\w-?)*/,$tag => {
+         tag = $tag == '' ? null : $tag; return ''
+      })
+      let attribs = this.getAttributes(element)
+      element = {query}
+      if(id) element.id = id
+      if(tag) element.tag = tag
+      if(classList.length > 0) element.classList = classList
+      if(attribs.length > 0) element.attribs = attribs
+      return element
+   }
+
+   getAttributes(element) {
+      let attribs = this.stringValues.filter((value,index) => {
+         let searchValue = `[${index}]`
+         if(element.match(searchValue)) return true
+         else return false
+      })
+      attribs = attribs.map(attrib => {
+         let query = attrib
+         attrib = attrib.replace('[','').replace(']','')
+         let [name,value] = attrib.split(/[\~\|\^\$\*]?\=/)
+         let sign = attrib.replace(name,'').replace(value,'')
+         attrib = {query}
+         if(name) attrib.name = name
+         if(value) attrib.value = value.trim().replace(/^\"/,'').replace(/\"$/,'')
+         if(sign) {
+            attrib.sign = sign
+            attrib.check = this.getAttribFn(sign).bind(attrib)
+         }
+         return attrib
+      });
+      return attribs
+   }
+
+   getAttribFn(sign) {
+      if(sign == '=') return function(value) {return value == this.value ? true : false}
+      if(sign == '*=') return function(value) {return value.includes(this.value) ? true : false}
+      if(sign == '^=') return function(value) {return value.startsWith(this.value) ? true : false}
+      if(sign == '$=') return function(value) {return value.endsWith(this.value) ? true : false}
+      if(sign == '|=') return function(value) {
+         return value.trim().split(' ').length == 1 
+         && (value.startsWith(this.value) || value.startsWith(this.value+'-')) 
+         ? true : false
+      }
+      if(sign == '~=') return function(value) { // includes whole word only
+         return this.value.trim().split(' ').length == 1 && value.includes(this.value) ? true : false
+      }
+   }
+
+   removeSpaces(selector) {
+      selector = selector.replace(/\s{2}/g,' ') // remove double spaces
+      selector = selector.replace(/\s?\^?\$?\|?\~?\*?\=\s*/g,(m) => m.trim()) // remove spaces inside []
+      selector = selector.replace(/\s?(\+|\~|\>)\s?/g,(m) => m.trim()) // remove spaces around +|~|>
+      return selector
+   }
+}
+export class HtmlParser {
+   static parse(html) {
+      let result = new HtmlParser(html)
+      return result.root
+   }
+   constructor(html='') {
+      if(this.checkHtml(html)) {
+         this.indexes = []
+         this.events = []
+         this.html = this.htmlString = html
+         this.htmlString = this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'') // remove all comments
+         this.removeScripts()
+         this.removeStyles()
+         this.removeEventStrings()
+         this.root = this.parse()
+         this.clean()
+      }
+   }
+
+   clean() {
+      let toDelete = ['events','indexes','scripts','styles','htmlString','html']
+      toDelete.forEach(name => {
+         delete this[name]
+      });
+   }
+
+   checkHtml(html,isGood=false) {
+      if(html == '') console.log('html parameter is empty')
+      else if(typeof html !== 'string') console.log(`html parameter has to be string. Recieved ${typeof html}`)
+      else isGood = true
+      return isGood
+   }
+
+   removeScripts(scripts=[]) {
+      let $scripts = this.htmlString.match(/\<script(.*?)\>[\S\s]*?\<\/script\>/gm)
+      if($scripts !== null) $scripts.forEach((script,i) => {
+         let inner = script.replace(/^\<script(.*?)\>/,'').replace(/\<\/script\>$/,'')
+         scripts.push(inner)
+         this.htmlString = this.htmlString.replace(inner,`{{{{script ${scripts.length-1}`)
+      });
+      this.scripts = scripts
+   }
+   removeStyles(styles=[]) {
+      let $styles = this.htmlString.match(/\<style\>[\S\s]*?\<\/style\>/gm)
+      if($styles !== null) $styles.forEach((style,i) => {
+         let inner = style.replace(/^\<style\>/,'').replace(/\<\/style\>$/,'')
+         styles.push(inner)
+         this.htmlString = this.htmlString.replace(inner,`{{{{style ${styles.length-1}`)
+      });
+      this.styles = styles
+   }
+
+   removeEventStrings() {
+      let eventsWithHtml = this.htmlString.match(/\son\w*\s*?\=\s*?\"(.*?)\"/g)
+      if(eventsWithHtml !== null) {
+         eventsWithHtml.forEach(event => {
+            let array = event.split('=')
+            let value = array.filter((v,i) => i>0 && i!=='').join('=')
+            value = value.replace(/^\"/,'').replace(/\"$/,'')
+            this.events.push(value)
+            let newEvent = event.replace(value,`{{{{event ${this.events.length-1}`)
+            this.htmlString = this.htmlString.replace(event,newEvent)
+         })
+      }
+   }
+
+   parse(htmlString=this.htmlString) {
+   // Parse tags
+      let elements = htmlString.match(/<("[^"]*"|'[^']*'|[^'">])*>/g)
+      elements.forEach((tag,index) => {
+         elements[index] = this.parseElement(tag)
+         htmlString = htmlString.replace(tag,`<tag${index}>`)
+      });
+   // Parse inner text
+      let inners = htmlString.match(/tag[\s\S]*?\</g)
+      for (let i = inners.length-1; i >=0 ; i--) {
+         let inner = inners[i];
+         let tagIndex = inner.match(/(\d*)\>/)[1]
+         inner = inner.replace(/tag.*\>/,'').slice(0, -1).trim()
+         if(inner.length > 0) {
+            elements.splice(parseInt(tagIndex)+1, 0, inner);
+         }
+      }
+      this.elements = elements
+      let root = this.getPairs()
+      root.level = 0
+      root.elements = this.elements
+      this.innerHTML(root)
+      return root
+   }
+  
+   lookForPair(element,startIndex,parent,level) {
+      element.parent = parent
+      element.children = []
+      let {tag} = element
+      let count = 0
+      let endIndex
+      for (let index = startIndex+1; index < this.elements.length; index++) {
+         const el = this.elements[index];
+         if(el.tag == tag) {
+            if(el.status == 'close') {
+               if(count == 0) {
+                  endIndex = index
+                  el.level = level
+                  break
+               } else count--
+            } else if(el.status == 'open') count++
+         }
+      }
+      if(!endIndex) endIndex = startIndex+1
+      element.endIndex = endIndex
+      let child = this.getPairs(element,startIndex+1,endIndex,level+1)
+      return child
+   }
+
+   getPairs(parent={type:'root',children:[]},startIndex = 0,endIndex=this.elements.length,level=0,childIndex=0) {
+      for(let index = startIndex; index < endIndex; index++) {
+         if(this.indexes.includes(index)) continue
+         let element = this.elements[index];
+         let child
+         if(typeof element == 'string') child = element
+         else if(element.type == 'tag') {
+            if(element.status == 'single') {
+               child = element
+               child.parent = parent
+            } else if(element.status == 'open') {
+               child = this.lookForPair(element,index,parent,level)
+            } else element.index = index
+         } 
+         this.addChild(parent,child,index,level)
+         childIndex++
+      }
+      return parent
+   }
+
+   addScriptsAndStyles(parent,child,index) {
+      if(parent.tag == 'script') {
+         let scriptIndex = child.match(/(?<=\{\{\{\{script\s)(\d*)?/)
+         if(scriptIndex !== null) {
+            let i = parseInt(scriptIndex[0])
+            if(typeof i == 'number') child = this.scripts[i]
+         }
+      }
+      if(parent.tag == 'style') {
+         let stylesIndex = child.match(/(?<=\{\{\{\{style\s)(\d*)?/)
+         if(stylesIndex !== null) {
+            let i = parseInt(stylesIndex[0])
+            if(typeof i == 'number') child = this.styles[i]
+         }
+      }
+      this.elements[index] = child
+      return child
+   }
+
+   addChild(parent,child,index,level) {
+      if(typeof child == 'string') {
+         child = this.addScriptsAndStyles(parent,child,index)
+         child = {type:'text',text:child,parent}
+         this.elements[index] = child
+      } 
+      if(child) {
+         delete child.status
+         if(child.type !== 'text') {
+            this.innerHTML(child)
+            this.outerHTML(child)
+            this.innerText(child)
+         }
+         this.getElements(child)
+         this.getAncestors(child)
+         this.getAttribute(child)
+         this.nextAndPrev(child)
+         child.index = index
+         child.level = level
+         parent.children.push(child)
+      }
+      this.indexes.push(index)
+   }
+
+   getAttribute(element) {
+      element.getAttribute = function(name) {
+         let array = Object.keys(this.attribs).filter(key => key == name)
+         return array.length > 0 ? this.attribs[array[0]] : null
+      }
+   }
+
+   getAncestors(element) {
+      Object.defineProperty(element, 'ancestors', { get() {
+         let ancestors = []
+         let parent = this.parent
+         if(parent) while(parent.parent) {
+            ancestors.unshift(parent)
+            parent = parent.parent
+         }
+         return ancestors
+      }});
+   }
+
+   nextAndPrev(element) {
+      Object.defineProperty(element, 'childIndex', { 
+         get() {return this.parent.children.map(o => o.index).indexOf(this.index)}
+      });
+      Object.defineProperty(element, 'prev', { 
+         get() {
+            let i = this.childIndex, brothers = this.parent.children
+            return i == 0 ? null : brothers[i-1]
+         }
+      });
+      Object.defineProperty(element, 'next', { 
+         get() {
+            let i = this.childIndex, brothers = this.parent.children
+            return i == brothers.length-1 ? null : brothers[i+1]
+         }
+      });
+   }
+
+   getElements(element,self=this) {
+      if(element.type !== 'text')
+      Object.defineProperty(element, 'elements', { 
+         configurable:true,
+         get() {
+            let endIndex = isNaN(this.endIndex) ? this.index + 1 : this.endIndex+1
+            return self.elements.slice(this.index,endIndex)
+         }
+      });
+      Object.defineProperty(element, '$elements', { 
+         configurable:true,
+         get() {return self.elements}
+      });
+      Object.defineProperty(element, 'root', {
+         configurable:true,
+         get() {return self.root}
+      });
+      Object.defineProperty(element, 'html', {
+         configurable:true,
+         get() {return self}
+      });
+   }
+
+   outerHTML(element) {
+      Object.defineProperty(element, 'outerHTML', { get() {
+         let {elements} = this
+         return elements[0].text + this.innerHTML + elements[elements.length-1].text
+      }});
+   }
+
+   innerText(element) {
+      Object.defineProperty(element, 'innerText', { get() {
+         if(element.children)
+            return element.children.map(child => 
+               child.type == 'text' ? child.text.trim() 
+               : child.type == 'tag' 
+                  ? child.innerText
+                  : ''
+            ).join(' ')
+         else return ''
+      }})
+      Object.defineProperty(element, 'inner', { get() {
+         if(element.children)
+            return element.children.map(child => child.type == 'text' ? child.text : '').join('')
+         else return ''
+      }})
+   }
+   innerHTML(element) {
+      element.tab = '   '
+      element.n = '\n'
+      Object.defineProperty(element, 'innerHTML', { get() {
+         // let tab = '   ',result = '',firstLevel,space=''
+         let {tab,n} = this
+         let result = '',firstLevel,space=''
+            let {elements} = this
+            let endIndex = elements.length
+            let end = endIndex-1,start=1
+            if(this.type == 'root') {
+               end = endIndex
+               start = 0
+            }
+         for(let i = start; i < end; i++) {
+            let element = elements[i]
+            let {level,text} = element
+            if(firstLevel == undefined) firstLevel = level
+            if(i == end) space = ''
+            else if(level) space = Array.from(Array(level-firstLevel).keys()).map(n => tab).join('')
+            result += space + text
+            if(endIndex > 3) result += n
+         }
+         return result
+      }});
+   }
+
+   parseElement(tagString) {
+      let type = 'tag'
+      if(tagString == '<!DOCTYPE html>') return {tag:'!DOCTYPE html',status:'single',attribs:{},type,text:tagString}
+      let status = 'close'
+      let tag = tagString.match(/(?<=\<\/)(\w*\-?)*/)
+      if(tag == null) {
+         tag = tagString.match(/(?<=\<)(\w*\-?)*/)
+         if(tag) {
+            tag = tag[0]
+            if(HtmlParser.singleTags.includes(tag)) status='single'
+            else status = 'open'
+         }
+      } else tag = tag[0]
+      let {classList,attribs,style,id,text} = this.parseAttributes(tagString)
+      let obj = {tag,status,attribs,type,classList,text,style,id}
+      return obj
+   }
+   static singleTags = ['comment','area','base','br','col','command','embed','hr','img','input','keygen','link','meta','param','source','track','wbr']
+
+   parseAttributes(tagString,classList=[],attribs={},style={},id=null) {
+      let text = tagString
+      let attributes = tagString.match(/(\w+)(?:\s*=\s*(['"]?)(.*?)\2)?/g)
+      if(attributes) attributes.forEach((attribString,i) => {
+         if(i == 0) return
+         let array = attribString.split('=')
+         let name = array[0]
+         if(array.length>1 && name !== '') {
+            let value = array.filter((v,i) => i>0).join('=')
+            value = value.trim().replace(/^\"|\'/,'').replace(/\"|\'$/m,'')
+            let eventIndex = value.match(/(?<=\{\{\{\{event\s)(\d*)?/)
+            if(eventIndex !== null) {
+               value = this.events[eventIndex[0]]
+               text = tagString.replace(`{{{{event ${eventIndex[0]}`,value)
+            }
+            if(name == 'class') classList = value.split(/\s\s?\s?/)
+            else if(name == 'style') style = this.parseInlineCss(value)
+            else if(name == 'id') id = value
+            attribs[name] = value
+         } else if(name !== '') attribs[name] = undefined
+      });
+      return {classList,attribs,style,id,text}
+   }
+
+   parseInlineCss(textCss) {
+      let rules = textCss.split(';')
+      let styles = {}
+      rules.forEach(rule => {
+         let [prop,value] = rule.trim().split(':')
+         if(rule !== '') {
+            if(prop.match(/\w*\-\w*(-\w*)?/) !== null) {
+               let words = prop.split('-')
+               prop = words.map((w,i) => i==0 ? w : w[0].toUpperCase() + w.slice(1)).join('')
+            }
+            styles[prop] = value.trim()
+         }
+      });
+      return styles
+   }
+}
+export class Document extends HtmlSelector {
+   constructor(html) {
+      super(html)
+      this.elements.forEach((element) => {this.addMethods(element)});
+   }
+
+   addMethods(element) {
+      if(element.type == 'tag' && element.status !== 'close') {
+         this.insert(element)
+         this.buildAttribs(element)
+         this.classlistMethods(element)
+         this.style(element)
+         this.id(element)
+      }
+   }
+
+   id(element,self=this) {
+      if(element.id !== undefined)
+      if(!!Object.getOwnPropertyDescriptor(element, 'id')['get']) return
+      if(element.id == null || element.id !== undefined) {
+         if(typeof element.id == 'string') delete element.id
+         Object.defineProperty(element, 'id', { 
+            get() {return this.attribs.id ? this.attribs.id : null},
+            set(value) {
+               this.attribs.id = value
+               self.changeElementText(this)
+            }
+         })
+      }
+   }
+
+   style(element,obj={},self=this) {
+      if(element.style !== undefined) obj = {...element.style}
+      const convertProp = str => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+      const handler = {
+         get(target,prop,receiver) {
+            if(prop === 'target') return target
+            return Reflect.get(...arguments);
+         },
+         set(obj, prop, value) {
+            obj[prop] = value
+            element.attribs.style = Object.keys(obj).map(key => `${convertProp(key)}:${obj[key]};`).join('')
+            self.changeElementText(this)
+            return true
+         },
+         deleteProperty(obj, prop) {
+            if (prop in obj) {
+               delete obj[prop];
+               element.attribs.style = Object.keys(obj).map(key => `${convertProp(key)}:${obj[key]};`).join('')
+            }
+            self.changeElementText(this)
+            return true
+         }
+      };
+      element.style = new Proxy(obj, handler);
+   }
+
+   classlistMethods(element,self=this) {
+      if(element.classList == undefined) element.classList = []
+      element.classList.add = function(newClass) {
+         if(element.attribs.class == undefined) element.attribs.class = ''
+         this.push(newClass)
+         element.attribs.class += ' '+newClass
+         self.changeElementText(this)
+      }
+      element.classList.remove = function(clsToRemove) {
+         this.splice(this.indexOf(clsToRemove),1)
+         element.attribs.class = this.filter(c => c !== undefined).join(' ')
+         self.changeElementText(this)
+      }
+      element.classList.toggle = function(clsToToggle) {
+         if(this.includes(clsToToggle)) this.remove(clsToToggle)
+         else this.add(clsToToggle)
+         self.changeElementText(this)
+      }
+   }
+
+   buildAttribs(element,self=this) {
+      if(!element.attr) element.attr = function(name,value) {
+         let notForRemove = ['class','style','id']
+         let notForChange = ['style','id']
+         if(name && value === undefined) return this.attribs[name]
+         else if(name && value === null && !notForRemove.includes(name)) {
+            delete this.attribs[name]
+         } else if(name && value !== undefined && value !== null && !notForChange.includes(name)) {
+            this.attribs[name] = value
+            if(name == 'class') {
+               this.classList = value.split(' ').filter(c => c !== ' ')
+               self.classlistMethods(this)
+            }
+         }
+         self.changeElementText(this)
+      }
+   }
+
+   insert(element) {
+      let self = this
+      element.insert = function(newElement,pos=0) {
+         let elements
+         let $elements = this.$elements
+         if(typeof newElement == 'string') {
+            newElement = new HtmlParser(newElement)
+            newElement.elements.forEach(el => {
+               self.html.getElements(el)
+               self.makeSelectable(el);
+               self.addMethods(el);
+            });
+            elements = newElement.elements
+            newElement = newElement.root.children[0]
+         } else {
+            let {index,endIndex} = newElement
+            let count = isNaN(endIndex - index) ? 1 : endIndex - index+1
+            elements = $elements.splice(index,count)
+            let {parent,childIndex} = newElement
+            parent.children.splice(childIndex,1)
+         }
+         self.rebildElements($elements)
+         self.addElement(this,$elements,newElement,elements,pos)
+      }
+      element.remove = function() {
+         let {$elements,elements,parent,childIndex,index} = this
+         $elements.splice(index,elements.length)
+         parent.children.splice(childIndex,1)
+         parent.endIndex = parent.endIndex-elements.length
+         self.rebildElements($elements)
+      }
+      Object.defineProperty(element, 'before', { set(newEl) {this.insert(newEl,0)}})
+      Object.defineProperty(element, 'after', { set(newEl) {this.insert(newEl,3)}})
+      Object.defineProperty(element, 'last', { set(newEl) {this.insert(newEl,2)}})
+      Object.defineProperty(element, 'first', { set(newEl) {this.insert(newEl,1)}})
+   }
+
+   addElement(element,$elements,newElement,elements,pos) {
+      let {parent,level,index,endIndex} = element
+      if(pos == 0) { // beforebegin
+         $elements.splice(index,0,...elements) // add elements to $elements
+         parent.children.splice(element.childIndex,0,newElement) // add as child before
+      } else if(pos == 3) { // afterend
+         $elements.splice(endIndex+1,0,...elements) // add elements to $elements
+         parent.children.splice(element.childIndex+1,0,newElement) // add element as child after
+      } else if(pos == 1 || pos == 2) {
+         level = level+1
+         parent = element
+         if(pos == 1) { // afterbegin
+            $elements.splice(index+1,0,...elements) // add elements to $elements
+            element.children.unshift(newElement) // add element as first child
+         } else if(pos == 2) { // beforeend
+            $elements.splice(endIndex-1,0,...elements) // add elements to $elements
+            element.children.push(newElement) // add element as last child
+         }
+         element.endIndex = element.endIndex + elements.length
+      }
+      this.rebildElements($elements)
+      this.rebuildChild(elements[0],parent,element.html,level)
+   }
+
+   rebildElements($elements) {
+      for(let i=0; i<$elements.length; i++) {
+         let {endIndex,index} = $elements[i]
+         if(endIndex) {
+            let gap = endIndex - index
+            $elements[i].endIndex = i + gap
+         }
+         $elements[i].index = i
+      }
+   }
+
+   rebuildChild(child,parent,html,level) {
+      if(child.endIndex !== undefined) { // add level to close tag
+         child.elements[child.elements.length-1].level = level
+      }
+      html.getElements(child,html) // bind element to this.$elements
+      child.parent = parent
+      child.level = level
+      if(child.children)
+         if(child.children.length > 0) 
+            child.children.forEach(grandChild => {
+               this.rebuildChild(grandChild,child,html,level+1)
+            });
+   }
+
+   changeElementText(element) {
+      let {type,status,attribs,tag} = element
+      if(type == 'tag' && status !== 'close') {
+         let atts = Object.keys(attribs)
+         atts = atts.length>0 ? ' '+atts.map(name => `${name}${attribs[name] ? `="${attribs[name]}"`: ''}`).join(' ') : ''
+         element.text = `<${tag}${atts}>`
+      }
+   }
+}