als-document 0.1.0

package/document.js

@@ -0,0 +1,584 @@
+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,'')
+      }
+   }
+
+   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)
+      });
+   }
+
+   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]
+            }
+         }
+      });
+   }
+
+   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)
+         }
+      });
+   }
+
+   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)
+            }
+         });
+      });
+   }
+
+   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]
+               }
+            }
+         }
+      });
+   }
+
+   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
+         }
+         outerHtmlForCut = outerHtmlForCut.replace(node+tag,'')
+         index++
+      });
+   }
+// 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
+      }
+      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
+   }
+
+   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
+      }
+      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;
+         } 
+      }
+   }
+
+   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]
+      });
+      return content
+   }
+   
+   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
+         }
+      }
+   }
+
+   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
+      });
+   }
+
+   buildOperations(content) {
+      content.remove = function() {
+         Document.changeByIndex(content.parent.children,content)
+         Document.buildInnerText(content.parent)
+      }
+      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 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(array == this.domTree) {
+         html = this.doctype+nl+html
+         if(filePath !== undefined) Document.writeFile(filePath,html)
+      } 
+      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)
+         }
+      }
+   }
+ 
+   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)
+      });
+   }
+
+   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)
+         }
+         this.attributes.push({propName,propValue,sign})
+      });
+   }
+
+   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],'')
+         }
+      }
+      return result
+   }
+
+   findElements(obj,array = []) {
+      array = this.checkSelectors(obj,array)
+      if(obj.children !== undefined) {
+         obj.children.forEach(element => {
+            this.findElements(element,array)
+         });
+      }
+      return array
+   }
+
+   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)
+      });
+      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(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 addIt
+   }
+
+// 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
+   }
+
+   static each(collection,fn) {
+      for(let i = 0; i<collection.length; i++) {
+         fn(collection[i],i,collection)
+      }
+      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))
+         });
+      }
+      return array
+   }
+
+   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
+   }
+
+   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)
+   }
+
+   static readFile(path,encoding = 'utf-8') {
+      path = Document.path(path)
+      let {readFileSync} = require('fs')
+      return readFileSync(path,encoding)
+   }
+
+   static path(path) {
+      let {join} = require('path')
+      if(Array.isArray(path)) return join(...path)
+      else return path
+   }
+}
+module.exports = Document

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "als-document",
+  "version": "0.1.0",
+  "description": "virtual dom",
+  "main": "document.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "virtual DOM"
+  ],
+  "author": "Alex Sorkin",
+  "license": "ISC"
+}

package/readme.md

