addEventListener

type format:

• click: single event
• click change: multiple event
• click.ns: single namespace event

delegation:

• specify selector argument, enable delegation(like jQuery)
• specify options ownself:true, trigger only matched element
  • default ownself:false, trigger until closest
• specify options once:true, trigger event per element only once

listener(e):

• this: bound target
• e.target: triggered element always
• e.currentTarget: listened element always(=this)
• e.$delegateTarget: selector element delegation only

misc:

• options is not allowed bool(useCapture). must be Object
• throttle: continual events dispatch interval
• debounce: continual events dispatch after last
• leading: fire at first time
• trailing: fire after last time

         | throttle | (l)throttle | (t)throttle | (lt)throttle | debounce | (l)debounce | (t)debounce | (lt)debounce |
 leading:|          | fire        |             | fire         |          | fire        |             | fire         |
     100:|          |             |             |              |          |             |             |              |
     200:| fire     | fire        | fire        | fire         |          |             |             |              |
     300:|          |             |             |              |          |             |             |              |
     400:| fire     | fire        | fire        | fire         |          |             |             |              |
     500:|          |             |             |              |          |             |             |              |
     600:| fire     | fire        | fire        | fire         |          |             |             |              |
trailing:|          |             | fire        | fire         |          |             | fire        | fire         |

removeEventListener

all arguments are optional

• $off(): remove all event
• $off('click'): remove all click event
• $off('click', 'selector'): remove all click event of selector
• $off('click', 'selector', listener): remove same listener event of selector

dispatch Event

types allows multiple event

some event are special treated, e.g. click is PointerEvent

get Event data

this method is very unsafe and changed without any notice eventdata is live, changing it changes the handler itself

jQuery like selector

• Node/NodeList: return as it is
• tag string: create and return Node/NodeList
• selector string: select and return Node/NodeList

returns if length is 1 then Node else NodeList (this case contains empty list)

open by objective windowFeature

window.$open({
    url: 'http://example.jp',
    left: 'auto',   // 'auto' means parent's center
    top: 'auto',    // 'auto' means parent's center
    width: 'auto',  // 'auto' means parent's half
    height: 'auto', // 'auto' means parent's half
});

asynchronous JavaScript And XML

request by fetch || XMLHttpRequest default is fetch, but options has progress or async:false faillback to XMLHttpRequest

• setup: $ajax(RequestInitOptions)
• get: $ajax.get(url, RequestInitOptions)
• post: $ajax.post(url, RequestInitOptions)
• {other}: $ajax.{other}(url, RequestInitOptions)

$ajax(setup) returns new Object

• e.g. one-time: $ajax(setup).get(url, otheropts); // this isn't mean much
• e.g. local-context: const $ajax = $ajax(setup); $ajax.get(url, otheropts);
• e.g. globalize: window.$ajax = $ajax(setup);

set asynchronous JavaScript And XML

create URL based on this URL

get Cookie accessor

document.$cookie.hoge;           // getter
document.$cookie.hoge = 'value'; // setter
document.$cookie.hoge = {        // setter with attributes
    value: 'value',
    path: "/path/to/cookie",
    maxAge: 3600,
};
document.$cookie.hoge = null;    // delete
document.$cookie();              // get all key-value object
document.$cookie({               // mass assign(keep other, no attributes use default attributes)
    hoge: 'HOGE',
    fuga: {
        value: 'FUGA',
        path: '/',
    },
});
document.$cookie.$defaultAttributes({path: '/'});  // mass setting default attributes(keep other)
document.$cookie.$defaultAttributes = {path: '/'}; // mass assign default attributes(delete other)

set Cookie value

document.$cookie = { // mass assign(delete other, no attributes use default attributes)
    hoge: 'HOGE',
    fuga: {
        value: 'FUGA',
        path: '/',
    },
};

get top-layer element

in the future, ":top-layer" pseudo-class may come, but not now

get current modal element

create Elements from html string

document.$createNodeListFromHTML('<span>SPAN</span>Text<div>DIV</div>');
// NodeList(3)[<span>SPAN</span>, Text, <div>DIV</div>]

