```
```javascript
var node = el(document.querySelector('#copy'));
node.removeClass('my-class-name');
```
```html
```
#### scrollHeight
##### El Methods / Attributes / scrollHeight.md ([top](#table-of-contents))
Will tell you an elements `scrollHeight` value
```javascript
myDiv.scrollHeight();
// -> Number
```
#### scrollTop
##### El Methods / Attributes / scrollTop.md ([top](#table-of-contents))
Will tell you an elements `scrollTop` value when passed nothing. Will set the node `scrollTop` when passed a number.
```javascript
myDiv.scrollTop();
// -> Number
```
```javascript
myDiv.scrollTop(20);
// -> [ELEMENT]
```
#### scrollWidth
##### El Methods / Attributes / scrollWidth.md ([top](#table-of-contents))
Will tell you an elements `scrollWidth` value
```javascript
myDiv.scrollWidth();
// -> Number
```
#### toggleClass
##### El Methods / Attributes / toggleClass.md ([top](#table-of-contents))
Will toggle a class name on a node. If the class exists, it will be removed, if it does not exist, it will be added.
```javascript
var myDIV = el('div');
myDIV.toggleClass('toggle'); // -> myDIV has class 'toggle'
myDIV.toggleClass('toggle'); // -> myDIV does not have class 'toggle'
```
### Dom Manipulation
#### append
##### El Methods / Dom Manipulation / append.md ([top](#table-of-contents))
Is an interface for `appendChild`, the result being a way to add a `Node` to a parent `Node`.
When a `Node` is appended to an element in the `DOM` it emits a `mount` event.
```javascript
var parent = el('div', { className : 'parent-1' });
var child = el('div', { className : 'child-1' });
parent.append([child]);
```
is the same as
```javascript
var parent = el('div', { className : 'parent-1' }, [
el('div', { className : 'child-1' })
]);
```
```javascript
el('div', { className : 'parent-1' }).append([
el('div', { className : 'child-1' })
]);
```
```HTML
```
#### appendTo
##### El Methods / Dom Manipulation / appendTo.md ([top](#table-of-contents))
Is an interface for `appendChild`, the result being a way to add a child `Node` to a parent `Node`.
When a `Node` is appended to an element in the `DOM` it emmits a `mount` event.
```javascript
var parent = el('div', { className : 'parent-1' });
var child = el('div', { className : 'child-1' });
child.appendTo(parent);
```
```HTML
```
#### before
##### El Methods / Dom Manipulation / before.md ([top](#table-of-contents))
Is an interface for `insertBefore`, the result being a way to add a `Node` before the reference `Node`.
When a `Node` is appended to an element in the `DOM` it emmits a `mount` event.
```javascript
var parent = el('div', { className : 'parent-1' });
var reference = el('div', { className : 'reference-1' });
var before = el('div', { className : 'before-1' });
parent.append([ref]);
reference.before([before]);
```
```HTML
```
#### check
##### El Methods / Dom Manipulation / check.md ([top](#table-of-contents))
Check a checkbox and radio
```javascript
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> true
```
#### clone
##### El Methods / Dom Manipulation / clone.md ([top](#table-of-contents))
Clones an element, is an interface for `Node.cloneNode(true)`
```javascript
var a = el('div', [
el('div', { className : 'child-1' }),
el('div', { className : 'child-2' }),
el('div', { className : 'child-3' })
]);
var b = a.clone();
```
```html
```
#### disable
##### El Methods / Dom Manipulation / disable.md ([top](#table-of-contents))
Disables an element by setting it's `disabled` attribute to `disabled`
```javascript
var a = el('div').disable();
```
Result
```html
```
#### enable
##### El Methods / Dom Manipulation / enable.md ([top](#table-of-contents))
Enables an element by removing it's `disabled` attribute
```html
```
```javascript
var a = el(document.getElementById('disabled')).enable();
```
```html
```
#### focus
##### El Methods / Dom Manipulation / focus.md ([top](#table-of-contents))
Will `focus` an element. This will only work if the element is in the `document.body` and if it has an `tabindex` attribute.
```javascript
var a = el('div');
a.appendTo(document.body).focus();
```
### `html` [top](#methods)
Is an interface for `innerHTML`. When passed no arguments, it will return the value of `innerHTML`.
```javascript
var a = el('div');
a.html('test');
// a.node.innerHTML -> 'test'
// a.html() -> 'test'
```
#### html
##### El Methods / Dom Manipulation / html.md ([top](#table-of-contents))
Sets the `innerHTML` value of a node.
```javascript
var target = el(document.querySelector('.target-node'));
target.html('
');
```
Passing it no arguments will return the value of `innerHTML`
```javascript
var target = el(document.querySelector('.target-node'));
target.html();
// -> '
'
```
#### prepend
##### El Methods / Dom Manipulation / prepend.md ([top](#table-of-contents))
Will append a child element in the first position of the parent node.
```javascript
var parent = el('div', { className : 'parent' }, [
el('div', { 'first-child' })
]);
var child = el('div', { className : 'second-child' });
```
```html
```
```javascript
parent.prepend([child]);
```
```html
```
#### prependTo
##### El Methods / Dom Manipulation / prependTo.md ([top](#table-of-contents))
Will append a child element in the first position of the parent node.
```javascript
var child = el('div', { className : 'second-child' });
var parent = el('div', { className : 'parent' }, [
el('div', { 'first-child' })
]);
```
```html
```
```javascript
child.prependTo(parent);
```
```html
```
#### remove
##### El Methods / Dom Manipulation / remove.md ([top](#table-of-contents))
Will remove a `Node` from it's parent.
```javascript
var a = el('div', { className : 'parent' });
var b = el('div', { className : 'first-child' });
a.append(b);
```
```html
```
```javascript
b.remove();
```
```html
```
#### removeChild
##### El Methods / Dom Manipulation / removeChild.md ([top](#table-of-contents))
Will remove a child `Node`.
```javascript
var a = el('div', { className : 'parent' });
var b = el('div', { className : 'first-child' });
a.append(b);
```
```html
```
```javascript
a.removeChild(b);
```
```html
```
#### replaceWith
##### El Methods / Dom Manipulation / replaceWith.md ([top](#table-of-contents))
Replaces a target node with a new node.
```javascript
var targetNode = el(document.querySelector('.target-node'));
var newNode = el('div', { className : 'new-node' });
targetNode.replaceWith(newNode);
```
#### select
##### El Methods / Dom Manipulation / select.md ([top](#table-of-contents))
Provides an interface to select text ranges and select the `option` node.
Query
```javascript
var a = el(document.querySelector('.my-input'));
a.select();
// -> [0, 2]
```
Set
```javascript
var a = el(document.querySelector('.my-input'));
a.select(0, 2);
```
By entering a single value, the cursor will be placed without selecting.
- Negative values start from the end.
```javascript
a.select(-1);
```
This example selects from the first letter to 3 letters from the end.
```javascript
a.select(0, -3);
```
`select`
```javascript
var a = el('select', [
el('option'),
el('option')
]);
a.select(0);
// -> will select the first option node
```
#### style
##### El Methods / Dom Manipulation / style.md ([top](#table-of-contents))
An interface to edit the style of a node, it can be used in 2 different ways.
- `el.style([ String property ], [ String|Number value])`
- `el.style([ Object property and values ])`
The property must be the JavaScript named property. Vendor prefixes are not necessary.
### Value and property
```javascript
var a = el('div');
a.style('fontSize', 13);
```
### Object
```javascript
var a = el('div');
a.style({
fontSize : 13,
fontWeight : 'bold'
});
```
### Get computed styles
```javascript
div.style();
// -> [ Object ]
```
```javascript
div.style('fontSize');
// -> 13px
```
#### text
##### El Methods / Dom Manipulation / text.md ([top](#table-of-contents))
Sets the text value of a node, uses `textContent` as opposed to `innerHTML`, this distinction is important since any HTML passed as a string will be converted to text.
```javascript
var target = el(document.querySelector('.target-node'));
target.text('my text');
```
Passing it no arguments will return the value of `textContent`
```javascript
var target = el(document.querySelector('.target-node'));
target.text();
// -> 'my text'
```
#### uncheck
##### El Methods / Dom Manipulation / uncheck.md ([top](#table-of-contents))
Uncheck a checkbox and radio
```javascript
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> true
a.uncheck();
a.isChecked();
// -> false
```
#### value
##### El Methods / Dom Manipulation / value.md ([top](#table-of-contents))
Query
```javascript
var a = el(document.querySelector('.my-input'));
a.value();
// -> 'My text'
```
Set
```javascript
var a = el(document.querySelector('.my-input'));
a.value('New text');
```
### Events
#### doubleclick
##### El Methods / Events / doubleclick.md ([top](#table-of-contents))
A listener which is triggered when the user double clicks on an element.
- `on('doubleclick', [ Function ])`
#### off
##### El Methods / Events / off.md ([top](#table-of-contents))
This is an interface for `removeEventListener`, with the main difference being that you don't have to pass a function as a second argument. And when no second argument is passed, all functions associated with the event will be removed.
```javascript
var element = el('div');
function logToConsole() {
console.log('click');
}
element.on('click', logToConsole);
```
By clicking on `element` 'click' will be logged to the console.
```javascript
element.off('click', logToConsole);
```
In this example, we are attaching 3 functions to `element`
```javascript
element.on('click', click1);
element.on('click', click2);
element.on('click', click3);
```
We will now remove all event listeners attached to the `click` event by passing nothing as a second argument.
```javascript
element.off('click');
```
#### on
##### El Methods / Events / on.md ([top](#table-of-contents))
This is an interface for `addEventListener`, with the main difference being how functions are tracked internally.
```javascript
var element = el('div');
element.on('click', function () {
console.log('click');
});
div.appendTo(document.body);
```
Now when you click on the element, it will log `click` to the console.
#### once
##### El Methods / Events / once.md ([top](#table-of-contents))
Will add an event listener which will execute once, then remove the listener.
```javascript
var element = el('div');
element.once('click', function () {
console.log('click');
});
div.appendTo(document.body);
```
Now when you click on the element, it will log `click` to the console. Any additional clicks will not trigger the event.
#### trigger
##### El Methods / Events / trigger.md ([top](#table-of-contents))
This will trigger all listeners for matching event name.
```javascript
var node = el('div');
el.on('click', function myClickHandler() {
// Do something
});
el.on('click', function myClickSecondHandler() {
// Do something
});
el.trigger('click');
// -> will execute 'myClickHandler' and 'myClickSecondHandler'
```
#### Input
##### El Methods / Events / Input.md ([top](#table-of-contents))
Input has been unified across browsers, so that when you use `on('input')` you will have consistent performance on Internet Explorer, Chrome and Firefox.
In this example, we'll write a component to replace creating an input with `el('input', { type : 'text' })` with a Component, so that the API becomes `el(Editbox)`.
```javascript
function Editbox() {
var self = this;
this.node = {
document : el('input',
{
type : 'text',
onInput : function (e) {
self.trigger('input', e);
}
}
)
};
}
Editbox.prototype.value = function (value) {
var f = this.node.document.value;
if (!value) {
return f();
}
f(value);
};
var a = el(Editbox, {
onInput : function (e) {
console.log(this.value());
}
});
```
#### Drag And Drop
##### El Methods / Events / Drag And Drop.md ([top](#table-of-contents))
- `on('dragstart', [ Function ])`
- `on('dragmove', [ Function ])`
- `on('dragend', [ Function ])`
You must access the `detail` property to get `pageX` and `pageY` properties.
Additional properties:
- `startX`
- `startY`
- `distanceX`
- `distanceY`
### `startX` and `startY`
The `X` and `Y` position of where drag started
### `distanceX` and `distanceY`
The distance travelled in `pixels` between the start position and the current position.
### Predicates
#### contains
##### El Methods / Predicates / contains.md ([top](#table-of-contents))
```javascript
var a;
var p = el('div', [
a = el('div')
]);
p.contains(a);
// -> true
```
Can also accept multiple arguments
```javascript
var a;
var b;
var p = el('div',
a = el('div'),
b = el('div')
);
p.contains(a, b);
// -> true
```
Can also accept an array
```javascript
var a;
var b;
var c;
var p = el('div',
a = el('div'),
b = el('div'),
c = el('div')
);
// This is valid
p.contains([a, b, c]);
// is is this
p.contains([a, b] c);
// They will both return 'true'
```
#### hasClass
##### El Methods / Predicates / hasClass.md ([top](#table-of-contents))
Returns `boolean` value for whether a `Node` has a className.
```javascript
var a = el('div', { className : 'test' });
a.hasClass('test')
// -> true
```
#### hasParent
##### El Methods / Predicates / hasParent.md ([top](#table-of-contents))
```javascript
var myParent = el('div', [
var myChild = el('div')
]);
myChild.hasParent(myParent);
// -> true
```
#### isChecked
##### El Methods / Predicates / isChecked.md ([top](#table-of-contents))
Returns a `[ Boolean ]` value of the checked state of a node.
```javascript
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> false
```
#### isFocused
##### El Methods / Predicates / isFocused.md ([top](#table-of-contents))
```javascript
var myFocus = el('label', { tabIndex : 0 });
myFocus.isFocused();
// -> false
myFocus.focus();
myFocus.isFocused();
// -> true
```
#### isVisible
##### El Methods / Predicates / isVisible.md ([top](#table-of-contents))
This one requires a bit of explaining, it doesn't only check for 'visibility'.
- Checks that the node isn't off screen.
- Or that it's `display` property isn't set to `none`.
- Or that `overflow` isn't set to `hidden` and ensures the `height` and `width` are larger than 0.
```javascript
var myNode = el('div', {
style : {
position : 'absolute',
left : 0,
top : 0
}
}).appendTo(document.body);
myFocus.isVisible(); [top](#methods)
// -> true
myFocus.style('left', -100000);
myFocus.isVisible();
// -> false
```
Or
```javascript
var myNode = el('div').appendTo(document.body);
myFocus.isVisible();
// -> true
myFocus.style('display', 'none');
myFocus.isVisible();
// -> false
```
The idea here is that this check is smart, so it knows whether the node is visible or not in various contexts.
### Query
#### children
##### El Methods / Query / children.md ([top](#table-of-contents))
Returns an array of direct descendants wrapped in the `el` constructor. This is an interface for `childNodes` with a filter for a `NodeType` equal to `1` (`HTMlElement`)
```javascript
var a = el('div', [
el('div', { className : 'child-1' }),
el('div', { className : 'child-2' }),
el('div', { className : 'child-3' })
]);
a.childNodes;
```
```html
```
You can also specify an index
```javascript
a.children(0);
// ->
```
You can also use negative numbers
```javascript
a.children(-1);
// ->
```
You can also `slice` the child array
```javascript
a.children(1, -1);
// ->
// ->
```
#### closest
##### El Methods / Query / closest.md ([top](#table-of-contents))
Returns the closest parent matching the query.
```javascript
var farthest;
var parent = el('div', { className : 'closest' }, [
farthest = el('div', { className : 'farthest' })
]);
farthest.closest('.closest');
// -> HTML Element : div.closest
```
#### find
##### El Methods / Query / find.md ([top](#table-of-contents))
Returns an array of matches as a result of executing the query.
```javascript
var parent = el('div', { className : 'closest' }, [
el('div', { className : 'find' }),
el('div', { className : 'find' })
]);
parent.find('.find');
// -> HTML NodeList : [ div.find, div.find ]
```
#### hasClass
##### El Methods / Query / hasClass.md ([top](#table-of-contents))
```javascript
var node = document.querySelector('.class-name');
el(node).hasClass('class-name');
// -> true
```
#### offset
##### El Methods / Query / offset.md ([top](#table-of-contents))
Returns the `top`, `left`, `width`, `height` relative to the `body`'s coordinates. It is an interface for `this.node.getBoundingClientRect()`
```javascript
var parent = el('div');
parent.appendTo(document.body);
parent.offset();
/* -> {
height : [Number],
left : [Number],
top : [Number],
width : [Number]
}
*/
```
#### parent
##### El Methods / Query / parent.md ([top](#table-of-contents))
If the `node` has a parent, it will return it's parent. Otherwise, it will return `false`
```javascript
var child = el('div');
child.parent();
// -> false
child.appendTo(document.body);
child.parent();
// -> HTML Element : document.body
```
#### parents
##### El Methods / Query / parents.md ([top](#table-of-contents))
Returns an array of parents, from first to last.
```javascript
var child;
el('div', { className : 'parent-1' }, [
el('div', { className : 'parent-2' }, [
child = el('div', { className : 'parent-3 '})
])
]);
child.parents();
// -> [Array]
```
#### parentsUntil
##### El Methods / Query / parentsUntil.md ([top](#table-of-contents))
Takes a predicate as an argument and returns the first `truthy` match.
```javascript
div.parentsUntil(function (p) { return p.tagName === 'h1' });
```
#### scrollWidth
##### El Methods / Query / scrollWidth.md ([top](#table-of-contents))
Returns the scrollWidth property of a `node`.
```javascript
node.scrollWidth();
// -> Number
```
#### siblings
##### El Methods / Query / siblings.md ([top](#table-of-contents))
Returns a selected Node and it's siblings filtered to show only nodes of type `1`, which are HTML element nodes, this excludes text nodes.
```javascript
var selected;
el('div', { className : 'parent-1' }, [
selected = el('div', { className : 'sibling-1' }),
el('div', { className : 'sibling-2' }),
el('div', { className : 'sibling-3' }),
el('div', { className : 'sibling-4' })
]);
selected.siblings();
```
```html
```
#### textNodes
##### El Methods / Query / textNodes.md ([top](#table-of-contents))
Returns all the `Text Nodes` which are a child of a selected node.
```javascript
var selected = el('div', { className : 'parent-1' }, ['text node']);
selected.textNodes();
// -> [Text Node]
```
***
## Tests
```
1. addClass............................................................ ✅
2. after............................................................... ✅
3. after_single_child.................................................. ✅
4. append.............................................................. ✅
5. appendTo............................................................ ✅
6. appendTo_onMount.................................................... ✅
7. append_component.................................................... ✅
8. append_single_node.................................................. ✅
9. append_undefined.................................................... ✅
10. attr................................................................ ✅
11. before.............................................................. ✅
12. before_single_child................................................. ✅
13. check............................................................... ✅
14. children............................................................ ✅
15. childrenFirst....................................................... ✅
16. childrenReplace..................................................... ✅
17. childrenSlice....................................................... ✅
18. classList........................................................... ✅
19. classList_svg....................................................... ✅
20. clone............................................................... ✅
21. closest............................................................. ✅
22. component........................................................... ✅
23. componentCheckChildren.............................................. ✅
24. componentOnMount.................................................... ✅
25. componentRefs....................................................... ✅
26. componentWithClassAndChildren....................................... ✅
27. componentWithNames.................................................. ✅
28. componentWithRenderMethod........................................... ✅
29. containsArray....................................................... ✅
30. createElement_with_style............................................ ✅
31. createSVGElement_with_style......................................... ✅
32. disable............................................................. ✅
33. emptyAttr........................................................... ✅
34. find................................................................ ✅
35. find_predicate...................................................... ✅
36. find_tagName........................................................ ✅
37. find_wildcard....................................................... ✅
38. fn.................................................................. ✅
39. focus............................................................... ✅
40. hasClass............................................................ ✅
41. hasClass_array...................................................... ✅
42. is.................................................................. ✅
43. isDisabled.......................................................... ✅
44. isFocused........................................................... ✅
45. isVisible........................................................... ✅
46. is_wildcard......................................................... ✅
47. mapChildren......................................................... ✅
48. name................................................................ ✅
49. off................................................................. ✅
50. offset.............................................................. ✅
51. on.................................................................. ✅
52. onMount............................................................. ✅
53. onMount_component................................................... ✅
54. onUnmount........................................................... ✅
55. once................................................................ ✅
56. parent.............................................................. ✅
57. parents............................................................. ✅
58. prepend............................................................. ✅
59. prependTo........................................................... ✅
60. prepend_component................................................... ✅
61. remove.............................................................. ✅
62. removeChild......................................................... ✅
63. removeClass......................................................... ✅
64. removeClassArray.................................................... ✅
65. removeClass_not_there............................................... ✅
66. replaceWith......................................................... ✅
67. scrollHeight........................................................ ✅
68. scrollTop........................................................... ✅
69. scrollWidth......................................................... ✅
70. select.............................................................. ✅
71. siblings............................................................ ✅
72. style............................................................... ✅
73. style_clear......................................................... ✅
74. style_object........................................................ ✅
75. style_translateY.................................................... ✅
76. svg_addClass........................................................ ✅
77. text................................................................ ✅
78. textNodes........................................................... ✅
79. toggleClass......................................................... ✅
80. trigger............................................................. ✅
81. uncheck............................................................. ✅
82. value............................................................... ✅
83. html_remove-children................................................ ✅
84. hasClass_array_array-is-className................................... ✅
```