Flatman Client 1.10.2
MIT
License:✅ All 84 tests pass
Table of Contents
Overview
-
Description
-
Installation
-
Notes
-
Component
-
Initialing A Component
-
Mixing A Component
-
The Options Object
-
Writing A Component
-
-
Examples
-
Nesting
-
Basic Usage
-
Wrapping The Dom
-
What You Can Pass As An Object
-
-
Functional Methods
-
Basics
-
el.addClass
-
el.isComponent
-
-
El Methods
-
Attributes
-
addClass
-
attr
-
className
-
copy
-
name
-
removeClass
-
scrollHeight
-
scrollTop
-
scrollWidth
-
toggleClass
-
-
Dom Manipulation
-
Events
-
doubleclick
-
off
-
on
-
once
-
trigger
-
Input
-
Drag And Drop
-
-
Predicates
-
Query
-
Description
top)
Description.md (- Create nodes with a simple interface which will be very familiar.
- Get an API to simplify DOM manipulation
- Plugin architecture to extend the prototype
Thanks to FRZR for some help for clearing up the "child" problem https://freezer.js.org/minimum-viable-view-library/
Installation
top)
Installation.md (Include the script in your body
tag, or head
, I think it's wise to place it in the body
, at the bottom.
<script src="createNode.min.js"></script>
Notes
top)
Notes.md (I use this on production, and I would like some help on it. Thanks. The goal is to keep it as simple and light as possible. It's a bit of a bastard child between FRZR and jQuery — a somewhat attractive & useful bastard.
Component
Initialing A Component
top)
Component / Initialing A Component.md (The most basic way to initialize a component is like this:
el('Component')
It takes the same type of arguments that a regular el
takes.
A component and an element are designed to be similar. This means you can do things like this:
el('Component', [
el('div'),
el(Component)
]);
Mixing A Component
top)
Component / Mixing A Component.md (Special considerations
Wrapped components cannot share method names which are shared with 'el()' node. They will be excluded.
Component.create('interior', {
myExposedMethod() {
// Do stuff
},
render() {
return el('div', {
name : 'interior',
className : 'component'
});
}
});
Component.create('my-component', Component.wrap('interior', {
constructor(props) {
// Set my stuff
},
thisMethod() {
// do stuff
},
onHover() {
// Do stuff
this.node.name.trigger('hover');
},
render(props) {
el('div', {
onClick : props.onClick,
onHover : () => this.onHover()
}, [
props.component // <-- The 'interior' component
])
}
}));
var a = el('my-component');
a.myExposedMethod();
a.thisMethod();
The Options Object
top)
Component / The Options Object.md (You can pass your component any options.
- Keys will be checked for matching methods
- The options will be passed as an argument to the Component constructor
el('Component', {
className : 'this-class',
onClick : function () {},
})
Writing A Component
top)
Component / Writing A Component.md (Component.create('my-component', {
constructor(props) {
// Set my stuff
},
onHover() {
// Do stuff
},
touchInner() {
this.node.inner.trigger('touch');
},
render(props) {
el('div', {
onClick : props.onClick,
onHover : () => this.onHover()
}, [
// Names will be added as a reference to 'this.node',
// name : 'inner' becomes this.node.inner
el('div', { name : 'inner' })
])
}
});
Examples
Nesting
top)
Examples / Nesting.md (el('div', [
el('div', { className : 'child'}),
el('div', { className : 'child-2'})
]);
Basic Usage
top)
Examples / Basic Usage.md (el('div', { className : 'my-class-name' }, ['some text']);
Wrapping The Dom
top)
Examples / Wrapping The Dom.md (You can get all the methods and the simplified interface based on ideas in jQuery by wrapping a node in el
.
var wrapped = el(document.querySelector('#my-div'));
What You Can Pass As An Object
top)
Examples / What You Can Pass As An Object.md (- You can pass it anything which has an
appendTo
method
Functional Methods
Basics
top)
Functional Methods / Basics.md (Functional interfaces
el.contains
el.fn
el.hasParent
el.isComponent
el.isCreateNode
el.isElement
el.isVisible
el.addClass
top)
Functional Methods / el.addClass.md (Is a curried function which can take 1
or 2
arguments.
Using el.addClass
with a single argument will return a function which expects a Node
or an Array
of nodes.
Using the partially applied function:
var pizzas = document.querySelectorAll('.pizza');
[].forEach.call(pizzas, el.addClass('class-name'));
Using the function with 2
arguments:
var pizza = document.querySelector('.pizza');
el.addClass('class-name', pizza);
The order of the arguments does not matter
var pizza = document.querySelector('.pizza');
el.addClass(pizza, 'class-name');
A curried function which adds class names to the Node
var pizza = document.querySelector('.pizza');
var toppings = el.addClass(pizza);
toppings('peppers');
toppings('mushrooms');
el.isComponent
top)
Functional Methods / el.isComponent.md (Returns true
or false
if the argument is a component
El Methods
Attributes
addClass
top)
El Methods / Attributes / addClass.md (Will add a class to a node, and will check if the class does not exist before adding.
el('div').addClass('this-class-name');
attr
top)
El Methods / Attributes / attr.md (var div = el('div');
div.attr('data-attribute', 'value');
<div data-attribute="value"></div>
el('div').attr({
className : 'some-class-name',
style : 'background: red'
});
<div class="some-class-name" style="background: red"></div>
className
top)
El Methods / Attributes / className.md (Will set or return value of the attribute class
for a Node
.
var b = el('div');
a.className('test');
a.className();
//-> test
copy
top)
El Methods / Attributes / copy.md (Will copy a target node's attributes from another node, including it's innerHTML
.
var a = el('div');
var b = el('div', { className : 'test' }, 'text');
a.copy(b);
a.className();
//-> test
a.html();
// -> text
name
top)
El Methods / Attributes / name.md (Will set or return value of the attribute name
for a Node
.
var b = el('div');
a.name('test');
a.name();
//-> test
removeClass
top)
El Methods / Attributes / removeClass.md (Will remove the class name from a node.
<div id="copy" class="my-class-name" data-attribute="some-text">
var node = el(document.querySelector('#copy'));
node.removeClass('my-class-name');
<div id="copy" data-attribute="some-text">
scrollHeight
top)
El Methods / Attributes / scrollHeight.md (Will tell you an elements scrollHeight
value
myDiv.scrollHeight();
// -> Number
scrollTop
top)
El Methods / Attributes / scrollTop.md (Will tell you an elements scrollTop
value when passed nothing. Will set the node scrollTop
when passed a number.
myDiv.scrollTop();
// -> Number
myDiv.scrollTop(20);
// -> [ELEMENT]
scrollWidth
top)
El Methods / Attributes / scrollWidth.md (Will tell you an elements scrollWidth
value
myDiv.scrollWidth();
// -> Number
toggleClass
top)
El Methods / Attributes / toggleClass.md (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.
var myDIV = el('div');
myDIV.toggleClass('toggle'); // -> myDIV has class 'toggle'
myDIV.toggleClass('toggle'); // -> myDIV does not have class 'toggle'
Dom Manipulation
append
top)
El Methods / Dom Manipulation / append.md (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.
var parent = el('div', { className : 'parent-1' });
var child = el('div', { className : 'child-1' });
parent.append([child]);
is the same as
var parent = el('div', { className : 'parent-1' }, [
el('div', { className : 'child-1' })
]);
el('div', { className : 'parent-1' }).append([
el('div', { className : 'child-1' })
]);
<div class="parent-1">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
appendTo
top)
El Methods / Dom Manipulation / appendTo.md (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.
var parent = el('div', { className : 'parent-1' });
var child = el('div', { className : 'child-1' });
child.appendTo(parent);
<div class="parent-1">
<div class="child-1"></div>
</div>
before
top)
El Methods / Dom Manipulation / before.md (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.
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]);
<div class="parent-1">
<div class="before-1"></div>
<div class="reference-1"></div>
</div>
check
top)
El Methods / Dom Manipulation / check.md (Check a checkbox and radio
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> true
clone
top)
El Methods / Dom Manipulation / clone.md (Clones an element, is an interface for Node.cloneNode(true)
var a = el('div', [
el('div', { className : 'child-1' }),
el('div', { className : 'child-2' }),
el('div', { className : 'child-3' })
]);
var b = a.clone();
<!-- b -->
<div>
<div class="child-1"></div>
<div class="child-2"></div>
<div class="child-3"></div>
</div>
disable
top)
El Methods / Dom Manipulation / disable.md (Disables an element by setting it's disabled
attribute to disabled
var a = el('div').disable();
Result
<div disabled="disabled"></div>
enable
top)
El Methods / Dom Manipulation / enable.md (Enables an element by removing it's disabled
attribute
<div id="disabled" disabled="disabled"></div>
var a = el(document.getElementById('disabled')).enable();
<div id="disabled"></div>
focus
top)
El Methods / Dom Manipulation / focus.md (Will focus
an element. This will only work if the element is in the document.body
and if it has an tabindex
attribute.
var a = el('div');
a.appendTo(document.body).focus();
html
top
Is an interface for innerHTML
. When passed no arguments, it will return the value of innerHTML
.
var a = el('div');
a.html('test');
// a.node.innerHTML -> 'test'
// a.html() -> 'test'
html
top)
El Methods / Dom Manipulation / html.md (Sets the innerHTML
value of a node.
var target = el(document.querySelector('.target-node'));
target.html('<div class="my-div"></div>');
Passing it no arguments will return the value of innerHTML
var target = el(document.querySelector('.target-node'));
target.html();
// -> '<div class="my-div"></div>'
prepend
top)
El Methods / Dom Manipulation / prepend.md (Will append a child element in the first position of the parent node.
var parent = el('div', { className : 'parent' }, [
el('div', { 'first-child' })
]);
var child = el('div', { className : 'second-child' });
<div class="parent">
<div class="first-child"></div>
</div>
parent.prepend([child]);
<div class="parent">
<div class="second-child"></div>
<div class="first-child"></div>
</div>
prependTo
top)
El Methods / Dom Manipulation / prependTo.md (Will append a child element in the first position of the parent node.
var child = el('div', { className : 'second-child' });
var parent = el('div', { className : 'parent' }, [
el('div', { 'first-child' })
]);
<div class="parent">
<div class="first-child"></div>
</div>
child.prependTo(parent);
<div class="parent">
<div class="second-child"></div>
<div class="first-child"></div>
</div>
remove
top)
El Methods / Dom Manipulation / remove.md (Will remove a Node
from it's parent.
var a = el('div', { className : 'parent' });
var b = el('div', { className : 'first-child' });
a.append(b);
<div class="parent">
<div class="first-child"></div>
</div>
b.remove();
<div class="parent">
</div>
removeChild
top)
El Methods / Dom Manipulation / removeChild.md (Will remove a child Node
.
var a = el('div', { className : 'parent' });
var b = el('div', { className : 'first-child' });
a.append(b);
<div class="parent">
<div class="first-child"></div>
</div>
a.removeChild(b);
<div class="parent">
</div>
replaceWith
top)
El Methods / Dom Manipulation / replaceWith.md (Replaces a target node with a new node.
var targetNode = el(document.querySelector('.target-node'));
var newNode = el('div', { className : 'new-node' });
targetNode.replaceWith(newNode);
select
top)
El Methods / Dom Manipulation / select.md (Provides an interface to select text ranges and select the option
node.
Query
var a = el(document.querySelector('.my-input'));
a.select();
// -> [0, 2]
Set
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.
a.select(-1);
This example selects from the first letter to 3 letters from the end.
a.select(0, -3);
select
var a = el('select', [
el('option'),
el('option')
]);
a.select(0);
// -> will select the first option node
style
top)
El Methods / Dom Manipulation / style.md (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
var a = el('div');
a.style('fontSize', 13);
Object
var a = el('div');
a.style({
fontSize : 13,
fontWeight : 'bold'
});
Get computed styles
div.style();
// -> [ Object ]
div.style('fontSize');
// -> 13px
text
top)
El Methods / Dom Manipulation / text.md (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.
var target = el(document.querySelector('.target-node'));
target.text('my text');
Passing it no arguments will return the value of textContent
var target = el(document.querySelector('.target-node'));
target.text();
// -> 'my text'
uncheck
top)
El Methods / Dom Manipulation / uncheck.md (Uncheck a checkbox and radio
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> true
a.uncheck();
a.isChecked();
// -> false
value
top)
El Methods / Dom Manipulation / value.md (Query
var a = el(document.querySelector('.my-input'));
a.value();
// -> 'My text'
Set
var a = el(document.querySelector('.my-input'));
a.value('New text');
Events
doubleclick
top)
El Methods / Events / doubleclick.md (A listener which is triggered when the user double clicks on an element.
on('doubleclick', [ Function ])
off
top)
El Methods / Events / off.md (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.
var element = el('div');
function logToConsole() {
console.log('click');
}
element.on('click', logToConsole);
By clicking on element
'click' will be logged to the console.
element.off('click', logToConsole);
In this example, we are attaching 3 functions to element
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.
element.off('click');
on
top)
El Methods / Events / on.md (This is an interface for addEventListener
, with the main difference being how functions are tracked internally.
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
top)
El Methods / Events / once.md (Will add an event listener which will execute once, then remove the listener.
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
top)
El Methods / Events / trigger.md (This will trigger all listeners for matching event name.
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
top)
El Methods / Events / Input.md (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)
.
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
top)
El Methods / Events / Drag And Drop.md (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
top)
El Methods / Predicates / contains.md (var a;
var p = el('div', [
a = el('div')
]);
p.contains(a);
// -> true
Can also accept multiple arguments
var a;
var b;
var p = el('div',
a = el('div'),
b = el('div')
);
p.contains(a, b);
// -> true
Can also accept an array
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
top)
El Methods / Predicates / hasClass.md (Returns boolean
value for whether a Node
has a className.
var a = el('div', { className : 'test' });
a.hasClass('test')
// -> true
hasParent
top)
El Methods / Predicates / hasParent.md (var myParent = el('div', [
var myChild = el('div')
]);
myChild.hasParent(myParent);
// -> true
isChecked
top)
El Methods / Predicates / isChecked.md (Returns a [ Boolean ]
value of the checked state of a node.
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> false
isFocused
top)
El Methods / Predicates / isFocused.md (var myFocus = el('label', { tabIndex : 0 });
myFocus.isFocused();
// -> false
myFocus.focus();
myFocus.isFocused();
// -> true
isVisible
top)
El Methods / Predicates / isVisible.md (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 tonone
. - Or that
overflow
isn't set tohidden
and ensures theheight
andwidth
are larger than 0.
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
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
top)
El Methods / Query / children.md (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
)
var a = el('div', [
el('div', { className : 'child-1' }),
el('div', { className : 'child-2' }),
el('div', { className : 'child-3' })
]);
a.childNodes;
<div class="child-1"></div>
<div class="child-2"></div>
<div class="child-3"></div>
You can also specify an index
a.children(0);
// -> <div class="child-1"></div>
You can also use negative numbers
a.children(-1);
// -> <div class="child-3"></div>
You can also slice
the child array
a.children(1, -1);
// -> <div class="child-2"></div>
// -> <div class="child-3"></div>
closest
top)
El Methods / Query / closest.md (Returns the closest parent matching the query.
var farthest;
var parent = el('div', { className : 'closest' }, [
farthest = el('div', { className : 'farthest' })
]);
farthest.closest('.closest');
// -> HTML Element : div.closest
find
top)
El Methods / Query / find.md (Returns an array of matches as a result of executing the query.
var parent = el('div', { className : 'closest' }, [
el('div', { className : 'find' }),
el('div', { className : 'find' })
]);
parent.find('.find');
// -> HTML NodeList : [ div.find, div.find ]
hasClass
top)
El Methods / Query / hasClass.md (var node = document.querySelector('.class-name');
el(node).hasClass('class-name');
// -> true
offset
top)
El Methods / Query / offset.md (Returns the top
, left
, width
, height
relative to the body
's coordinates. It is an interface for this.node.getBoundingClientRect()
var parent = el('div');
parent.appendTo(document.body);
parent.offset();
/* -> {
height : [Number],
left : [Number],
top : [Number],
width : [Number]
}
*/
parent
top)
El Methods / Query / parent.md (If the node
has a parent, it will return it's parent. Otherwise, it will return false
var child = el('div');
child.parent();
// -> false
child.appendTo(document.body);
child.parent();
// -> HTML Element : document.body
parents
top)
El Methods / Query / parents.md (Returns an array of parents, from first to last.
var child;
el('div', { className : 'parent-1' }, [
el('div', { className : 'parent-2' }, [
child = el('div', { className : 'parent-3 '})
])
]);
child.parents();
// -> [Array]
parentsUntil
top)
El Methods / Query / parentsUntil.md (Takes a predicate as an argument and returns the first truthy
match.
div.parentsUntil(function (p) { return p.tagName === 'h1' });
scrollWidth
top)
El Methods / Query / scrollWidth.md (Returns the scrollWidth property of a node
.
node.scrollWidth();
// -> Number
siblings
top)
El Methods / Query / siblings.md (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.
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();
<div class="siblings-1"></div>
<div class="siblings-2"></div>
<div class="siblings-3"></div>
<div class="siblings-4"></div>
textNodes
top)
El Methods / Query / textNodes.md (Returns all the Text Nodes
which are a child of a selected node.
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................................... ✅