create Element from tag, attributes, children

• tag allows css selector like string
  • but this is experimental
• attributes allows bool for logical attribute
• attributes.data allows nest object, convert to "data-key=value"
• attributes.class allows array, convert to "a b c"
• attributes.style allows object, convert to "css:value"

document.$createElement('span', {
    logicalFalse: false,
    logicalTrue: true,
    data: {
        a: 'a',
        b: 'b',
    },
    class: ['a', 'b', 'c'],
    style: {
        color: 'red',
        backgroundColor: 'red',
    },
}, 'plain', 'a>b');
// <span logicaltrue="" data-a="a" data-b="b" class="a b c" style="color:red;background-color:red;">plaina&gt;b</span>

document.$createElement('span#id.c1.c2[a=A][b=B]');
// <span id="id" class="c1 c2" a="A" b="B"></span>

create CSSRule

• CSSRule is live, to change...
  • cssRule.selectorText = 'span[attr=value]'
  • cssRule.styleMap.set('color', 'red')
  • cssRule.style.setProperty('color', 'red', 'important')
  • or same as Element.$style
    • cssRule.$style({color: 'red'})

functional querySelector

functional querySelectorAll

functional querySelectorAll with self

functional/queryable contains

functional matches

to HTML for debug or utility

get Bag for anything

$('input').$bag.hoge;             // getter
$('input').$bag.hoge = 'value';   // setter
$('input').$bag({hoge: 'value'}); // mass setting(keep other)
$('input').$bag();                // get all key-value object

mass assign $bag

$('input').$bag = {hoge: 'value'};                // mass assign(delete other)
$('input').$bag = (node, i) => ({hoge: 'value'}); // mass assign by callback(delete other)

clone Node

withEvent:

• false: same as cloneNode(true)
• true: deep clone with event handler

insert before this

almost the same as before, however, accept NodeList

{!!!insert here!!!}
<this>
    child
</this>

insert first child

almost the same as prepend, however, accept NodeList

<this>
    {!!!insert here!!!}
    child
</this>

insert specified child

<this>
    child
    {!!!insert here!!!}
    child
</this>

insert last child

almost the same as append, however, accept NodeList

<this>
    child
    {!!!insert here!!!}
</this>

insert after this

almost the same as after, however, accept NodeList

<this>
    child
</this>
{!!!insert here!!!}

replace this

almost the same as replaceWith, however, accept NodeList

replace children

exhange parameter of replaceChild, and variadic

The parameter order, new before old, is unusual

replace children

almost the same as replaceChildren, however, accept NodeList

trim whitespace textnode

wrap this element

<div>
  text
  <span>span</span>
</div>

$('div').$wrap($('<section></section>'));

<section>
  <div>
    text
    <span>span</span>
  </div>
</section>

unwrap parent

<section>
  <div>
    text
    <span>span</span>
  </div>
</section>

$('div').$unwrap();

<div>
  text
  <span>span</span>
</div>

unwrap children

<section>
  <div>
    text
    <span>span</span>
  </div>
</section>

$('div').$unwrapChildren();

<section>
  text
  <span>span</span>
</section>

listen SSE event

• same url connection is shared
  • when all dom were deleted, close connection
• url's hash means eventName

unlisten SSE event

polling request

options:

• interval: polling interval ms
• invisible: stop invisible element
• retry: retry on fail
  • always: retry infinity
  • network: retry if network level error
  • response: retry if http level error
• status: http status code to call listener and other fetch options(RequestInit)

stop polling

alias to ownerDocument.defaultView or global Window

alias to ownerDocument or global Document

get all textnodes

functional closest

get matched parent elements

get first matched child element

get matched child elements

get first matched previous element

this isn't jQuery like, search all previous elements

get matched previous elements

get first matched next element

this isn't jQuery like, search all next elements

get matched next elements

get matched sibling elements

simple accessor to NamedNodeMap(attribute)

$$('input').$attrs.name;             // getter
$$('input').$attrs.name = 'value';   // setter
$$('input').$attrs({name: 'value'}); // mass setting(keep other)
$$('input').$attrs();                // get all key-value object

