html - Javascript library to manage DOM actions and properties -

html - Javascript library to manage DOM actions and properties -

i'm looking library allow me specify css classes dom elements , map them javascript functions define events onclick. example:

<form class="auto delete"> <input type="checkbox" class="auto submit"/> </form>

then need write is:

function form_autodelete(form){ form.action = '/forms/delete_stuff/'; form.method = 'post'; form.onsubmit = function () { alert('thanks!'); } }

and

function checkbox_autosubmit(form,checkbox){ checkbox.onclick = function(ischecked){ form.submit(); } }

then when checks box (or unchecks it), form automatically submit /forms/delete_stuff/ without me having write in html css classes. if exists, couldn't figure out search find it.

is there existing library this?

it seems reply no, wrote own. date code , documentation github: https://github.com/jakarco/javascript-dom

the code wrote create snippet work jdoma_link(parent,a) function , 2 css classes in a tag. overall, pretty simple use, think.

notice code on <a> tag 2 css classes , rest handled js. note can whatever want html. used js-only solution here example.

class="snippet-code-js lang-js prettyprint-override">function jdoma_link(parent,a){ a.href = 'https://stackoverflow.com'; a.style.backgroundcolor = '#0f0'; var counter = 0; a.onclick = function(){ a.innertext = 'you clicked me '+(++counter)+' times'; a.style.backgroundcolor = '#0ff'; } } /* * create sure either include code after jdom functions * or remove `jdomprocessor.pageloaded();` bottom of file * , set somewhere know loaded after jdom functions * * can't, @ time, guarantee execution order of jdom functions */ /** i'm enclosing function names don't conflict user's functions * */ var jdomprocessor = { /**returns string first char capital , rest lower case */ capitalisefirstletter : function(string) { return string.charat(0).touppercase() + string.slice(1).tolowercase(); }, /**returns class list without jdom class */ classlist : function(element){ var classlist = element.classname; var array = classlist.split(" "); for(var = 0; <array.length; i++) { if(array[i] == 'jdom') { array.splice(i, 1); } } return array; }, /** page has finished loading. maps */ pageloaded: function(logfuncnames){ logfuncnames = logfuncnames || false; var elementlist = document.getelementsbyclassname('jdom'); for (var = 0;i<elementlist.length;i++){ var element = elementlist[i]; var classlist = this.classlist(element); var parent = element.parentnode; var classliststring = classlist.join('_'); var parentname = this.capitalisefirstletter(parent.tagname); var elementname = this.capitalisefirstletter(element.tagname); var didfunc = false; var tagindex = 0; var classes = classlist.length; while (!didfunc&&classes>0){ var tagnames = [parentname,elementname,'' ]; var funcname = 'jdom'+tagnames.slice(tagindex).join('')+"_"+classlist.slice(0,classes).join("_"); var func = window[funcname]; if (func!=null){ func(parent,element); didfunc = true; } if (++tagindex>tagnames.length){ classes = --classes; tagindex = 0; } if (logfuncnames)console.log(funcname); } } } } //you can remove phone call file , place somewhere on own if you'd like. jdomprocessor.pageloaded(); class="snippet-code-html lang-html prettyprint-override"><a class="jdom link">link text</a>

javascript html css dom