Flatman Client 1.10.2

License: MIT

✅ All 84 tests pass

Table of Contents

Overview

• Description

  • Description

• Installation

  • Installation

• Notes

  • Notes

• Component

  • Initialing A Component

    • Initialing A Component

  • Mixing A Component

    • Mixing A Component

  • The Options Object

    • The Options Object

  • Writing A Component

    • Writing A Component

• Examples

  • Nesting

    • Nesting

  • Basic Usage

    • Basic Usage

  • Wrapping The Dom

    • Wrapping The Dom

  • What You Can Pass As An Object

    • What You Can Pass As An Object

• Functional Methods

  • Basics

    • Basics

  • el.addClass

    • el.addClass

  • el.isComponent

    • el.isComponent

• El Methods

  • Attributes

    • addClass

      • addClass

    • attr

      • attr

    • className

      • className

    • copy

      • copy

    • name

      • name

    • removeClass

      • removeClass

    • scrollHeight

      • scrollHeight

    • scrollTop

      • scrollTop

    • scrollWidth

      • scrollWidth

    • toggleClass

      • toggleClass

  • Dom Manipulation

    • append

      • append

    • appendTo

      • appendTo

    • before

      • before

    • check

      • check

    • clone

      • clone

    • disable

      • disable

    • enable

      • enable

    • focus

      • focus

    • html

      • html

    • prepend

      • prepend

    • prependTo

      • prependTo

    • remove

      • remove

    • removeChild

      • removeChild

    • replaceWith

      • replaceWith

    • select

      • select

    • style

      • style

    • text

      • text

    • uncheck

      • uncheck

    • value

      • value

  • Events

    • doubleclick

      • doubleclick

    • off

      • off

    • on

      • on

    • once

      • once

    • trigger

      • trigger

    • Input

      • Input

    • Drag And Drop

      • Drag And Drop

  • Predicates

    • contains

      • contains

    • hasClass

      • hasClass

    • hasParent

      • hasParent

    • isChecked

      • isChecked

    • isFocused

      • isFocused

    • isVisible

      • isVisible

  • Query

    • children

      • children

    • closest

      • closest

    • find

      • find

    • hasClass

      • hasClass

    • offset

      • offset

    • parent

      • parent

    • parents

      • parents

    • parentsUntil

      • parentsUntil

    • scrollWidth

      • scrollWidth

    • siblings

      • siblings

    • textNodes

      • textNodes

• Tests

Description

Description.md (top)

• 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

Installation.md (top)

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

Notes.md (top)

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

Component / Initialing A Component.md (top)

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

Component / Mixing A Component.md (top)

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

Component / The Options Object.md (top)

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

Component / Writing A Component.md (top)

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

Examples / Nesting.md (top)

el('div', [
  el('div', { className : 'child'}),
  el('div', { className : 'child-2'})
]);

Basic Usage

Examples / Basic Usage.md (top)

el('div', { className : 'my-class-name' }, ['some text']);

Wrapping The Dom

Examples / Wrapping The Dom.md (top)

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

Examples / What You Can Pass As An Object.md (top)

• You can pass it anything which has an appendTo method

Functional Methods

Basics

Functional Methods / Basics.md (top)

Functional interfaces

• el.contains
• el.fn
• el.hasParent
• el.isComponent
• el.isCreateNode
• el.isElement
• el.isVisible

el.addClass

Functional Methods / el.addClass.md (top)

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

Functional Methods / el.isComponent.md (top)

Returns true or false if the argument is a component

El Methods

Attributes

addClass

El Methods / Attributes / addClass.md (top)

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

El Methods / Attributes / attr.md (top)

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

El Methods / Attributes / className.md (top)

Will set or return value of the attribute class for a Node.

var b = el('div');

a.className('test');

a.className();
//-> test

copy

El Methods / Attributes / copy.md (top)

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

El Methods / Attributes / name.md (top)

Will set or return value of the attribute name for a Node.

var b = el('div');

a.name('test');

a.name();
//-> test

removeClass

El Methods / Attributes / removeClass.md (top)

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