// false is delete that attribute
$$('input').$attrs.name = false;
$$('input').$attrs({name: false});

// $prefix means inherited attribute
$$('input').$attrs.$disabled; // returns true if the parent is disabled even if itself none

mass assign NamedNodeMap(attribute)

$$('input').$attrs = {name: 'value'};                // mass assign(delete other)
$$('input').$attrs = (node, i) => ({name: 'value'}); // mass assign by callback(delete other)

simple accessor to DOMStringMap(dataset)

$$('input').$data.name;             // getter
$$('input').$data.name = 'value';   // setter
$$('input').$data({name: 'value'}); // mass setting(keep other)
$$('input').$data();                // get all key-value object
$$('input').$data('prefix');        // get structured object

// $prefix means objective data
$$('input').$data.$hoge; // returns Object starting with hoge

mass assign DOMStringMap(dataset)

$$('input').$data = {name: 'value'};                // mass assign(delete other)
$$('input').$data = (node, i) => ({name: 'value'}); // mass assign by callback(delete other)

simple accessor to DOMTokenList(classList)

$$('input').$class.name;             // getter(always boolean)
$$('input').$class.name = 'flag';    // setter(cast to boolean)
$$('input').$class({name: 'flag'});  // mass setting(keep other)
$$('input').$class();                // get all keys array

// object|array is treated like vue.js
$$('input').$class({name: false});
$$('input').$class([{name: false}, 'other']);

mass assign DOMTokenList(classList)

$$('input').$class = {name: 'flag'};                // mass assign(delete other)
$$('input').$class = (node, i) => ({name: 'flag'}); // mass assign by callback(delete other)

simple accessor to CSSStyleDeclaration(style)

$$('input').$style.color;             // getter
$$('input').$style.color = 'value';   // setter
$$('input').$style({color: 'value'}); // mass setting(keep other)
$$('input').$style();                 // get all key-value object
$$('input').$style(true);             // get all key-value object with important

// $prefix means computed style
$$('input').$style.$;                // returns computed style
$$('input').$style.$color;           // returns computed style's color
$$('input').$style['$color::after']; // returns computed style's pseudo color

mass assign CSSStyleDeclaration(style)

$$('input').$style = {color: 'value'};                // mass assign(delete other)
$$('input').$style = (node, i) => ({color: 'value'}); // mass assign by callback(delete other)

change css will-change property

changes are undone after a certain amount of time

change css with transition

options.initial: first css styles options.reset: reset all when finish options.duration: reference transition css options.timing: reference transition css

fade in element

this does not involve visibility, you have to do it ourselves.

node.hidden = false;
await node.$fadeIn();

fade out element

this does not involve visibility, you have to do it ourselves.

await node.$fadeOut();
node.hidden = true;

slide to down element

this does not involve visibility, you have to do it ourselves.

slide to top element

this does not involve visibility, you have to do it ourselves.

slide to right element

this does not involve visibility, you have to do it ourselves.

slide to left element

this does not involve visibility, you have to do it ourselves.

is metadata content

get no content outerHTML

document.$createElement('div', {a: 'A', b: 'B'}, 'child').$outerTag();
// '<div a="A" b="B"></div>'

mark matched text nodes

<hgroup>
  <h1>this is header</h1>
  <p>this is subheader</p>
</hgroup>

$('hgroup').$markText('is');

<hgroup>
  <h1>th<mark>is</mark> <mark>is</mark> header</h1>
  <p>th<mark>is</mark> <mark>is</mark> subheader</p>
</hgroup>

asynchronous scrollIntoView

load server html

normalize cssUnit to pixel

document.body.$cssPixel('2lh');
// 58.2188

get left/top absolute/relative node

get width/height irrespective of css

