npm - als-document - Versions diffs - 0.5.1 → 0.6.0 - Mend

als-document 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/readme.md CHANGED Viewed

@@ -1,62 +1,135 @@
-# Als-document
+# als-document
-Builded from scratch and tested.
-All tested with als-test.
+Build virtual dom from string and manage it, similar you do it on browser.
+Now it's fast and simple!
-Als-document is a library which includes 3 instruments:
+## About
+Als-document is a library which includes 4 instruments:
 * Html parser - for fast html string parsing and building dom tree
 * Html query parser - for destructing css/html query to selectors to array of objects
 * Html selector - for selecting elements with css/html query inside parsed dom tree
+* Document - extending html selector with managing tools
+- [als-document](#als-document)
+  - [About](#about)
+  - [Basics](#basics)
+    - [Example](#example)
+  - [Element properties and methods](#element-properties-and-methods)
+  - [Selecting elements](#selecting-elements)
+    - [Extra abilities](#extra-abilities)
+  - [Add/rearrange/remove element](#addrearrangeremove-element)
+    - [Example](#example-1)
+  - [Changing attributes](#changing-attributes)
+    - [Inline style](#inline-style)
+    - [Classlist](#classlist)
+  - [HtmlParser documentation](#htmlparser-documentation)
+    - [new in 0.6](#new-in-06)
+    - [Syntax](#syntax)
+    - [Frontend example](#frontend-example)
+    - [Backend example](#backend-example)
+  - [Query documentation](#query-documentation)
+    - [Syntax](#syntax-1)
+    - [Example](#example-2)
+    - [Attribs and check function](#attribs-and-check-function)
+## Basics
+You can use als-document on node.js and in browser.
+For using in browser, just include:
+ ``node_modules/als-document/document.js``
+ or ``node_modules/als-document/document.min.js``.
-## 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
+```html
+<script src="node_modules/als-document/document.min.js"></script>
+```
-**Syntax**
+For using on backend, require from ``als-document``.
 ```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)
+let {HtmlSelector,HtmlParser,Query,Document} = require('als-document')
 ```
-* ``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
+Basicly, you need only Document. Because Document uses all the rest. But you can use any class separatly too.
-**Example**
+### 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 htmlText = /*html*/`
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      <title>Test document</title>
+   </head>
+   <body>
+      <div id="test">Hello world!</div>
+   </body>
+</html>
 `
-let doc = new HtmlSelector(htmlText)
-let span = doc.$('div>span')
-</script>
+let doc = new Document(htmlText)
+let body = doc.$('body')
+let div = body.$('#test')
+console.log(div.innerHTML) // Hello world!
+div.before = '<div id="test1">Another div</div>'
+console.log(div.prev.id) // test1
 ```
-#### BackEnd usage
+## Element properties and methods
+Each element (except root and text elements, which has no all) has:
+* Variables
+  * ``attribs`` - element's attributes as object
+  * ``parent`` - parent element
+  * ``children`` - array of children include text nodes
+  * ``type`` - tag or text or root
+  * ``classList`` - array with classes and methods for managing classList
+    * ``add`` - adds new class to classList
+    * ``remove`` - removes class from classList
+    * ``toggle`` - toggle class inside classList
+  * ``index`` - start index of element inside elements list
+  * ``endIndex`` - end index of element inside elements list
+  * ``id`` - getter for element's id (return id or null)
+  * ``level`` - level in dom tree
+  * ``text`` - parsed text for tag and for text element
+  * ``tab`` - space for formating innerHTML. default:tab= '   '
+  * ``n`` -  separate elements in innerHTML by n. default n = '\n'
+  * ``style`` - Proxy array of styles with camelCase property name
+* getters
+  * ``innerText`` - concats all children's text together | ''
+  * ``innerHTML`` - return innerHTML for element
+  * ``outerHTML`` - return outerHTML for element
+  * ``ancestors`` - return array of ancestors
+  * ``root`` - root element
+  * ``html`` - HtmlParser object for all elements
+  * ``$elements`` - all parsed elements
+  * ``next`` - next element or null
+  * ``prev`` - previous element or null
+  * ``childIndex`` - index of child in parent.children
+  * ``id`` - getting id of element
+* Setters
+  * ``before`` - adding new/existing element before the element
+  * ``after`` - adding new/existing element after the element
+  * ``first`` - adding new/existing element as first child of the element
+  * ``last`` - adding new/existing element as last child of the element
+* Methods
+  * ``getAttribute(name)`` - return value of attribute or null
+  * ``attr(name,value``) - get,set,remove attribute
+  * ``remove()`` - removing element
+  * ``insert(element,position)`` - inserting/rearanging element
+  * ``$`` - for selecting any descendant of the element
+  * ``$$`` - for selecting collection of descendants of the element
+## Selecting elements
+For select elements inside virtual dom, you can use ``HtmlSelector`` or ``Document``.
+If you need only selecting, use ``HtmlSelector``, otherwise use ``Document``.
+Document is extended HtmlSelector.
+two methods:
+* ``$`` - for selecting first element
+* ``$$`` - for selecting collection
 ```javascript
 let {HtmlSelector} = require('als-document')
 let htmlText = `
@@ -67,12 +140,16 @@ let htmlText = `
 `
 let doc = new HtmlSelector(htmlText)
 let span = doc.$('div>span')
+let divs = doc.$$('div')
 ```
+So far, available almost all possible selectors, without pseudo class and pseudo element selector.
+For example, you can select ``div>.some span+input.some-class[checked]``.
+But you can't select ``input:checked``.
 ### 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.
+HtmlSelector/Document, has extra selecting options, since id,style,class,events and innerHTML - can be selected as attribute.
 For example you can do those things:
 ```javascript
@@ -82,13 +159,113 @@ 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
+## Add/rearrange/remove element
+Document has methods and setters for changing virtual dom. Here are the methods:
+```javascript
+let newElement = string || object // html text or another selected element
+let position = number [0,1,2,3] // 0-before element,1-first child,2-last-child,3-after element
+element.insert(newElement,position):object // insert new element or rearange existing element
+element.remove() // removig existing element from dom tree
+element.before = newElement // adding new element before the element
+element.after = newElement // adding new element after the element
+element.first = newElement // adding new element as first child of element
+element.last = newElement // adding new element as last child of element
+```
+> before,after,first,last are getters which uses insert method.
+### Example
+```javascript
+// create new element and insert it before first div
+   doc.$('div').insert('<div>new element</div>',0)
+   doc.$('div').before = '<div>new element</div>'
+// Rearange div#some as first child for first div
+   doc.$('div').insert(doc.$('div#some'),1)
+   doc.$('div').first = doc.$('div#some')
+```
+## Changing attributes
+There are few ways to get element's attributes:
+```javascript
+doc.$('div').attribs.name // available on HtmlParser and Document
+doc.$('div').getAttribute(name) // available on HtmlParser and Document
+doc.$('div').attr(name) // not available on HtmlParser
+```
+For setting or removing attributes, use attr method (available only in Document).
+Here the syntax:
+```javascript
+doc.$('input').attr('checked','') // add checked attribute
+doc.$('div#some').attr('title','Some title') // set title="Some title"
+doc.$('input').attr('disabled',null) // remove disabled attribute
+```
+If you changing the class attribute with attr, classList changing too.
+> Don't remove or change style and id with attr
+> Dont't remove class with attr
+element.id has getter and setter
+* getter - return id | null
+* setter - changing id in element.attribs.id
+### Inline style
+``element.style`` is a Proxy object, which means you can't get all style properties as object.
+To get styles object use ``element.style.target``.
+Syntax:
+```javascript
+let element = doc.$('[style]')
+// Get style object with camelCase property names
+   element.style.target
+// Get value for specific style property
+   element.style.backgroundColor // value || undefined
+// Set new value for existing or for new property
+   element.style.backgroundColor = 'blue'
+// Remove property from style and from attribs.style
+   delete element.style.backgroundColor
+```
+### Classlist
+``ClassList`` is array with existing classes splited from ``attribs.class``.
+Syntax:
+```javascript
+let element = doc.$('[class]')
+// The folowing methods, changing element.attribs.class too.
+element.add(newClassName)
+element.remove(existingClassName)
+element.toggle(className)
+```
+## HtmlParser documentation
 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) inside element's object.
+### new in 0.6
+  * fixed
+    * bug with text for elements with events - solved
+    * elements for single tag - solved
+  * Updates
+    * added root getter to each element
+    * added $elements getter to each element
+    * next and prev,childIndex now getters
+    * added childIndex,next,prev,ancestors,parent to text element
+    * root has innerHTML
+    * option to format innerHTML
+      * by default element.tab = '   '
+      * by default element.n = '\n'
 ### Syntax
@@ -103,8 +280,6 @@ HtmlParser.parse(html):object // parsed.root
 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
@@ -113,10 +288,18 @@ Each element, except root and text elements has:
 * 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
+* tab - space for formating innerHTML. default:tab= '   '
+* n -  separate elements in innerHTML by n. default n = '\n'
+* getters
+  * innerText - concats all children's text together | ''
+  * innerHTML - return innerHTML for element
+  * outerHTML - return outerHTML for element
+  * ancestors - return array of ancestors
+  * root - root element
+  * added $elements - all parsed elements
+  * next - next element or null
+  * prev - previous element or null
+  * childIndex - index of child in parent.children
 * getAttribute(name) - return value of attribute or null
 * style:[] - array of styles with camelCase property name
@@ -125,6 +308,7 @@ Example for parsed.document
 ```javascript
 {
    type:'root',
+   ...,
    children:[
       {
          attribs: {},
@@ -178,23 +362,25 @@ Example for parsed.document
 ### Frontend example
+You can use:
+* node_modules/als-document/document.js - original file
+* node_modules/als-document/document.min.js - minimized file
 ```html
-<script src="/node_modules/als-document/parser/parser.js"></script>
+<script src="node_modules/als-document/document.min.js"></script>
 <script>
-let result = new HtmlParser(htmlString)
-console.log(result.root)
-// Or with static method
-console.log(HtmlParser.parse(html))
+   let result = new HtmlParser(htmlString)
+   console.log(result.root)
+   // Or with static method
+   console.log(HtmlParser.parse(html))
 </script>
 ```
 ### Backend example
 ```javascript
-const {HtmlParser} = require('als-htmlparser')
+const {HtmlParser} = require('als-document')
 let result = new HtmlParser(htmlString)
 console.log(result.root)
@@ -203,15 +389,18 @@ console.log(HtmlParser.parse(html))
 ```
-## Query
+## Query documentation
 Query is a class for parsing selectors inside html query. Query not supporting pseudo selectors so far.
 You can use Query on frontend and on backend.
 Query can be used on fronten and on backend.
+You can use:
+* node_modules/als-document/document.js - original file
+* node_modules/als-document/document.min.js - minimized file
 Frontend:
 ```html
-<script src="/node_modules/als-document/query/query.js"></script>
+<script src="node_modules/als-document/document.min.js"></script>
 ```
 Backend:
@@ -334,3 +523,4 @@ let s = Query.get('[test^="some"]')[0]
 console.log(s.attribs[0].check('some value test')) // true
 ```

package/selector/selector.js CHANGED Viewed

@@ -1,20 +1,20 @@
+let Query = require('../query/query')
+let HtmlParser = require("../parser/parser")
 class HtmlSelector {
    constructor(html) {
       if(typeof html == 'string') {
-         html = new HtmlParser(html)
-         this.html = html
-         this.elements = html.elements
-         this.makeSelectable()
+         this.html = new HtmlParser(html)
+         this.elements.forEach((element,i) => {this.makeSelectable(element)});
       } 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)
-         }
-      })
+   get elements() {return this.html.elements}
+   makeSelectable(element) {
+      if(element.type == 'tag' && element.status !== 'close') {
+         element.$$ = (query) => this.$$(query,element.index,element.endIndex)
+         element.$ = (query) => this.$(query,element.index,element.endIndex)
+      }
    }
    $(query,start=0,end=this.elements.length) {
@@ -120,6 +120,7 @@ class HtmlSelector {
       if(passedTests == attribs.length) return true
       else return false
    }
 }
-try {module.exports = HtmlSelector} catch{}
+module.exports = HtmlSelector

package/test/test.js CHANGED Viewed

@@ -4,12 +4,14 @@ let Test = require('als-test')
 let parser = require('../parser/test')
 let query = require('../query/test')
 let selector = require('../selector/test')
+let document = require('../document/test')
 async function run() {
    await Test.run('Document tests',[
       parser,
       query,
-      selector
+      selector,
+      document
    ],{html1,html2})
    Test.summary()

package/parser/readme.md DELETED Viewed

@@ -1,121 +0,0 @@
-## HtmlParser
-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) inside element's object.
-### Syntax
-```javascript
-let parsed = new HtmlParser(htmlString:string):instanceof HtmlParser
-parsed.root : circular object
-// static method
-HtmlParser.parse(html):object // parsed.root
-```
-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
-{
-   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",
-         ...
-      }
-   ]
-}
-```
-### Frontend example
-```html
-<script src="/node_modules/als-document/parser/parser.js"></script>
-<script>
-let result = new HtmlParser(htmlString)
-console.log(result.root)
-// Or with static method
-console.log(HtmlParser.parse(html))
-</script>
-```
-### Backend example
-```javascript
-const {HtmlParser} = require('als-htmlparser')
-let result = new HtmlParser(htmlString)
-console.log(result.root)
-// Or with static method
-console.log(HtmlParser.parse(html))
-```

package/selector/readme.md DELETED Viewed

@@ -1,74 +0,0 @@
-## 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"
-```