https://github.com/dwqs/tiny-dom-helpers
:last_quarter_moon_with_face: :new_moon_with_face: :first_quarter_moon_with_face: Tiny dom helpers, supports IE9 +.
https://github.com/dwqs/tiny-dom-helpers
dom dom-helpers element
Last synced: over 1 year ago
JSON representation
:last_quarter_moon_with_face: :new_moon_with_face: :first_quarter_moon_with_face: Tiny dom helpers, supports IE9 +.
- Host: GitHub
- URL: https://github.com/dwqs/tiny-dom-helpers
- Owner: dwqs
- License: mit
- Created: 2017-08-04T14:04:34.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-05T17:20:06.000Z (over 8 years ago)
- Last Synced: 2024-04-26T11:20:18.983Z (about 2 years ago)
- Topics: dom, dom-helpers, element
- Language: JavaScript
- Homepage:
- Size: 151 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://standardjs.com) [](https://travis-ci.org/dwqs/tiny-dom-helpers)   
# tiny-dom-helpers
Tiny dom helpers, only supports IE9+.
## Installation
Install the pkg with npm:
```
npm install tiny-dom-helpers --save
```
or yarn
```
yarn add tiny-dom-helpers
```
or bower
```
bower install tiny-dom-helpers
```
You can also hot-link the CDN version: https://unpkg.com/tiny-dom-helpers/dist/index.js, `tinyDOM` is exposed to `window` object.
## Usage
If we have some dom elements as follows:
```html
33333
11111
Hello
000
22222
```
```
import { css, offset, createTinyDOM } from 'tiny-dom-helpers';
// get dom element
let span = document.getElementById('span');
let s = createTinyDOM(span);
s.toArray();
// => ['test1', 'test2']
s.addClass('tt t2')
s.toArray();
// => ['test1', 'test2', 'tt', 't2']
s.removeClass('test2 t2')
// or s.removeClass(/2/);
s.toArray();
// => ['test1', 'tt']
s.toggle('rr')
s.toggle('tt')
s.toArray();
// => ['test1', 'rr']
s.hasClass('rr')
// => true
s.next();
// => the next element of span, eg: span#test
s.parent();
// => the parent element of span, eg: p
s.offsetParent();
// => the closest positioned element of span, eg: div#div
s.previous();
// => the previous element of span, eg: div#div2
css(span, 'width', null)
// => span's width, eg: 20px
css(span, 'font-size', ":after")
// => eg: 10px
offset(span)
// => the position of span relative to ducument. eg: {top: 100, left: 100, width: 10, height: 20}
```
## API
#### css(node, properyty, pseudoEle = null)
Return the css properyty of node or node's pseudo-element.
#### offset(node)
Return the size and position of the element's bounding box, relative to the document.
#### createTinyDOM(node)
Return an instance of TinyDOM.
#### .toArray()
Return an array of the class names on the element.
#### .hasClass(class)
Check whether the element has the given class and return a boolean.
#### .addClass(class)
Add the given class in the class list if it doesn't exist and return the instance.
#### .removeClass(class|regexp)
Remove the given class in the class list if it's already exist and return the instance.
#### .toggle(class)
Toggle the given class in the class list and return the instance.
#### .replaceClass(oldClass, newClass)
Replaces an existing class with a new class and return the instance.
#### .text(text = '')
Text's getter/setter of the element and return the text.
#### .attr(prop, value = '')
Attributes' getter/setter of the element and return the prop value.
#### .getNodeName()
Return the node name of the element.
#### .width(pseduo-element=null)
Return the width of the element or it's pseudo-elements.
#### .height(pseduo-element=null)
Return the height of the element or it's pseudo-elements.
#### .rect()
Return the size and position of the element's bounding box, relative to the viewport.
#### .offsetParent()
Return the object which is the closest positioned containing element.
#### .positions()
Return the size and position of the element's bounding box, relative to the offsetParent.
#### .previous()
Return the previous HTMLElment of the element.
#### .next()
Return the next HTMLElment of the element.
#### .parent()
Return the parent HTMLElment of the element.
#### .contains(node)
Check whether the given node is the element's children and return a boolean.
### LICENSE
MIT