als-document 0.1.1 → 0.5.0

package/document.js

@@ -1,585 +1,562 @@
-class Document {
-   static singlTags = ['comment','area','base','br','col','command','embed','hr','img','input','keygen','link','meta','param','source','track','wbr']
-   constructor(htmlText) {
-      if(typeof htmlText !== 'string') return
-      this.types = {}
-      this.domTree = []
-      this.added = []
-      this.domList = []
-      this.comments = []
-      this.scripts = {}
-      this.events = {}
-      this.htmlText = htmlText
-      this.doctype = ''
-      this.getDoctype()
-      this.removeComments()
-      this.removeScripts()
-      this.removeEvents()
-      this.parseTags()
-      this.addScripts()
-      this.addEvents()
-      this.addComments()
-      this.getPairs()
-   }
-// Get domList
-   getDoctype() {
-      let doctype = this.htmlText.match(/\<\!DOCTYPE([\S\s]*?)\>/gm,'')
-      if(doctype !== null) {
-         this.doctype = doctype[0]
-         this.htmlText = this.htmlText.replace(/\<\!DOCTYPE([\S\s]*?)\>/gm,'')
-      }
+class Query {
+   static get(query) {
+      let q = new Query(query)
+      return q.selectors
    }
 
-   removeComments() {
-      let comments = this.htmlText.match(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'')
-      if(comments !== null) comments.forEach((comment,i) => {
-         let commentTag = `<comment comment-id="${i}">`
-         this.comments.push(comment)
-         this.htmlText = this.htmlText.replace(comment,commentTag)
+   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)
       });
    }
 
-   addComments() {
-      this.domList.forEach((element,i) => {
-         if(element.tagName == 'comment') {
-            let id = this.domList[i].attributes['comment-id']
-            let comment = this.comments[id]
-            if(comment !== undefined) {
-               this.domList[i].comment = comment
-               delete this.comments[i]
-            }
-         }
-      });
+   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]
    }
 
-   removeScripts() {
-      let scripts = this.htmlText.match(/\<script(.*?)\>[\S\s]*?\<\/script\>/gm)
-      if(scripts !== null) scripts.forEach((script,i) => {
-         let scriptContent = script.replace(/\<script(.*?)\>/,'').replace('</script>','')
-         if(scriptContent.trim() !== '') {
-            let scriptName = `{script${i}}`
-            let newScript = script.replace(scriptContent,scriptName)
-            this.scripts[scriptName] = scriptContent
-            this.htmlText = this.htmlText.replace(script,newScript)
+   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
    }
 
-   removeEvents() {
-      let events = ['abort','afterprint','animationend','animationiteration','animationstart','beforeprint','beforeunload','blur','canplay','canplaythrough','change','click','contextmenu','copy','cut','dblclick','drag','dragend','dragenter','dragleave','dragover','dragstart','drop','durationchange','ended','error','focus','focusin','focusout','fullscreenchange','fullscreenerror','hashchange','input','invalid','keydown','keypress','keyup','load','loadeddata','loadedmetadata','loadstart','message','mousedown','mouseenter','mouseleave','mousemove','mouseover','mouseout','mouseup','mousewheel','offline','online','open','pagehide','pageshow','paste','pause','play','playing','popstate','progress','ratechange','resize','reset','scroll','search','seeked','seeking','select','show','stalled','storage','submit','suspend','timeupdate','toggle','touchcancel','touchend','touchmove','touchstart','transitionend','unload','volumechange','waiting','wheel']
-      events.forEach(event => {
-         let r = new RegExp(`on${event}\\s?\\=\\s?"[\\S\\s]*?\\"`,'g')
-         let scripts = this.htmlText.match(r)
-         if(scripts !== null) scripts.forEach((script,i) => {
-            let scriptContent = script.replace(`on${event}`,'').replace('=','').replace(/\"/g,'')
-            if(scriptContent.trim() !== '') {
-               let scriptName = `{script${i}}`
-               let newScript = script.replace(scriptContent,scriptName)
-               this.events[scriptName] = scriptContent
-               this.htmlText = this.htmlText.replace(script,newScript)
-            }
-         });
-      });
+   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
    }
 
-   addScripts() {
-      this.domList.forEach((element,i) => {
-         if(element.tagName == 'script' && !element.close) {
-            let text = this.domList[i+1].text
-            if(this.scripts[text] !== undefined) {
-               this.domList[i+1].text = this.scripts[text]
-               delete this.scripts[text]
-            }
-         }
-      });
-   }
 
-   addEvents() {
-      this.domList.forEach((element,i) => {
-         if(element.attributes !== undefined) {
-            for(let attName in element.attributes) {
-               let attValue = element.attributes[attName]
-               if(this.events[attValue] !== undefined) {
-                  this.domList[i].attributes[attName] = this.events[attValue]
-                  delete this.events[attValue]
-               }
-            }
-         }
-      });
+   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
    }
 
-   parseTags() {
-      let outerHTML = this.htmlText
-      let outerHtmlForCut = outerHTML
-      let tags = outerHTML.match(/\<(\w*-?)*?(.*?)?([\S\s]*?)\>/gm)
-      let index = 0
-      if(tags !== null) tags.forEach((tag,i) => {
-         let node = outerHtmlForCut.split(tag)[0]
-         if(node.trim() !== '') {
-            this.domList.push({text:node,index})
-            index++
-         }
-         let obj = this.buildElementObj(tag)
-         let objName = obj.tagName+obj.order
-         obj.index = index
-         if(obj.order.length == 0) { // single tag
-            this.domList.push(obj)
-         } else this.domList.push({[objName]:obj,name:objName,index})
-         if(obj.close) {
-            let j = this.findOpen(objName)
-            if(j >=0) {
-               let closeTag = index
-               let openTagObj = this.domList[j][this.domList[j].name]
-               this.domList[j] = {...openTagObj,closeTag}
-            }
-            this.domList[obj.index] = obj
+   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)
          }
-         outerHtmlForCut = outerHtmlForCut.replace(node+tag,'')
-         index++
+         return attrib
       });
+      return attribs
    }
-// Build element
-   buildElementObj(string,obj={}) {
-      let singlTags = Document.singlTags
-      if(string.match(/\<\/(\w*-?)*/) !== null) obj.close = true
-      else obj.close = false
-      obj.tagName = string.match(/\<\/?(\w*-?)*/,'gm')[0].replace(/\<\/?/,'')
-      if(!singlTags.includes(obj.tagName)) {
-         obj.tagName = obj.tagName.replace('/','')
-         let tagName = obj.tagName
-         this.getType(tagName,obj)
-         obj.order = this.types[tagName].count
-      } else obj.order = ''
-      obj.attributes = this.getAttributes(string)
-      obj = this.buildClass(obj)
-      if(obj.attributes.id !== undefined) {
-         obj.id = obj.attributes.id
-         delete obj.attributes.id
+
+   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
       }
-      return obj
    }
 
-   getType(tagName,obj) {
-      if(this.types[tagName] == undefined) 
-         this.types[tagName] = {count:0,lastOperation:1}
-      else if(obj.close && this.types[tagName].lastOperation == 1) 
-         this.types[tagName].lastOperation = 0
-      else if(obj.close && this.types[tagName].lastOperation == 0) 
-         this.types[tagName].count--
-      else if(!obj.close && this.types[tagName].lastOperation == 0) 
-         this.types[tagName].lastOperation = 1
-      else if(!obj.close && this.types[tagName].lastOperation == 1) 
-         this.types[tagName].count++
-   }
-
-   getAttributes(string,attributes = {}) {
-      let matches = string.match(/\s(\/?\w*\-?)*((\S)*?\s?=[\S\s]*?\"[\S\s]*?\")?/g)
-      if(matches !== null) matches.forEach(attribute => {
-            attribute = attribute.trim()
-            if(attribute !== '') {
-               let attName = attribute.split('=')[0]
-               let attValue = attribute.replace(attName,'').replace('=','').replace(/\"/g,'')
-               if(attName !== '/') attributes[attName] = attValue.trim()
-            }
-         })
-      return attributes
+   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
    }
-
-   buildClass(obj) {
-      if(obj.attributes.class !== undefined) {
-         obj.classList = obj.attributes.class.split(' ')
-      } else obj.classList = []
-      obj.classList.add = newClass => {
-         obj.classList.push(newClass)
-         obj.attributes.class += ' '+newClass
-         return obj
-      }
-      obj.classList.remove = clas => {
-         let index = obj.classList.indexOf(clas)
-         if(index >=0) {
-            obj.attributes.class = obj.attributes.class.replace(obj.classList[index],'')
-            obj.classList.splice(index,1)
-         }
-         return obj
+}
+
+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.removeScripts()
+         this.removeStyles()
+         this.removeEventStrings()
+         this.htmlString = this.htmlString.replace(/\<\!\-\-([\S\s]*?)\-\-\>/gm,'') // remove all comments
+         this.root = this.parse()
       }
-      return obj
    }
-// Build dom tree   
-   getPairs(start=0,end=this.domList.length,domTree=this.domTree) {
-      for(let index=start; index<end; index++) {
-         let node = this.domList[index]
-         if(node.closeTag !== undefined && !this.added.includes(index)) { 
-            if(this.firstTag == undefined) this.firstTag = index
-            this.buildTag(index,domTree)
-            break;
-         } 
-      }
+
+   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
    }
 
-   buildTag(openIndex,domTree,parent=this.domTree) {
-      this.added.push(openIndex)
-      let content = this.domList[openIndex]
-      content.children = []
-      content.innerText = ''
-      this.getChildNodes(openIndex,content.closeTag,content)
-      content.$ = (selector) => this.$(selector,content)
-      content.$$ = (selector) => this.$$(selector,content)
-      content.parent = parent
-      content = Document.buildMethods(content)
-      this.buildOperations(content)
-      if(content.innerText !== '') {
-         if(parent.innerText == undefined) parent.innerText = ''
-         parent.innerText += '|'+content.innerText
-      }
-      content.json = () => Document.removeMethods(content)
-      delete content.closeTag
-      delete content.close
-      delete content.index
-      delete content.order
-      domTree.push(content)
-   }
-
-   static buildMethods(content) {
-      content.children.forEach((child,index) => { // prev and next
-         if(index == 0) child.prev = null
-         else child.prev = content.children[index-1]
-         if(index == content.children.length-1) child.next = null
-         else child.next = content.children[index+1]
+   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}`)
       });
-      return content
+      this.styles = styles
    }
    
-   static changeByIndex(array,value,item,before = true) {
-      let index = array.indexOf(value);
-      if(index > -1) {
-         if(item == undefined) array.splice(index, 1); // remove value
-         else if(item !== undefined) {
-            if(before) array.splice(index, 0, item);  // add item before value
-            else array.splice(index+1, 0, item);  // add item after value
-         }
+   removeEventStrings() {
+      let eventsWithHtml = this.htmlString.match(/on\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)
+         })
       }
    }
 
-   static buildInnerText(element) {
-      element.innerText = ''
-      if(element.children !== undefined) element.children.forEach(child => {
-         if(child.text !== undefined && child.text !== '') element.innerText += child.text
-         if(child.innerText !== undefined && child.innerText !== '') element.innerText += '|'+child.innerText
+   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()
+      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
    }
 
-   buildOperations(content) {
-      content.remove = function() {
-         Document.changeByIndex(content.parent.children,content)
-         Document.buildInnerText(content.parent)
+   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
+         const 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)
+            }
+         }
+         this.addChild(parent,child,index,level,childIndex/2)
+         childIndex++
       }
-      content.add = function(element,place) {
-         if(typeof element == 'string') element = Document.newElement(element)
-         else element.remove()
-         if(place == 1) content.children.unshift(element)
-         if(place == 2) content.children.push(element)
-         if(place == 1 || place == 2) build(content)
-         
-         if(place == 0) Document.changeByIndex(content.parent.children,content,element,true)
-         if(place == 3) Document.changeByIndex(content.parent.children,content,element,false)
-         if(place == 0 || place == 3) build(content.parent)
-         
-         function build(parent) {
-            element.parent = parent
-            element = Document.buildMethods(parent)
-            Document.buildInnerText(parent)
+      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]
          }
-         return element
       }
-      content.add0 = element => content.add(element,0)
-      content.add1 = element => content.add(element,1)
-      content.add2 = element => content.add(element,2)
-      content.add3 = element => content.add(element,3)
-   }
- 
-   static newElement(outerHtml) {
-      let document = new Document(outerHtml)
-      return document.domTree[0].json()
-   }
-
-   build(filePath,array=this.domTree,html = '',space='') {
-      let extraSpace = space+'    '
-      let nl = `
-`
-      array.forEach(element => {
-         if(element.text !== undefined) html += space+element.text+nl
-         else if(element.tagName == 'comment' ) {
-            html += space+element.comment + nl
-         } else {
-            let attributes = ''
-            for(let propName in element.attributes) {
-               let value = element.attributes[propName]
-               let attribute = ` ${propName}="${value}"`
-               if(attribute.length + attributes.length > 80) attribute = nl+space+attribute
-               attributes += attribute
-            }
-            let id = ''
-            if(element.id !== undefined) id = ` id="${element.id}"`
-            html += `${space}<${element.tagName}${id}${attributes}>${nl}`
-            if(element.children !== undefined)
-               if(element.children.length >0) html = this.build(filePath,element.children,html,extraSpace)
-            if(element.tagName !== undefined && !Document.singlTags.includes(element.tagName)) 
-               html += `${space}</${element.tagName}>${nl}`
+      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]
          }
-      });
-      if(array == this.domTree) {
-         html = this.doctype+nl+html
-         if(filePath !== undefined) Document.writeFile(filePath,html)
+      }
+      this.elements[index] = child
+      return child
+   }
+
+   addChild(parent,child,index,level,childIndex) {
+      if(typeof child == 'string') {
+         child = this.addScriptsAndStyles(parent,child,index)
+         child = {type:'text',text:child}
+         this.elements[index] = child
       } 
-      return html
-   }
-
-   getChildNodes(openIndex,closeIndex,content) {
-      for(let i = openIndex+1; i<closeIndex; i++) {
-         let node = this.domList[i]
-         if(!this.added.includes(i)) {
-            if(!node.close && node.text == undefined) this.buildTag(node.index,content.children,content)
-            else if(!node.close && node.text !== undefined) {
-               content.innerText += node.text
-               content.children.push(node);
-               delete node.index
-            }
-            this.added.push(i)
+      if(child) {
+         delete child.status
+         this.getElements(child)
+         this.innerHTML(child)
+         this.outerHTML(child)
+         this.innerText(child)
+         this.getAncestors(child)
+         this.getAttribute(child)
+         child.childIndex = childIndex
+         child.index = index
+         child.level = level
+         child.prev = null
+         child.next = null
+         if(parent.children.length > 0) {
+            let prevI = parent.children.length-1
+            parent.children[prevI].next = child
+            child.prev = parent.children[prevI]
          }
+         parent.children.push(child)
       }
+      this.indexes.push(index)
    }
- 
-   findOpen(key,array=this.domList) {
-      return array.findIndex(function(obj, index) {
-         if(obj[key] !== undefined && obj[key].close == false && obj[key].closeTag == undefined)
-            return true;
-      });
-   }
-// querySelector
-   $(selector,obj) {return this.$$(selector,obj,true)}
 
-   $$(selector='',obj=this.domTree[0],first=false) {
-      if(typeof selector !== 'string') return
-      this.selector = selector
-      this.selectors = []
-      this.getSelectors(selector)
-      let array = this.findElements(obj)
-      if(first) return array[0]
-      else return this.buildCollection(array)
-   }
-
-   getSelectors() {
-      this.getPropSelctors() // remove all attributes from selector, build them, replace as [i] and put into selectors.attributes[]
-      let groups = this.selector.split(',')
-      groups.forEach(group => {
-         let result = {}
-         group = group.trim()
-         let family = group.split('>')
-         let prevBrother = group.split('+')
-         let nextBrother = group.split('~')
-         if(family.length > 1) {
-            result.parent = this.buildSingleSelector(family[0])
-            result.element = this.buildSingleSelector(family[1])
-         } else if(prevBrother.length > 1) {
-            result.prev = this.buildSingleSelector(prevBrother[0])
-            result.element = this.buildSingleSelector(prevBrother[1])
-         } else if(nextBrother.length > 1) {
-            result.next = this.buildSingleSelector(nextBrother[0])
-            result.element = this.buildSingleSelector(nextBrother[1])
-         } else result.element = this.buildSingleSelector(group)
-         this.selectors.push(result)
-      });
+   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
+      }
    }
 
-   getPropSelctors() {
-      let signs = ['~','|','^','$','*']
-      let props = this.selector.match(/\[.*\]/g)
-      this.attributes = []
-      if(props !== null) props.forEach((prop,i) => {
-         this.selector = this.selector.replace(prop,`[${i}]`)
-         let attribute = prop.replace('[','').replace(']','')
-         let array = attribute.split('=')
-         let propName = array[0]
-         let propValue = (array[1] == undefined) ? '' : array[1].replace(/"/g,'')
-         let sign
-         if(signs.includes(propName.slice(-1))) {
-            sign = propName.slice(-1)
-            propName = propName.slice(0, -1)
+   getAncestors(element) {
+      Object.defineProperty(element, 'ancestors', { get() {
+         let ancestors = []
+         let parent = this.parent
+         if(parent) while(parent.parent) {
+            ancestors.unshift(parent)
+            parent = parent.parent
          }
-         this.attributes.push({propName,propValue,sign})
-      });
+         return ancestors
+      }});
    }
 
-   buildSingleSelector(selector,result={}) {
-      selector = selector.trim()
-      let props = selector.match(/\[.*\]/g)
-      if(props !== null) props.forEach(prop => {
-         selector = selector.replace(prop,'')
-         let index = prop.replace('[','').replace(']','')
-         result.attributes = this.attributes[index]
-      });
-      let id = selector.match(/#(\w*-?)*/)
-      if(id !== null) {
-         result.id = id[0].replace('#','')
-         selector = selector.replace(id[0],'')
-      }
-      let classes = selector.match(/\.(\w*-?)*/g)
-      if(classes !== null) {
-         result.classes = []
-         classes.forEach(clas => {
-            result.classes.push(clas.replace('.',''))
-            selector = selector.replace(clas,'')
-         });
-      }
-      let tag = selector.match(/(\w*-?)*/)
-      if(tag !== null) {
-         if(tag[0] !== '') {
-            result.tag = tag[0]
-            selector = selector.replace(tag[0],'')
+   getElements(element,elements=this.elements) {
+      Object.defineProperty(element, 'elements', { get() {
+         return elements.slice(this.index,this.endIndex+1)
+      }});
+   }
+
+   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 : '').join('')
+         else return ''
+      }})
+   }
+
+   innerHTML(element) {
+      Object.defineProperty(element, 'innerHTML', { get() {
+         let tab = '   ',result = '',firstLevel,space=''
+            let {elements} = this
+            let endIndex = elements.length
+         for (let i = 1; i < endIndex-1; i++) {
+            let element = elements[i]
+            let {level,tag,text} = element
+            if(firstLevel == undefined) firstLevel = level
+            if(i == endIndex-1) 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
+         return result
+      }});
    }
 
-   findElements(obj,array = []) {
-      array = this.checkSelectors(obj,array)
-      if(obj.children !== undefined) {
-         obj.children.forEach(element => {
-            this.findElements(element,array)
-         });
-      }
-      return array
+   parseElement(tagString) {
+      let text = tagString
+      let type = 'tag'
+      if(tagString == '<!DOCTYPE html>') return {tag:'!DOCTYPE html',status:'single',attribs:{},type}
+      let status = 'close'
+      let tag = tagString.match(/(?<=\<\/)(\w*\-?)*/)
+      if(tag == null) {
+         tag = tagString.match(/(?<=\<)(\w*\-?)*/)
+         if(tag) {
+            tag = tag[0]
+            if(this.singleTags.includes(tag)) status='single'
+            else status = 'open'
+         }
+      } else tag = tag[0]
+      let {classList,attribs,style,id} = this.parseAttributes(tagString)
+      let obj = {tag,status,attribs,type,classList,text,style,id}
+      return obj
    }
+   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 attributes = tagString.match(/(?<=\s)(\w*\-?)*(\s*?\=\s*?\"[\s\S]*?\")?/g)
+      if(attributes) attributes.forEach(attribString => {
+         let [name,value] = attribString.split('=')
+         if(value !== undefined && name !== '') {
+            value = value.trim().replace(/^\"/,'').replace(/\"$/m,'')
+
+            let eventIndex = value.match(/(?<=\{\{\{\{event\s)(\d*)?/)
+            if(eventIndex !== null) value = this.events[eventIndex[0]]
 
-   checkSelectors(element,array) {
-      this.selectors.forEach(group => {
-         let addIt = 0
-         if(group.parent !== undefined) addIt += this.checkElement(element.parent,group.parent)
-         if(group.prev !== undefined) addIt += this.checkElement(element.prev,group.prev)
-         if(group.next !== undefined) addIt += this.checkElement(element.next,group.next)
-         if(group.element !== undefined) addIt += this.checkElement(element,group.element)
-         if(addIt == 0) array.push(element)
+            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 array
-   }
-
-   checkElement(element,selectors,addIt = 0) {
-      if(element == undefined) return -1
-      if(selectors.tag !== undefined)
-         if(element.tagName !== selectors.tag) addIt--
-      if(selectors.id !== undefined)
-         if(element.id !== selectors.id) addIt--
-      if(selectors.classes !== undefined ) {
-         if(element.classList !== undefined) selectors.classes.forEach(clas => {
-            if(!element.classList.includes(clas)) addIt--
-         });
-         else addIt--
-      }
-      if(selectors.attributes !== undefined) addIt += this.checkAttributes(
-         element.attributes,
-         selectors.attributes.propName,
-         selectors.attributes.propValue,
-         selectors.attributes.sign
-      )
-      return addIt
-   }
-
-   checkAttributes(props,propName,propValue,sign,addIt = 0) {
-      if(props == undefined) return -1
-      else {
-         if(props[propName] == undefined) addIt--
-         if(propValue == '' && props[propName] == undefined) addIt--
-         if(propValue.length>0 && props[propName] !== undefined) {
-            if(sign == undefined) {
-               if(props[propName] !== propValue) addIt--
-            } else if(sign == '~') { 
-               let r = new RegExp(`\\b${propValue}`)
-               if(props[propName].match(r) == null) addIt--
-            } else if(sign == '|') {
-               if(!props[propName].startsWith(propValue) || props[propName] !== propValue) addIt--
-            } else if(sign == '^') {
-               if(!props[propName].startsWith(propValue)) addIt--
-            } else if(sign == '$') {
-               if(!props[propName].endsWith(propValue)) addIt--
-            } else if(sign == '*') {
-               if(!props[propName].includes(propValue)) addIt--
+      return {classList,attribs,style,id}
+   }
+
+   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 addIt
+      });
+      return styles
    }
+}
 
-// Collection array
-   buildCollection(collection) {
-      collection.each = function(fn) {return Document.each(this,fn)}
-      collection.parse = function(part,fn) {return Document.parse(this,part,fn)}
-      return collection
+
+class HtmlSelector {
+   constructor(html) {
+      if(typeof html == 'string') {
+         html = new HtmlParser(html)
+         this.html = html
+         this.elements = html.elements
+         this.makeSelectable()
+      } else console.log('Parameter is not string')
+   }
+   
+   makeSelectable() {
+      this.elements.forEach(element => {
+         if(element.type == 'tag' && element.status !== 'close') {
+            element.$$ = (query) => this.$$(query,element.index,element.endIndex)
+            element.$ = (query) => this.$(query,element.index,element.endIndex)
+         }
+      })
    }
 
-   static each(collection,fn) {
-      for(let i = 0; i<collection.length; i++) {
-         fn(collection[i],i,collection)
+   $(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
       }
-      return collection
-   }
-
-   static parse(collection,part,fn,array=[]) {
-      if(part !== undefined) {
-         collection.each((element,index,collection) => {
-            let content
-            if(element[part] !== undefined) content = element[part]
-            else if(element.attributes !== undefined)
-               if(element.attributes[part] !== undefined) 
-                  content = element.attributes[part]
-            
-            if(content !== undefined) {
-               if(typeof content == 'string')
-                  content = content.replace(/&nbsp;/g,' ')
-               if(fn !== undefined) {
-                  if(fn(content)) array.push(content)
-               } else array.push(content)
-            } 
-         })
-      } else {
-         collection.forEach(element => {
-            array.push(Document.removeMethods(element))
-         });
+      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 array
+      return true
    }
 
-   static removeMethods(element) {
-      element = {...element}
-      let deleteThis = ['parent','next','prev','classList','json','$','$$','remove','add','add0','add1','add2','add3']
-      deleteThis.forEach(item => {
-         delete element[item]
-      });
-      if(element.children !== undefined) element.children.forEach((child,i) => {
-         element.children[i] = Document.removeMethods(child)
-      });
-      return element
+   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
    }
 
-   static writeFile(path,obj,encoding = 'utf-8') {
-      let {writeFileSync} = require('fs')
-      path = Document.path(path)
-      if(typeof obj !== 'string') try {
-         obj = JSON.stringify(obj,null,4)
-         writeFileSync(path,obj,encoding)
-      } catch(e) {console.log(e)}
-      else writeFileSync(path,obj,encoding)
+   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
    }
 
-   static readFile(path,encoding = 'utf-8') {
-      path = Document.path(path)
-      let {readFileSync} = require('fs')
-      return readFileSync(path,encoding)
+   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
    }
 
-   static path(path) {
-      let {join} = require('path')
-      if(Array.isArray(path)) return join(...path)
-      else return path
+   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.innerText) {
+            if(check(el.innerText)) 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
    }
 }
-module.exports = Document
+
+
+
+try {module.exports = {HtmlSelector,Query,HtmlParser}} catch{}