@@ -0,0 +1,196 @@
+# Als-Document
+
+*If something wrong or not working properly, please write me to: sh.mashkanta@gmail.com*
+
+Document is a class which gets html as string and return new object with DOM tree. 
+You can add or remove elements from DOM tree and modify each element. 
+You can select elements and collections and read and modify them with given instruments. 
+
+
+## Write and Read files
+Document have 2 static methods to read and write files. 
+The syntax:
+```javascript
+Document.writeFile(filePath,obj,encoding = 'utf-8')
+Document.readFile(filePath,encoding = 'utf-8')
+```
+
+* ``filepath`` - filepath can be string (absolute path to file) or array for joining.
+* ``obj`` - obj can be string or object for stringify.
+* ``encoding`` - encoding for read or write file
+
+Example:
+```javascript
+let {Document} = require('als-document')
+let html = Document.readFile([__dirname,'index.html'])
+```
+
+
+## Creating new object
+
+Document constructor get single string parameter - the outerHTML for converting to virtual DOM tree. 
+
+```javascript
+let document = new Document(html) // html has to be string
+document.domTree // includes virtual DOM tree as array of elements
+```
+
+
+## QuerySelector for single element
+Then document object has created, you can select elements or collections. 
+For selecting single element, use ``$(selector)`` and for selecting collections ``$$(selector)``.
+
+**Selecting element**
+
+```javascript
+document.$('div') // select first div in document
+document.$('div.some') // select first div element with some class
+```
+
+At this time, selector supports this:
+* Selects all elements - ``*``
+* element - ``div``
+* class - ``.some-class``
+* id - ``#some-id``
+* parent - ``div > p``
+* next - ``div + p``
+* previous - ``p ~ ul``
+* attribute - ``[some-attribute="some value"]``
+   * ``[prop]``
+   * ``[prop~=value]``
+   * ``[prop|=value]``
+   * ``[prop^="value"]``
+   * ``[prop$="value"]``
+   * ``[prop*="value"]``
+
+
+The folowing, **won't work**: ``div p``.
+
+
+Each returned element, has the folowing:
+```javascript
+{
+   parent, // parent element
+   prev, // previous element (null if no exists)
+   next, // next element (null if no exists)
+   innerText, // innner text of element and it's childNodes separated by |
+   children, // array of childNodes(elements and text nodes) - includes text element too
+   tagName, // tag name of element
+   id, // id of element if exists (not included in attributes)
+   attributes, // object of attributes (id not included)
+   classList, // array of classes and add and remove methods
+   $(selector),
+   $$(selector),
+   json(), // remove all methods and circular objects from object
+   remove(), // remove this element
+   add(element/outerHtml,place), 
+   add0(element/outerHtml), 
+   add1(element/outerHtml), 
+   add2(element/outerHtml), 
+   add3(element/outerHtml), 
+}
+```
+
+Text node has the folowing:
+```javascript
+{
+   text,
+   prev,
+   next
+}
+```
+
+Comment node:
+```javascript
+tagName:comment,
+comment // comment it self
+```
+
+You can add or remove classes with classList methods.
+Example:
+```javascript
+let element = document.$('div')
+element.classList.remove('some')
+element.classList.add('another')
+element.classList.add('onemore')
+```
+
+Also you can change element's id:
+```javascript
+let element = document.$('div')
+element.id = 'new-id'
+```
+
+## Element methods
+
+```javascript
+json() // remove all methods and circular objects from object
+remove() // remove this element
+add(element/outerHtml,place) // adding AdjacentHTML or AdjacentElement to place(0-3)
+add0(element/outerHtml) // adding AdjacentHTML or AdjacentElement beforebegin
+add1(element/outerHtml) // adding AdjacentHTML or AdjacentElement afterbegin
+add2(element/outerHtml) // adding AdjacentHTML or AdjacentElement beforeend
+add3(element/outerHtml) // adding AdjacentHTML or AdjacentElement afterend
+```
+
+Example:
+```javascript
+let document = new Document(html)
+let a = document.$('a')
+let div = document.$('div')
+div.add2('<div id="test">Hello world</div>')
+div.add3(a)
+a.remove()
+```
+
+
+Create new element with ``Document.newElement(outerHtml)``
+
+```javascript
+Document.newElement('<div id="test">Hello world</div>')
+```
+
+
+## QuerySelector for Collection ``$$()``
+To select few elements, use ``$$(selector)`` method. 
+
+```javascript
+document.$$('div') // return collection of all div elements
+```
+
+The collection is array which has the elements and two methods: ``each`` and ``parse``.
+
+``each`` method gets callback function with 3 parameters: element it self, index of the element in collection and collection itself. 
+
+Here example:
+```javascript
+let array = []
+document.$$('div').each((element,index,collection) => {
+   if(element.innerText.includes('some text'))
+      array.push(element)
+})
+```
+
+``parse`` method, gets two parameters: ``part`` and ``fn`` and return array with results. 
+* ``part`` is a part of element. It can be innerText, id, tagName or any property inside attributes. 
+* ``fn`` is a filter function which gets content of part. If return true, content will be included.
+
+Example:
+```javascript
+new Document(htmlText).$$('div')
+.parse('innerText',
+   content=> (content.length > 0) ? true : false)
+```
+
+## Building html
+
+For building html again, use ``build`` method. 
+Example:
+```javascript
+let element = document.$('div')
+element.classList.add('another')
+element.classList.remove('some')
+element.id = 'new-id'
+document.build() // return new html text
+document.build([__dirname,'new-index.html']) // will create a file with new html text
+```