v2.*
_dom.js is exclusively focused on html and css creation.
- Ultra light : < 40k uncompiled, ~ 18k compiled.
- Easy creation of html elements and css rules.
- Use sass like syntax to optimise your css rules.
- Interacts exclusively with native browser methods.
- No time comsuming proxies.
- No code compilation.
- No intrusive attributes in base elements.
- Full html templating.
- Low template architecture constraints.
- Low dom intrusion (Attribute _dom added for controller when using templates, see _dom.model).
- Handles shadow dom.
The purposes of _dom.js are:
- Create easily dynamic apps.
- Stay simple and minimal.
- Work on the lower level possible.
- Being integrable with any kind of web architecture.
API documentation.
<script src="./path/to/_dom.js"></script>
For web translators like webpack.
Install :
npm install dom-for-node
Import :
const _dom=require('dom-for-node');
_dom(tagName,datas,childs,nameSpace)
string
tagName : element tagnameobject
datas [optional] : element attributes.Array
childs [optional] : element childs. can contain strings and html elements.string
nameSpace [optional] : element namesapace if any.- returns
HTMLElement
Exemple:
var inpt=_dom('input',{type:'text',value:'hello'});
document.body.appendChild(inpt);
var div=_dom('div',{style:{border:'solid 1px #0f0'}},[
'aaa',
_dom('u',['bbb']}),
'ccc'
]);
document.body.appendChild(div);
_dom.rule(selector, datas)
string
selector : the new rule rule query selector.object
datas [optional] : style datas if any.- returns
CSSStyleRule
Exemple :
var tableRule=_dom.rule('table',{border:'solid 1px #0f0'});
setTimeout(function(){
tableRule.style.borderColor='#00f';
},2000);
_dom.rules(datas)
- object
datas
: sass like structured object. - returns collection of
CSSStyleRule
by selector and alias.
Exemple :
var rules =_dom.rules({
'$color1':'#0f0',
'$color2':'#f00',
'table':{
border:'solid 1px $color1',
'& td':{
'&>div':{
alias:'subdiv',
border:'solid 1px $color2',
display:'block'
}
}
}
});
setTimeout(function(){
rules.table.style.borderColor='#00f';
rules.subdiv.style.color='#d06';
},2000);
_dom.model(tagName,constructor,cssRules,shadowed)
string
tagName : the custom element name. Must contain at least one "-" to avoid conflict with natives HTMLElements.function
constructor : Must return an HTMLElement.
Receive the arguments from _dom but the dont have to respect the classical nomenclature excepted tagName (the first).
/!\ constructor Must be a function and NOT a lambda expression because it is scoped to its interface.object|function
cssRules [optional] : is or returns an object describing rules like _dom.rules, but the created collection will be insancied only once and shared among interfaces.boolean
shadowed [optional] : if true, your model uses shadow dom.
NB : You can use the Model creator to help generate model code.
Exemple :
/**
* creates an Table of 1 line.
* @param {string} tagName must be 'table-line'
* @param {Array} wlist columns widths
* @param {Array} childlist columns contents.
* @returns {HTMLElement}
*/
_dom.model('table-line',function(tagName,wlist,childlist){
var tdlist=[],dom_tr,dom;
var build=function(){
for(var i=0;i<childlist.length;i++){
tdlist.push(_dom('td',{width:(wlist[i]?wlist[i]:'*')},[childlist[i]]));
}
dom_tr=_dom('tr',{},tdlist);
dom= _dom('table',{border:'0',cellPadding:'0',cellSpacing:'0'},[
_dom('tbody',{},[dom_tr])
]);
};
/**
* (interfacing exemple) add a column.
* @param {string|HTMLElement} width column content (when content is not set) or width
* @param {string|HTMLElement} content column content
*/
this.push=function(width,content){
if(!content){
content=width;
width='*';
}
if(!(content instanceof HTMLElement)){
content=document.createTextNode(content+'');
}
var nutd=_dom('td',{width:width},[content]);
dom_tr.appendChild(nutd);
};
build();
return dom;
});
The __dom attribute is added to the element to permit access to the component instance.
Exemple :
var tl=_dom('table-line',['1','*'],['000',_dom('div',{},['abc'])]);
// append element.
document.body.appendChild(tl);
setTimeout(function(){
// calls component 'push' method.
tl.__dom.push('def');
},2000);
The __dom attribute is configurable. You can hide the controller by removing the instance reference.
Exemple :
var tl=_dom('table-line',['1','*'],['000',_dom('div',{},['abc'])]);
var controller=tl.__dom;
delete tl['__dom'];
Though _dom is more designed for javascript, by using shadow dom with your models, you make them instanciables via Html.
About shadow dom.
There are two ways to implement shadow dom with _dom models :
- On declaration :
Set the _dom.model shadowed argument to true when you declare your model. - When the model exists but he may not implement shadow dom :
call _dom.modelShadow.
string
tagName : the model name.
Exemple :
- in js
_dom.modelShadow('table-line');
- in html
<table-line wlist='["1","*"]' childlist='["abc"]'></table-line>
To create fast and easy the backbone of your component, you can use the model creator.
V2 brings new features like module and new tools. Some of them (beta) are still experimental.
See more on documentation.