┌margin────────────────────────────────────┐
│                                                                              │
│   ┌border───────────────────────────────┐   │
│   │                                                                    │   │
│   │   ┌padding ───────────────────────┬SB┐   │   │
│   │   │                                                      │  │   │   │
│   │   │   ┌content─────────────────────┤  │   │   │
│   │   │   │                                                 │  │   │   │
│   │   │   └-────────────────────────┤  │   │   │
│   │   │                                                      │  │   │   │
│   │   ├───────────────────────────┴─┤   │   │
│   │   ├scroll bar────────────────────────┤   │   │
│   │   └─────────────────────────────┘   │   │
│   │                                                                    │   │
│   └──────────────────────────────────┘   │
│                                                                              │
└───────────────────────────────────────┘

get/set width irrespective of css

get/set height irrespective of css

get closest scrollable parent

get visibilityState

alias to $checkVisibility(true)

get visibilityState

specification:

• explicit: see display: none|content
• document: see document.hidden
• contentVisibilityProperty: see contentVisibility: hidden
• visibilityProperty: see visibility: hidden
• opacityProperty: see opacity: 0
• size: see width/height: 0
• intersection: see overlap other node or out of viewport

render template content

this is experimental, very magical,evil and slow.

vars:

• Array: per below
• String: text node
• other Object: text node without escape
• plain Object: render recursive

rendered nodes are auto inserted to after this if specified insert:null, no inserted

get contents as text

• premised stylesheet
• should have href
• if href requires CORS

get contents as text

• should have src
• if src requires CORS

create URL based on this href

set href by URL

submit based on a href

• specified form: submit that form, this behave submitter
• this has download: download response

create URL based on this src

set src by URL

get contents as file

• must have src
• requires CORS

convert to dataURL

convert to Blob

convert to File

asynchronous showModal

return returnValue

setTimeout(() => $('dialog').close('this is return value'), 100);
await $('dialog').$showModal();
// 'this is return value'

create URL based on this action

set action by URL

writeback value to attribute

request based on form value

get input default value

Unify the individual implementations of input

• simple input: defaultValue
• radiobox/checkbox: defaultChecked
• select: defaultSelected
• file: always null or []

set input default value

• simple input: defaultValue
• radiobox/checkbox: defaultChecked
• select: defaultSelected
• file: do nothing

get input value

• simple input: String
• radiobox: checked String or null
• checkbox: checked String or null
• select(single): selected String or null
• select(multiple): selected Array always
• file(single): File or null
• file(multiple): FileList always

set input value

• simple input: must be String
• radiobox: must be String
• checkbox: must be String
• select(single): must be String
• select(multiple): must be Array
• file(single): must be File|FileList
• file(multiple): must be FileList

this trigger $change event

clear input value

clear doesn't mean reset. all input set blank, uncheck, unselect, empty file

writeback value to attribute

get input indeterminate

returns undefined if not checkbox and supports RadioNodeList.

set input indeterminate

accepts Array of Boolean

• empty(e.g.[null, undefined])
  • indeterminate=false
  • checked no touch
• all false(e.g.[false, ..., false])
  • indeterminate=false
  • checked=false
• all true(e.g.[true, ..., true])
  • indeterminate=false
  • checked=true
• mixed(e.g.[true, false, true])
  • indeterminate=true
  • checked no touch

get input value as date

datetime-like's valueAsDate is UTC timezone, but this property is local timezone

<input id="time" type="time">

$('#time').value = '12:34';
$('#time').valueAsDate;     // Thu Jan 01 1970 21:34:00 GMT+0900
$('#time').$valueAsDate;    // Thu Jan 01 1970 12:34:00 GMT+0900

set input value as date

datetime-like's valueAsDate is UTC timezone, but this property is local timezone and triming value the format(by step|value)

<input id="time0" type="time" step="">
<input id="time1" type="time" step="1">

$('#time0').valueAsDate = new Date('2014-12-24T12:34:56.789');
$('#time1').valueAsDate = new Date('2014-12-24T12:34:56.789');
$('#time0').value; // '03:34:56.789'
$('#time1').value; // '03:34:56.789'

$('#time0').$valueAsDate = new Date('2014-12-24T12:34:56.789');
$('#time1').$valueAsDate = new Date('2014-12-24T12:34:56.789');
$('#time0').value; // '12:34'
$('#time1').value; // '12:34:56'

