dom-crud
👉 Install
- If use with
script
tag, you need to invoke apis usingcrud.
prefix :
- If use as es module:
npm i dom-crud
oryarn add dom-crud
:
// detail usage are below
👉 Basic Knowledge
Before going on, there are some terms you should know :
-
Sign represents a string contains two character, there are three signs :
==
mean overwrite/replace-=
mean delete+=
mean append
-
KVS string (short for "Key Value Sign") is a function parameter format in string style what will be used often:there are some Builtin Keys for use, every other keys will be used with
setAttribute
method. Examples :class-=a b c
style==color:red;font-size:2rem
html+=<span>hi</span>
id==a
-
KVSC string ("C" is short for "Config"), because some keys can have additional configs, details will discuss later. Examples :
id==a?configA=xx&configB=yy
-
KVS object is a function parameter format in object style what will be used often. Examples :
{ 'id==': {value:'a'}}
- you can also specify value directly:
{ 'id==':'a'}
is equal to above { 'class-=': {value: 'a b c'}}
or{ 'class-=': 'a b c'}
{ 'style==': 'color:red;font-size:2rem'}
{ 'html+=': '<span>hi</span>'}
-
KVSC object , Example :
- use
config
key andvalue
key at the same time if you need to pass configs:{ 'text==': { value:"new text", config: {purText: true} }}
- use
👉 API
cdom(htmlTagName, strOrObj1, strOrObj2, strOrObj3, strOrObj4, ...)
- htmlTagName :
string
- strOrObj :
KVS(C) string
orKVS(C) object
) - **return ** :
HtmlElement
// below will create a dom like this:// <input type='text' class='center big red' style='font-size:3rem;font-weight:bold'/> // you can pass only KVS stringsconst $input = ; // or pass only KVS objectsconst $input2 = ; // or mixedconst $input3 = ;
rdom(selector)
- selector :
string
same asquerySelector
- return :
HtmlElement
// when reading single dom, you can chain itconst $input = ;
rdoms(selector)
- selector :
string
same as `querySelectorAll - **return **:
NodeList
// multi doms cannot chainconst $inputs = ;
udom(dom, strOrObj1, strOrObj2, strOrObj3, strOrObj4, ...);
- dom :
Element
- strOrObj :
KVS(C) string
orKVS(C) object
- return : void
// below will remove all inline styles and then add blue color;// object style; // below will only remove color and font-size from inline styles if exists// object style // below will append color to inline styles// object style
ddom(dom)
- dom :
Element
- return :
boolean
whether or not removed dom
;
getCrudConfig()
-
return : global config object
currently, the default global config is very simple as below:
const config = ;console;/*{ text: { // detailed below pureText: false }, // whether log debug info(currently, nothing cumbersome logged) debug: false} */
updateCrudConfig(config)
- config : it should be a subset of global config object, anything else will be ignored
- return : void
const config = ;
👉 Builtin Keys
Below list all builtin keys which made dom-crud
funny. Remind: any other keys will be used in setAttribute(key, value)
:
text
This key modifies text conent in target dom, V(value) should be string
. This key's configs as below:
name | type | description |
---|---|---|
pureText | boolean |
If your dom content is 100% plain text, set it to true to make performance boost. This config can be changed by global config. |
html
This key modifies html content in target dom, V(value) should be string
.
doms
This key modifies doms in target dom,V(value) should be one of below :
array
containsEmelent
NodeList
- ``HTMLCollection`
This key's configs as below:
name | type | description |
---|---|---|
before | Element |
Remind: Element should child of parent element |
style
This key modifies dom inline styles.
class
This key modifies dom classes.
For more keys? Please give me advice🤣