{"_id":"element.js","_rev":"4-df45ea1df97ce87d7f94619e67996386","name":"element.js","description":"Javascript class which facilitates work with the DOM","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"element.js","version":"1.2.0","description":"Javascript class which facilitates work with the DOM","main":"element.js","directories":{"test":"test"},"scripts":{"test":"mocha"},"repository":{"type":"git","url":"https://github.com/SirAnthony/element.js.git"},"keywords":["DOM","element"],"author":{"name":"Sir Anthony"},"license":"MIT","bugs":{"url":"https://github.com/SirAnthony/element.js/issues"},"homepage":"https://github.com/SirAnthony/element.js","devDependencies":{"bower":"^1.3.11","grunt":"^0.4.5","grunt-bower-task":"^0.4.0","grunt-contrib-jshint":"^0.10.0","grunt-contrib-uglify":"^0.6.0"},"gitHead":"4e807c046cb3b03d914c5c159438cfb096cb120c","_id":"element.js@1.2.0","_shasum":"3a264ffeee1d2803aff8729fffa1377b3717010b","_from":".","_npmVersion":"2.1.2","_nodeVersion":"0.10.26","_npmUser":{"name":"siranthony","email":"anthony@adsorbtion.org"},"maintainers":[{"name":"siranthony","email":"anthony@adsorbtion.org"}],"dist":{"shasum":"3a264ffeee1d2803aff8729fffa1377b3717010b","tarball":"https://registry.npmjs.org/element.js/-/element.js-1.2.0.tgz","integrity":"sha512-KnI+zCgiUk8uj7eNH+oYc9HUc1WMOJ25TqGkGHWZEURtvBa69ZpsyDUgq938n9lne731psRZDnmYzNOjEQnhxA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALiYuPhZxETvB8lC6635nTvPGD12rimi5s9RwpHOryRAiEAh9KjHK7aykkFC7g4tldOX8CebubHcJl+Hy2ndaH2TY8="}]}}},"readme":"============================\nelement.js\n============================\n\nelement.js - Javascript class which facilitates work with the DOM\n\nBasic usage\n============================\n\n.. _create:\nelement.create\n----------------------------\n\nCreates new dom element and returns it.\n\nTakes three arguments. \nFirst two arguments are required: tag name and element parameters as object::\nIf tag name is not string or empty it will created as text node::\nLast argument, if given, will be passed to element.appendChild as second parameter\nwith created element as first parameter::\n\n    var select = element.create('select', {id: 'show', onchange: function(){alert();}});\n    var select2 = element.create('select', {id: 'show2'});\n    var text = element.create(null, {textContent: 'Hello world!'});\n    var temp = element.create('div', {className: 'example'}, ['p', [{'span': {className: 'span'}}, text]])\n\nResult::\n\n    <select id=\"show\"></select>\n    <select id=\"show2\"></select>\n    Hello World!\n    <div class=\"example\">\n        <p>\n            <span class=\"span\"></span>\n            Hello World!\n        </p>\n    </div>\n\nSpecial parameters of second argument:\n\n:style:      Object that will be passed to Node style property.\n:choices:    List that will be processed as list of options, and passed to\n             options, i.e. its contents will be passed to addOption_\n             function with created Node as first, content of `choises` as\n             second and content of `value` as third parameter.\n:childNodes: Array or Object with child nodes of current element, will be\n             passed to appendChild_ function.\n\n\n.. _createMany:\nelement.createMany\n----------------------------\n\nCreates array of elements.\nTakes one argument - object where keys - created Node tags and values is Node\nparameters::\n\n    var elements = element.createMany({'p': {name: 'p'}, 'span': {name: 'span'}});\n\nResult::\n\n    [<p name=\"p\"></p>, <span name=\"span\"></span>]\n\n\n`_order` object parameter can be passed to specify order of elements creation.\n\n\n.. _createCount:\nelement.createCount\n----------------------------\n\nLike create_, but creates array of similar elements. Takes four arguments.\nFirst three arguments passed to create_ function, last argument is count\nof new elements must be created::\n\n    var options = element.createMany('option', {className: 'opt'}, [{'', textContent: 'Hello World'}], 3);\n\nResult::\n\n    [<option className=\"opt\">Hello World</option>,\n     <option className=\"opt\">Hello World</option>,\n     <option className=\"opt\">Hello World</option>]\n\n\n.. _appendChild:\nelement.appendChild\n----------------------------\n\nAppend nodes to element.\n\nTakes two arguments: DOM Node as first and interpretable structure as\nsecond. Returns inserted structure converted to DOM Nodes.\nIf second argument is function it will be evaluated and result\nwill be treated as children elements (based on returned content). If\nsecond argument is string it will be treated as tag name.\nObject as second argument (or as result of pervious two evaluations)\nwill be passed to createMany_.\nArray will be processed as sibling Nodes. Function will be recursivelly\ncalled for each array element with this element as second argument and\npervious element as first argument. Complex structures can be used in\ndynamic tree generation::\n\n    var div = element.create('div');\n    element.appendChild(div, [\n        {'p': {textContent: 'New text.'}},\n        'ul', [\n            {'li': {textContent: 'First list element.'}},\n            'li', [text],\n        ],\n        select2,\n        {'span': {className: 'spanclass', textContent: idx}}\n    ]);\n\nResult::\n\n    <div>\n        <p>New text.</p>\n        <ul>\n            <li>First list element.</li>\n            <li>\n                <text>Hello world!</text>\n            </li>\n        </ul>\n        <select id=\"show2\">\n            <option value=\"1\">one</option>\n            <option value=\"2\" selected>two</option>\n            <option value=\"3\">three</option>\n        </select>\n        <span class=\"spanclass\">1</span>\n    </div>\n\n\n.. _appendChildCopy:\nelement.appendChildCopy\n----------------------------\n\nSimilar to appendChild_ but do deep copy of input structure before\npassing it to appendChild. Returns new structure with DOM Nodes,\nstructure passed as second argument will not be changed.\n\n\n.. _addOption:\nelement.addOption\n----------------------------\n\nAdd options to the select element.\n\nTakes three arguments: dom element, array/object with options and\noptional array of selected options keys, which marks coincident\noptions as `selected`.\n\nIf second argument is array it will create options with the same\nvalue and text. If second argument is object, it will create options\nwith the value equal object keys and text equal object values::\n\n    var array_opts = [1,2,3];\n    var obj_opts = {1: 'one', 2: 'two', 3: 'three'};\n    element.addOption(select, opts, [2]);\n    element.addOption(select2, opts);\n\nResult::\n\n    <select id=\"show\">\n        <option value=\"1\">1</option>\n        <option value=\"2\" selected=\"selected\">2</option>\n        <option value=\"3\">3</option>\n    </select>\n    <select id=\"show2\">\n        <option value=\"1\">one</option>\n        <option value=\"2\">two</option>\n        <option value=\"3\">three</option>\n    </select>\n\n\n.. _getSelected:\nelement.getSelected\n----------------------------\n\nReturns index of selected option or -1 if none.\nIf Node is select-multiple tag, then array with selected values\nwill be returned instead of index.\n\nTakes one argument - select element::\n\n    select2.childNodes[1].selected = true;\n    element.getSelected(select2) == 1;\n\n\n.. _getSelectedParam:\nelement.getSelectedParam\n----------------------------\n\nReturns parameter value of selected option.\nTakes two arguments - SELECT node and optional parameter name.\nIf parameter name not specified, text content will be returned.\nIf Node is select-multiple tag, then array of values will be returned.\n\n\n.. _insert:\nelement.insert\n----------------------------\n\nInsert element before/after DOM Node.\n\nTakes three arguments: base DOM Node, structure which must be\ninserted before/afer base element and optional boolean parameter which\nindicates that element must be inserted after base element.\nReturns inserted elements structure.\nIf second argument is string it will be treated as Node tag.\nIf second argument is object it will be passed to createMany_ before\ninserting.\nIf second argument is array it will be recursivelly converted to DOM\nNodes tree and top nodes will be inserted in order.::\n\n\n    element.insert(select2, {'p': {textContent: 'New text before select.'}});\n    element.insert(select2, text, true); // Move text node from li to div\n\nResult::\n\n    <div>\n        <p>New text.</p>\n        <ul>\n            <li>First list element.</li>\n            <li>\n                <text>Hello world!</text>\n            </li>\n        </ul>\n        <p>New text before select.</p>\n        <select id=\"show2\">\n            <option value=\"1\">one</option>\n            <option value=\"2\" selected>two</option>\n            <option value=\"3\">three</option>\n        </select>\n        <span class=\"spanclass\"></span>\n    </div>\n\n    <div>\n        <p>New text.</p>\n        <ul>\n            <li>First list element.</li>\n            <li></li>\n        </ul>\n        <p>New text before select.</p>\n        <select id=\"show2\">\n            <option value=\"1\">one</option>\n            <option value=\"2\" selected>two</option>\n            <option value=\"3\">three</option>\n        </select>\n        <text>Hello world!</text>\n        <span class=\"spanclass\">1</span>\n    </div>\n\n\n.. _removeChildren:\nelement.removeChildren\n----------------------------\n\nRemoves all child nodes of element.\nTakes one argument: DOM Node. Returns array of children removed::\n\n    element.removeChildren(select);\n\nResult::\n\n    <select id=\"show\"></select>\n\n\n.. _remove:\nelement.remove\n----------------------------\n\nRemoves DOM Node and its children from parent.\nTakes two arguments: first required argument is DOM Node to remove,\nsecond optional argument specify if tree must be expanded (i.e.\nchildren must be removed from Node and placed to array next to Node).\nIf array is passed as first argument remove operation will be done\nfor each element.\nReturns array with removed elements and children (if second argument\nspecified)::\n\n    element.remove(select2);\n\nResult::\n\n    <div>\n        <p>New text.</p>\n        <ul>\n            <li>First list element.</li>\n            <li></li>\n        </ul>\n        <p>New text before select.</p>\n        <text>Hello world!</text>\n        <span class=\"spanclass\">1</span>\n    </div>\n\n\n.. _mapTree:\nelement.mapTree\n----------------------------\n\nBypass child nodes and calling argument function with the Node as the\nfirst argument.\n\nTakes two arguments: function to call and DOM Node which nodes will\nbe mapped.\n\nReturns array with result of function call.\nIf function applied to element returns nothing, then child nodes\nof this element will be mapped also and result of this map\nwill be returned::\n\n    //Function that return object with form data.\n    function getFormData(form){\n        var data = {};\n        var tags = ['INPUT', 'TEXTAREA', 'SELECT'];\n        element.mapTree(function(elm){\n            if (tags.indexOf(elm.tagName)<0)\n                return;\n            if (elm.type == \"checkbox\")\n                data[elm.name] = elm.checked;\n            else if (elm.type == \"select-multiple\")\n                data[elm.name] = element.getSelectedValues(elm);\n            else if (elm.type != \"button\")\n                data[elm.name] = elm.value;\n            return true;\n        }, form);\n        return data;\n    }\n\n\n.. _getOffset:\nelement.getOffset\n----------------------------\n\nGet offset between two DOM Nodes\n\nTakes two arguments: both DOM Nodes between which offset is calculated.\nReturns: object with two parameters: top and left which are first Node\noffset.\nIn case second parameter is not passed, offset is calculated relative\nto body element.\n\n\n.. _addition: Additions\n----------------------------\n\nAdditional utility functions is available:\n\nisElement, isArray, isObject, isHash, isNodeList, isFunction, isString,\nisNumber, isError, isUndef\n\nThis functions takes one argument and returns true if this variable has\na specific type.\n","maintainers":[{"name":"siranthony","email":"anthony@adsorbtion.org"}],"time":{"modified":"2022-06-16T08:32:45.121Z","created":"2014-10-18T15:27:24.615Z","1.2.0":"2014-10-18T15:27:24.615Z"},"homepage":"https://github.com/SirAnthony/element.js","keywords":["DOM","element"],"repository":{"type":"git","url":"https://github.com/SirAnthony/element.js.git"},"author":{"name":"Sir Anthony"},"bugs":{"url":"https://github.com/SirAnthony/element.js/issues"},"license":"MIT","readmeFilename":"README.rst"}