get input value as number

datetime-like delegates to $valueAsDate, and other work the same as native

set input value as number

datetime-like delegates to $valueAsDate, and other work the same as native

synchronous checked

parent checked -> sync all children checked child checked -> sync parent checked/indeterminate

get belonging RadioNodeList

set option elements

preserveValue

• false: fully replace all options, selection state is lost
• true: fully replace all options, selection state is kept
• String: keep selected options and insertion method

// object mode
$('select').$options({
    a1: 'A1',
    a2: {label: 'A1', 'data-custom': 'custom'},
    b1: {label: 'B1', optgroup: 'optgroup'},
    b2: {label: 'B2', optgroup: 'optgroup'},
    c1: document.$createElement('option', {label: 'C1'}),
});
// array mode
$('select').$options([
    'a1',
    {value: 'a1', label: 'A1', 'data-custom': 'custom'},
    {value: 'b1', label: 'B1', optgroup: 'optgroup'},
    {value: 'b2', label: 'B2', optgroup: 'optgroup'},
    document.$createElement('option', {value: 'c1', label: 'C1'}),
]);

get selected option

return plain object that selected option's {value: label}

get name of RadioNodeList

set name of RadioNodeList

assign URL parts

assign URL parts and new URL

shortcut to this.$assign({searchParams})

from Entries

assign params

• null/undefined: delete parameter
• array: append per element
• other: simple set

from Entries

to SearchParam(unset File entry)

to Object

to JSON

download as file

read as text

read as base64

read as dataURL

upload file

get item as JSON

set item as JSON

entries all storage items

contains other Geometry interfaces

true:
┌this─────────────┐
│                              │
│   ┌other ───────┐   │
│   │                    │   │
│   │                    │   │
│   └──────────┘   │
│                              │
└───────────────┘

false:
┌this─────────────┐
│                              │
│              ┌other ────┼──┐
│              │              │    │
│              │              │    │
│              └───────┼──┘
│                              │
└───────────────┘

false:
┌this─────────────┐
│                              │
│                              │    ┌other ───────┐
│                              │    │                    │
│                              │    │                    │
│                              │    └──────────┘
│                              │
└───────────────┘

intersect other Geometry interfaces

true:
┌this─────────────┐
│                              │
│   ┌other ───────┐   │
│   │                    │   │
│   │                    │   │
│   └──────────┘   │
│                              │
└───────────────┘

true:
┌this─────────────┐
│                              │
│              ┌other ────┼──┐
│              │              │    │
│              │              │    │
│              └───────┼──┘
│                              │
└───────────────┘

false:
┌this─────────────┐
│                              │
│                              │    ┌other ───────┐
│                              │    │                    │
│                              │    │                    │
│                              │    └──────────┘
│                              │
└───────────────┘

upload files

to HTML for debug or utility

same as dispatchEvent for NodeList

original dispatchEvent is fired only once sometimes. probably because the EventObject is consumed

functional querySelector

return first element from tree, not per NodeList

<div>
    <span>1</span>
    <span>2</span>
</div>
<div>
    <span>3</span>
    <span>4</span>
</div>

$$('div').$('span');
// <span>1</span>

functional querySelectorAll

return matched elements from tree, not per NodeList

<div>
    <span>1</span>
    <span>2</span>
</div>
<div>
    <span>3</span>
    <span>4</span>
</div>

$$('div').$$('span');
// [<span>1</span>, <span>2</span>, <span>3</span>, <span>4</span>]

functional querySelectorAll with self

return matched elements from self and tree, not per NodeList

<div>
    <span>1</span>
    <span>2</span>
</div>
<div>
    <span>3</span>
    <span>4</span>
</div>

$$('div').$$$('div,span');
// [<div></div>, <span>1</span>, <span>2</span>, <div></div>, <span>3</span>, <span>4</span>]

functional/queryable contains

not per NodeList

return first matched element from list

not per NodeList

get element index

filter matches elements

filter !matches elements

slice elements

return element of XList's index

$$('span').$at(-1); // return last node

map and Promise.all