El Methods / Attributes / scrollHeight.md (top)

Will tell you an elements scrollHeight value

myDiv.scrollHeight();
// -> Number

scrollTop

El Methods / Attributes / scrollTop.md (top)

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

El Methods / Attributes / scrollWidth.md (top)

Will tell you an elements scrollWidth value

myDiv.scrollWidth();
// -> Number

toggleClass

El Methods / Attributes / toggleClass.md (top)

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

El Methods / Dom Manipulation / append.md (top)

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

El Methods / Dom Manipulation / appendTo.md (top)

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

El Methods / Dom Manipulation / before.md (top)

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

El Methods / Dom Manipulation / check.md (top)

Check a checkbox and radio

var a = el('input', { type : 'checkbox' });

a.check();
a.isChecked();
// -> true

clone

El Methods / Dom Manipulation / clone.md (top)

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

El Methods / Dom Manipulation / disable.md (top)

Disables an element by setting it's disabled attribute to disabled

var a = el('div').disable();

Result

<div disabled="disabled"></div>

enable

El Methods / Dom Manipulation / enable.md (top)

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

El Methods / Dom Manipulation / focus.md (top)

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

El Methods / Dom Manipulation / html.md (top)

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

El Methods / Dom Manipulation / prepend.md (top)

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

El Methods / Dom Manipulation / prependTo.md (top)

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

El Methods / Dom Manipulation / remove.md (top)

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

El Methods / Dom Manipulation / removeChild.md (top)

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

El Methods / Dom Manipulation / replaceWith.md (top)

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

El Methods / Dom Manipulation / select.md (top)

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

El Methods / Dom Manipulation / style.md (top)

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

El Methods / Dom Manipulation / text.md (top)

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

El Methods / Dom Manipulation / uncheck.md (top)

Uncheck a checkbox and radio

var a = el('input', { type : 'checkbox' });

a.check();
a.isChecked();
// -> true

a.uncheck();
a.isChecked();
// -> false

value

El Methods / Dom Manipulation / value.md (top)

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

El Methods / Events / doubleclick.md (top)

A listener which is triggered when the user double clicks on an element.

• on('doubleclick', [ Function ])

off

El Methods / Events / off.md (top)

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

El Methods / Events / on.md (top)

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

El Methods / Events / once.md (top)

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

El Methods / Events / trigger.md (top)

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

El Methods / Events / Input.md (top)

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

El Methods / Events / Drag And Drop.md (top)

• 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)

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

El Methods / Predicates / hasClass.md (top)

Returns boolean value for whether a Node has a className.

var a = el('div', { className : 'test' });
a.hasClass('test')
// -> true

hasParent

El Methods / Predicates / hasParent.md (top)

var myParent = el('div', [
  var myChild = el('div')
]);

myChild.hasParent(myParent);
// -> true

isChecked

El Methods / Predicates / isChecked.md (top)

Returns a [ Boolean ] value of the checked state of a node.

var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> false

isFocused

El Methods / Predicates / isFocused.md (top)

var myFocus = el('label', { tabIndex : 0 });

myFocus.isFocused();
// -> false

myFocus.focus();

myFocus.isFocused();
// -> true

isVisible

El Methods / Predicates / isVisible.md (top)

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.

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

El Methods / Query / children.md (top)

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

El Methods / Query / closest.md (top)

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

El Methods / Query / find.md (top)

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

El Methods / Query / hasClass.md (top)

var node = document.querySelector('.class-name');
el(node).hasClass('class-name');
// -> true

offset

El Methods / Query / offset.md (top)

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

El Methods / Query / parent.md (top)

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

El Methods / Query / parents.md (top)

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

El Methods / Query / parentsUntil.md (top)

Takes a predicate as an argument and returns the first truthy match.

div.parentsUntil(function (p) { return p.tagName === 'h1' });

scrollWidth

El Methods / Query / scrollWidth.md (top)

Returns the scrollWidth property of a node.

node.scrollWidth();
// -> Number

siblings

El Methods / Query / siblings.md (top)

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

El Methods / Query / textNodes.md (top)

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................................... ✅