{"id":37347153,"url":"https://github.com/said10/dom-js","last_synced_at":"2026-01-16T04:00:06.485Z","repository":{"id":328924677,"uuid":"94831396","full_name":"said10/dom-js","owner":"said10","description":"dom-js is an extension of the native API of DOM to manipulate the DOM elements in an easy, simple and efficient way","archived":false,"fork":false,"pushed_at":"2018-08-29T23:06:00.000Z","size":400,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-19T20:56:12.530Z","etag":null,"topics":["ajax","api","browsers","childnodes","css","dom","dom-js","dom-manipulation","dom-node","domjs","easy-to-use","event-handlers","extension","html","insert","js-library","native","nodelist","selector","serialize-forms"],"latest_commit_sha":null,"homepage":"https://github.com/said10/dom-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/said10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-06-20T00:09:15.000Z","updated_at":"2025-10-30T22:40:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/said10/dom-js","commit_stats":null,"previous_names":["said10/dom-js"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/said10/dom-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Fdom-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Fdom-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Fdom-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Fdom-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/said10","download_url":"https://codeload.github.com/said10/dom-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said10%2Fdom-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T03:13:13.607Z","status":"ssl_error","status_checked_at":"2026-01-16T03:11:47.863Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","api","browsers","childnodes","css","dom","dom-js","dom-manipulation","dom-node","domjs","easy-to-use","event-handlers","extension","html","insert","js-library","native","nodelist","selector","serialize-forms"],"created_at":"2026-01-16T04:00:05.999Z","updated_at":"2026-01-16T04:00:06.357Z","avatar_url":"https://github.com/said10.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dom-js\ndom-js is an extension of the native API of DOM to manipulate the DOM elements in an easy, simple and efficient way\n\n## Compatibility\nis compatible with IE9+,IE Edge, FF3.5+, Chrome4+, opera 10.1+ All opera mini, Safari3.1+, Android browser2.1+ and ALL recent browsers\n\n## Table of contents\n\u003cdetails\u003e\n\n\u003c!-- toc --\u003e\n\n- [load](#load)\n- [get](#get)\n- [getAll](#getAll)\n- [getParent](#getParent)\n- [appendTo](#appendTo)\n- [remove](#remove)\n- [html](#html)\n- [find](#find)\n- [findAll](#findAll)\n- [attr](#attr)\n- [setAttr](#setAttr)\n- [before](#before)\n- [after](#after)\n- [addClass](#addClass)\n- [removeClass](#removeClass)\n- [hasClass](#hasClass)\n- [on](#on)\n- [off](#off)\n- [serialize](#serialize)\n- [eq](#license)\n- [val](#val)\n- [first](#first)\n- [last](#last)\n- [css](#css)\n- [show](#show)\n- [hide](#hide)\n- [offset](#offset)\n- [prependTo](#prependTo)\n- [closestTo](#closestTo)\n- [isCss](#isCss)\n- [next](#next)\n- [prev](#prev)\n- [wrap](#wrap)\n- [convertBase64](#convertBase64)\n- [ajax](#ajax)\n- [is_array](#is_array)\n- [is_object](#is_object)\n- [Links](#Links)\n- [License](#License)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## load\nThe load event occurs when DOM Object has been loaded\n```js\ndom.load(function() {\n    // your code here\n}):\n```\n\n## get\nReturn the first Element within the document that matches the specified selector\n\n```js\nvar container = dom.get(\"#container\");\n// \u003cdiv id='container'\u003e\n```\n## getAll\nReturns All Elements within the document that matches the specified selector\n\n```js\nvar container = dom.getAll(\".col-10\");\n// [\u003cdiv class='col-10'\u003e, \u003cdiv class='col-10'\u003e, \u003cdiv class='col-10'\u003e]\n```\n\n## getParent\nReturns the DOM node's parent Element\n\n```js\nvar parent = container.getParent();\n// \u003cbody\u003e\n```\n\n## appendTo\nadd a node to the end of the list of children of a Element\n\n```js\ncontainer.appendTo(\"\u003ch1\u003eTitle\u003c/h1\u003e\");\n```\n\n## remove\nremove the Element from the DOM\n\n```js\ncontainer.remove();\n```\n\n## html\nsets or gets the HTML syntax describing the element's descendants\n\n```js\ncontainer.html('\u003cspan\u003etext lorem ipsum\u003c/span\u003e');\n```\n\n## find\nReturn the first Element within the Element that matches the specified selector\n\n```js\ncontainer.find('span');\n// \u003cspan\u003e\n```\n\n## findAll\nReturn All Elements within the Element that matches the specified selector\n\n```js\ncontainer.findAll('.span');\n// [\u003cspan class='span'\u003e, \u003cspan class='span'\u003e, \u003cspan class='span'\u003e]\n```\n\n## attr\nget the value of an attribute on the specified element\n\n```js\ncontainer.attr('id');\n// container\n```\n\n## setAttr\nset the value of an attribute on the specified element\n\n```js\nvar logo = dom.get(\"#logo\")\nlogo.setAttr('alt', 'domJS');\n```\n\n## before\ninserts a set of Node or DOMString objects in the children list of this ChildNode's parent,  just before this ChildNode.\n\n```js\ncontainer.before('\u003ch1\u003eTitle of page\u003c/h1\u003e');\n```\n\n## after\ninserts a set of Node or DOMString objects in the children list of this ChildNode's parent,  just after this ChildNode.\n\n```js\ncontainer.after('\u003ch2\u003eLorem ipsum\u003c/h2\u003e');\n```\n\n## addClass\nAdds the specified class(es) to Element\n\n```js\ncontainer.addClass('col-12 center-auto');\n```\n\n## removeClass\nRemove the specified class(es) to Element\n\n```js\ncontainer.removeClass('col-12 center-auto');\n```\n\n## hasClass\nDetermine whether any of the matched elements are assigned the given classe.\n\n```js\ncontainer.hasClass('container');\n// true\n```\n\n## on\nAttach an event handler function for one event to the selected elements.\nType of event accept all the events of mouse \u0026 keyboard exemple :  click, load, keypress, ...\n\n```js\ncontainer.on('click', function(event) {\n    console.log(this); // \u003cdiv id=\"container\"\u003e\n    console.log(event); // Event Object\n});\n```\n\n## off\nremove an event handler for one event to the selected elements.\n\n```js\ncontainer.off('click');\n\nOR\n\ncontainer.off('click', function(event) {\n    console.log(this); // \u003cdiv id=\"container\"\u003e\n    console.log(event); // Event Object\n});\n```\n\n\n## serialize\nEncode a set of form elements as a multiple format for submission.\n\n```js\nvar form = dom.get(\"#form\");\nform.serialize(\"string\") // return form encoded to string\nform.serialize(\"array\") // return form encoded to array\nform.serialize(\"object\") // return form encoded to object\n\n```\n## eq\nGet the Element in NodeList by index\n\n```js\nvar input = dom.getAll(\"input[type='text']\").eq(0);\n// \u003cinput name=\"input_0\" /\u003e\n```\n\n## val\nGet the current value of the inputs elements\n\n```js\ninput.val();\n// test value\n\n```\n\n## first\nGet the first Element in NodeList\n\n```js\nvar input = dom.getAll(\"input[type='text']\").first();\n// \u003cinput name=\"input_0\" /\u003e\n\n```\n\n## last\nGet the last Element in NodeList\n\n```js\nvar input = dom.getAll(\"input[type='text']\").last();\n// \u003cinput name=\"input_10\" /\u003e\n\n```\n\n## css\nset one or more CSS properties for matched element.\n\n```js\ncontainer.css({ \"background-color\" : \"#ff0000\", \"font-size\" : \"25px\", \"color\" : \"#ccc\" });\n\n```\n\n## show\nShow Element\n\n```js\ncontainer.show();\n\n```\n\n## hide\nHide Element\n\n```js\ncontainer.hide();\n\n```\n\n## offset\nGet the current coordinates of the element (top, left, width, height)\n\n```js\ncontainer.offset();\n// { top ; 10, left : 10, width : 960, height : 700 }\n```\n\n## prependTo\nInsert content to the beginning of Element\n\n```js\ncontainer.prependTo('\u003cspan\u003edate of publication : 20/06/2017\u003c/span\u003e');\n```\n\n## closestTo\nget the first parent element that matches the selector\n\n```js\nvar span = dom.get(\"#span\");\nspan.closestTo('#container');\n// \u003cdiv id=\"container\"\u003e\n```\n\n## isCss\nCheck if arguments matched with the style CSS of Element and return true/false\n\n```js\nvar span = dom.get(\"#span\");\nspan.isCss(\"color=red\");\n// false or true\n```\n\n## next\nget the next Element of this DOMNode\n\n```js\nvar span_next = span.next();\n// \u003cp\u003e\n```\n\n## prev\nget the prev Element of this DOMNode\n\n```js\nvar span_prev = span.prev();\n// \u003cspan\u003e\n```\n\n## wrap\nWrap an HTML structure around each element in the set of matched elements.\n\n```js\nvar li_menu = container.getAll(\"li.links\");\nli_menu.wrap(\"\u003cul class='block-display'\u003e\");\n// \u003cul class=\"block-display\"\u003e\n```\n\n## convertBase64\nget Base64 of file uploaded by the user in input File\n\n```js\nvar input_logo = container.find(\"input[type='file']\");\ninput_logo.convertBase64(function(bse64) {\n    console.log(base64); // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA.../j/BRgA+iQ8SzlkV/IAAAAASUVORK5CYII=\n});\n```\n\n## ajax\nExecute the requests HTTP to server by AJAX methode\n\n```js\ndom.ajax({\n    url :'http://exemple.com/get-data',\n    type : 'get' // post, put, delete\n    cache : true,\n    headers : { \"Accept\" : \"application/json\" },\n    data : [],\n    async : true // for activate or desactivate asynchronous request\n    mimeType : null,\n    success : function(data) {\n        console.log(data);\n    }, \n    error : function(status, error, event) {\n        console.log(error);\n    }\n});\n```\n\n## is_array\nmethode for verify if the variable is the Array type or not\n\n```js\nvar list = [\"orange\", \"apple\", \"banane\"];\nvar check_array = dom.is_array(list);\n// true\n```\n\n## is_object\nmethode for verify if the variable is the Object type or not\n\n```js\nvar object = { name : \"john doe\" };\nvar check_object = dom.is_object(object);\n// true\n```\n\n# Links\n* [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)\n\n\n# License\n\nMIT - [Said10](https://github.com/said10/)\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid10%2Fdom-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaid10%2Fdom-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid10%2Fdom-js/lists"}