als-document 0.1.1 → 0.5.0

package/readme.md

@@ -1,200 +1,352 @@
-# Als-Document
+# Als-document
 
-*If something wrong or not working properly, please write me to: sh.mashkanta@gmail.com*
+Builded from scatch and tested.
+All tested with als-test. 
 
+Als-document is a library which includes 3 instrements:
+* Html parser - for fast html string parsing and building dom tree
+* Html query parser - for destructing css/html query to selectors inside array of objects
+* Html selector - for selecting elements with css/html query inside parsed dom tree
 
-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. 
+- [Als-document](#als-document)
+  - [Selector](#selector)
+    - [Basics](#basics)
+      - [FrontEnd usage](#frontend-usage)
+      - [BackEnd usage](#backend-usage)
+    - [Extra abilities](#extra-abilities)
+  - [HtmlParser](#htmlparser)
+    - [Syntax](#syntax)
+    - [Frontend example](#frontend-example)
+    - [Backend example](#backend-example)
+  - [Query](#query)
+    - [Syntax](#syntax-1)
+    - [Example](#example)
+    - [Attribs and check function](#attribs-and-check-function)
 
-**update**
-* querySelector for attributes fixed
 
+## Selector
 
-## Write and Read files
-Document have 2 static methods to read and write files. 
-The syntax:
+Selector is a class which uses HtmlParser for parsing html and Query for parsing html/css query. 
+Everything does Query class support, can be selected (so far available all, except pseudos).
+Selector can be used on frontend and on backend.
+
+
+### Basics
+
+**Syntax**
 ```javascript
-Document.writeFile(filePath,obj,encoding = 'utf-8')
-Document.readFile(filePath,encoding = 'utf-8')
+let doc = new HtmlSelector(htmlString:string):instanceof HtmlSelector
+doc.$(query:string):object | null
+doc.$$(query:string):array
+doc.$(query:string).$(query:qeury).$$(query:qeury)
 ```
 
-* ``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
+``query`` - html/css query for selecting
+``$`` - method return first element or null
+``$$`` - return collection or empty array
+Each element, has ``$`` and ``$$`` methods for selecting descendants 
+
 
-Example:
+**Example**
 ```javascript
-let {Document} = require('als-document')
-let html = Document.readFile([__dirname,'index.html'])
+let doc = new HtmlSelector(htmlString)
+let body = doc.$('body') // querySelector('body'):element|null
+let divs = body.$$('div') // body.querySelectorAll('div'):array
+console.log(divs) 
 ```
 
 
-## Creating new object
+#### FrontEnd usage
+```html
+<script src="/node_modules/als-document/document.js"></script>
+<script>
+let htmlText = `
+<div>
+   <span>Another one</span>
+   <div>Some text</div>
+</div>
+`
+let doc = new HtmlSelector(htmlText)
+let span = doc.$('div>span')
+</script>
+```
 
-Document constructor get single string parameter - the outerHTML for converting to virtual DOM tree. 
 
+#### BackEnd usage
 ```javascript
-let document = new Document(html) // html has to be string
-document.domTree // includes virtual DOM tree as array of elements
+let {HtmlSelector} = require('als-document')
+let htmlText = `
+<div>
+   <span>Another one</span>
+   <div>Some text</div>
+</div>
+`
+let doc = new HtmlSelector(htmlText)
+let span = doc.$('div>span')
 ```
 
 
-## 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**
+### Extra abilities
+Usualy, browser selector can select by tag name,class, attribute or id.
+HtmlSelector, has extra selecting options, since id,style,class,events and innerHTML - can be selected as attribute.
 
+For example you can do those things:
 ```javascript
-document.$('div') // select first div in document
-document.$('div.some') // select first div element with some class
+doc.$('[style*="display"]') //style includes "display"
+doc.$('[onclick*="console.log"]') //event includes "console"
+doc.$('[class*="btn"][class*="danger"]') //class includes "btn" and "danger"
+doc.$('[id^="tab"]') //id starts with "tab-"
+doc.$('[inner$="00"]') //innerText ends with ".00"
 ```
+## HtmlParser
 
-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"]``
+HtmlParser is a class which build dom tree from html string.
 
+* HtmlParser removes all html comments and they not included in dom tree. 
+* Contrary to regular dom, attribute includes class,id and style as attribute in addition to classList, id and style(as array).
 
-The folowing, **won't work**: ``div p``.
 
+### Syntax
 
-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), 
-}
+let parsed = new HtmlParser(htmlString:string):instanceof HtmlParser
+parsed.root : circular object
+
+// static method
+HtmlParser.parse(html):object // parsed.root
 ```
 
-Text node has the folowing:
+Each element, except root and text elements has:
+* attribs - element's attributes
+* parent - parent element
+* next - next element or null
+* prev - previous element or null
+* children - array of children include text nodes
+* type - tag or text or root
+* classList - array with classes
+* index - start index of element inside elements list
+* id - element's id or null
+* endIndex - end index of element inside elements list
+* level - level in dom tree
+* text - parsed text for tag and for text element
+* innerText:getter - concats all children's text together | ''
+* innerHTML:getter - return innerHTML for element
+* outerHTML:getter - return outerHTML for element
+* ancestors:getter - return array of ancestors
+* getAttribute(name) - return value of attribute or null
+* style:[] - array of styles with camelCase property name
+
+Example for parsed.document
+
 ```javascript
 {
-   text,
-   prev,
-   next
+   type:'root',
+   children:[
+      {
+         attribs: {},
+         index: 0,
+         prev:null,
+         next:{...}
+         tag: "!DOCTYPE html",
+         type: "tag",
+         ...
+      },
+      {
+         attribs: {lang:'en'},
+         prev:{...},
+         next:null,
+         classList:[],
+         children:[
+            {
+               attribs: {},
+               children:[...]
+               prev:null,
+               next:{...}
+               classList:[],
+               index: 2,
+               tag: "head",
+               parent:{tag:'html',...} // reference to parent
+               type: "tag",
+               ...
+            },
+            {
+               attribs: {},
+               children:[...]
+               index: 10,
+               prev:{...},
+               next:null,
+               classList:[],
+               tag: "body",
+               parent:{tag:'html',...} // reference to parent
+               type: "tag",
+               ...
+            },
+         ]
+         index: 1,
+         tag: "html",
+         parent:{type:'root',...} // reference to parent
+         type: "tag",
+         ...
+      }
+   ]
 }
 ```
 
-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')
-```
+### Frontend example
 
-Also you can change element's id:
-```javascript
-let element = document.$('div')
-element.id = 'new-id'
-```
+```html
+<script src="/node_modules/als-document/parser/parser.js"></script>
+<script>
+let result = new HtmlParser(htmlString)
+console.log(result.root)
 
-## Element methods
+// Or with static method
+console.log(HtmlParser.parse(html))
 
-```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
+</script>
 ```
 
-Example:
+### Backend 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()
+const {HtmlParser} = require('als-htmlparser')
+let result = new HtmlParser(htmlString)
+console.log(result.root)
+
+// Or with static method
+console.log(HtmlParser.parse(html))
 ```
 
 
-Create new element with ``Document.newElement(outerHtml)``
+## Query
+Query is a class for parsing conditions inside html query. Query not supporting pseudo selectors so far.
+You can use Query on frontend and on backend. 
 
-```javascript
-Document.newElement('<div id="test">Hello world</div>')
+Query can be used on fronten and on backend.
+
+Frontend:
+```html
+<script src="/node_modules/als-document/query/query.js"></script>
 ```
 
+Backend:
+```javascript
+let {Query} = require('als-document')
+```
 
-## QuerySelector for Collection ``$$()``
-To select few elements, use ``$$(selector)`` method. 
+### Syntax
 
 ```javascript
-document.$$('div') // return collection of all div elements
+let queryObj = new Query(qeury:string): instanceof Query
+let selectors = queryObj.selectors:string
+// or
+let selectors = Query.get(q1:string):string
 ```
 
-The collection is array which has the elements and two methods: ``each`` and ``parse``.
+``query`` - html/css query
 
-``each`` method gets callback function with 3 parameters: element it self, index of the element in collection and collection itself. 
 
-Here example:
+### Example 
+
 ```javascript
-let array = []
-document.$$('div').each((element,index,collection) => {
-   if(element.innerText.includes('some text'))
-      array.push(element)
-})
+let q1 = 'html>body>div.tabs~.some[type $= "radio and some"]>p+div>.some-id .tab-content~input[disabled] div.some'
+let result = new Query(q1).selectors
+let result1 = Query.get(q1)
+// result and result1 has to be same
+console.log(result)
 ```
 
-``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:
+Result:
 ```javascript
-new Document(htmlText).$$('div')
-.parse('innerText',
-   content=> (content.length > 0) ? true : false)
+[
+   {
+      "query": "div.some",
+      "tag": "div",
+      "classList": [
+         "some"
+      ],
+      "ancestors": [
+         {
+            "query": ".some-id",
+            "classList": [
+               "some-id"
+            ],
+            "parents": [
+               {
+                  "query": "div",
+                  "tag": "div"
+               }
+            ],
+            "prev": {
+               "query": "p",
+               "tag": "p",
+               "parents": [
+                  {
+                     "query": ".some[0]",
+                     "classList": [
+                        "some"
+                     ],
+                     "attribs": [
+                        {
+                           check:(f),
+                           "query": "[type$=\"radio and some\"]",
+                           "name": "type",
+                           "value": "radio and some",
+                           "sign": "$="
+                        }
+                     ]
+                  }
+               ],
+               "prevAny": {
+                  "query": "div.tabs",
+                  "tag": "div",
+                  "classList": [
+                     "tabs"
+                  ],
+                  "parents": [
+                     {
+                        "query": "html",
+                        "tag": "html"
+                     },
+                     {
+                        "query": "body",
+                        "tag": "body"
+                     }
+                  ]
+               },
+               "group": "html>body>div.tabs~.some[0]>p"
+            },
+            "group": "html>body>div.tabs~.some[0]>p+div>.some-id"
+         },
+         {
+            "query": "input[1]",
+            "tag": "input",
+            "attribs": [
+               {
+                  "query": "[disabled]",
+                  "name": "disabled"
+               }
+            ],
+            "prevAny": {
+               "query": ".tab-content",
+               "classList": [
+                  "tab-content"
+               ]
+            },
+            "group": ".tab-content~input[1]"
+         }
+      ],
+      "group": "html>body>div.tabs~.some[type $= \"radio and some\"]>p+div>.some-id .tab-content~input[disabled] div.some"
+   }
+]
 ```
 
-## Building html
+### Attribs and check function
+if attribute has value, attrib object will contain check function with one parameter for value to check. 
 
-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
+let s = Query.get('[test^="some"]')[0]
+console.log(s.attribs[0].check('some value test')) // true
 ```
+

package/selector/readme.md

@@ -0,0 +1,74 @@
+## Selector
+
+Selector is a class which uses HtmlParser for parsing html and Query for parsing html/css query. 
+Everything does Query class support, can be selected (so far available all, except pseudos).
+Selector can be used on frontend and on backend.
+
+
+### Basics
+
+**Syntax**
+```javascript
+let doc = new HtmlSelector(htmlString:string):instanceof HtmlSelector
+doc.$(query:string):object | null
+doc.$$(query:string):array
+doc.$(query:string).$(query:qeury).$$(query:qeury)
+```
+
+``query`` - html/css query for selecting
+``$`` - method return first element or null
+``$$`` - return collection or empty array
+Each element, has ``$`` and ``$$`` methods for selecting descendants 
+
+
+**Example**
+```javascript
+let doc = new HtmlSelector(htmlString)
+let body = doc.$('body') // querySelector('body'):element|null
+let divs = body.$$('div') // body.querySelectorAll('div'):array
+console.log(divs) 
+```
+
+
+#### FrontEnd usage
+```html
+<script src="/node_modules/als-document/document.js"></script>
+<script>
+let htmlText = `
+<div>
+   <span>Another one</span>
+   <div>Some text</div>
+</div>
+`
+let doc = new HtmlSelector(htmlText)
+let span = doc.$('div>span')
+</script>
+```
+
+
+#### BackEnd usage
+```javascript
+let {HtmlSelector} = require('als-document')
+let htmlText = `
+<div>
+   <span>Another one</span>
+   <div>Some text</div>
+</div>
+`
+let doc = new HtmlSelector(htmlText)
+let span = doc.$('div>span')
+```
+
+
+### Extra abilities
+Usualy, browser selector can select by tag name,class, attribute or id.
+HtmlSelector, has extra selecting options, since id,style,class,events and innerHTML - can be selected as attribute.
+
+For example you can do those things:
+```javascript
+doc.$('[style*="display"]') //style includes "display"
+doc.$('[onclick*="console.log"]') //event includes "console"
+doc.$('[class*="btn"][class*="danger"]') //class includes "btn" and "danger"
+doc.$('[id^="tab"]') //id starts with "tab-"
+doc.$('[inner$="00"]') //innerText ends with ".00"
+```

package/selector/selector.js

@@ -0,0 +1,125 @@
+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)
+         }
+      })
+   }
+
+   $(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.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
+   }
+}
+
+try {module.exports = HtmlSelector} catch{}