{"id":18828402,"url":"https://github.com/dealfonso/dom2object","last_synced_at":"2025-10-18T04:51:08.824Z","repository":{"id":200800510,"uuid":"706132508","full_name":"dealfonso/dom2object","owner":"dealfonso","description":"Converts a fragment of the DOM to an object where the named properties can be accessed as properties","archived":false,"fork":false,"pushed_at":"2023-10-22T18:45:38.000Z","size":14,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-30T06:11:52.533Z","etag":null,"topics":["dom","dom-manipulation","dom-object","html","html5","javascript","javascript-library","javascript-proxy"],"latest_commit_sha":null,"homepage":"","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/dealfonso.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}},"created_at":"2023-10-17T11:15:04.000Z","updated_at":"2024-11-10T15:25:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e42df0b-e216-4491-85a9-bb97da6b9568","html_url":"https://github.com/dealfonso/dom2object","commit_stats":null,"previous_names":["dealfonso/dom2object"],"tags_count":1,"template":false,"template_full_name":"dealfonso/jsweblibrary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fdom2object","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fdom2object/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fdom2object/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fdom2object/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dealfonso","download_url":"https://codeload.github.com/dealfonso/dom2object/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239763648,"owners_count":19692812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["dom","dom-manipulation","dom-object","html","html5","javascript","javascript-library","javascript-proxy"],"created_at":"2024-11-08T01:24:55.494Z","updated_at":"2025-10-18T04:51:03.797Z","avatar_url":"https://github.com/dealfonso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DOM2Object\n\nThis library converts a DOM tree to an object so that its named properties can be accessed using dot notation.\n\n**Example**\n\n```html\n\u003cdiv id=\"mydata\"\u003e\n    \u003cinput type=\"text\" name=\"username\" value=\"johndoe\" /\u003e\n    \u003cinput type=\"password\" name=\"password\" value=\"secret\" /\u003e\n    \u003cbutton id=\"mybutton\"\u003eClick me!\u003c/button\u003e\n\u003c/div\u003e\n```\n\n```javascript\nvar data = DOM2Object(\"#mydata\");\ndata.mybutton.onclick = function() {\n    console.log(`Button clicked! ${data.username.value}:${data.password.value}`);\n};\n```\n\nIn this example, the `data` object can be seen somehow as the following object:\n\n```javascript\ndata = {\n    username: HTMLElement { ... },\n    password: HTMLElement { ... },\n    mybutton: HTMLElement { ... }\n}\n```\n\nBut `data` itself keeps the original attributes and methods of the DOM elements. So you can still get access to `data.children` or `data.innerHTML` attributes, or `data.onclick` event handlers, for example.\n\n## Setup\n\n### Serving from your servers\n\nYou can clone this repo and copy the main file into the appropriate folder, to serve using your server:\n\n```console\n$ git clone\n$ cp dom2object/dist/dom2object.js /path/to/my/html/folder\n```\n\n### Using a CDN\n\nYou can use this library directly from jsdelivr CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/dealfonso/dom2object/dist/dom2object.js\"\u003e\u003c/script\u003e\n```\n\n## Use cases\n\n### Basic use case\n\nIn an HTML fragment like the next one:\n\n```html\n\u003cdiv id=\"mydata\"\u003e\n    \u003cinput type=\"text\" name=\"username\" value=\"johndoe\" /\u003e\n    \u003cinput type=\"password\" name=\"password\" value=\"secret\" /\u003e\n    \u003cbutton id=\"mybutton\"\u003eClick me!\u003c/button\u003e\n\u003c/div\u003e\n```\n\nWe can use `DOM2Object` to get an object with the DOM tree as properties:\n\n```javascript\nvar data = DOM2Object(\"#mydata\");\ndata.mybutton.onclick = function() {\n    alert(`Button clicked! ${data.username.value}:${data.password.value}`);\n};\n```\n\nIn this case, we gained access to the button with id `mybutton` as a property of the `data` object. Have in mind that we are getting access to the raw HTMLElement, So we can access its `onclick` event handler and assign a new function to it.\n\nThen we can use the `data` object to access the other elements in the DOM tree, like the `username` and `password` inputs. But, as they are also _HTMLElements_, we can access their attributes and methods (in the example, we are getting `value`).\n\nThe expression is equivalent to the following one:\n\n```javascript\nvar data = {\n    username: document.querySelector(\"#mydata input[name='username']\"),\n    password: document.querySelector(\"#mydata input[name='password']\"),\n    mybutton: document.querySelector(\"#mydata button[id='mybutton']\")\n};\n```\n\nBut we also keep access to the root object's attributes and methods, like `data.children` or `data.innerHTML`.\n\n### Nested objects\n\nIn case of nested objects, the library will create a new object for each named child. For example, in the following HTML fragment:\n\n```html\n\u003cdiv id=\"mydata2\"\u003e\n  \u003cdiv id=\"mainData\"\u003e\n    \u003cinput type=\"text\" name=\"name\" value=\"John\"\u003e\n    \u003cinput type=\"text\" name=\"surname\" value=\"Doe\"\u003e\n  \u003c/div\u003e\n  \u003cdiv id=\"userData\"\u003e\n    \u003cinput type=\"text\" name=\"username\" value=\"johndoe\"\u003e\n    \u003cinput type=\"password\" name=\"password\" value=\"secret\"\u003e\n  \u003c/div\u003e\n  \u003cbutton id=\"mybutton\"\u003eClick me!\u003c/button\u003e\n\u003c/div\u003e\n```\n\nIf we execute `data = DOM2Object(\"#mydata2\")` we will get an object with an structure like the next one (but keeping the access to the attributes and methods of `data`):\n\n```javascript\ndata = {\n    mainData: {\n        name: HTMLElement { ... },\n        surname: HTMLElement { ... }\n    },\n    userData: {\n        username: HTMLElement { ... },\n        password: HTMLElement { ... }\n    },\n    mybutton: HTMLElement { ... }\n}\n```\n\nSo it is possible to access the `name` input as `data.mainData.name` or `data[\"mainData\"][\"name\"]` as in the following example:\n\n```javascript\nvar data = DOM2Object(\"#mydata2\");\ndata.mybutton.onclick = function() {\n    alert(`Button clicked! ${data.mainData.name.value}:${data.userData.password.value}`);\n};\n```\n\n### Anonymous elements\n\nThe default behaviour of the library is to ignore anonymous elements. Anonymous elements are those that don't have a name or an id. For example, in the following HTML fragment:\n\n```html\n\u003cdiv id=\"mydata3\"\u003e\n  \u003cdiv class=\"nameData\"\u003e\n    \u003cinput type=\"text\" name=\"name\" value=\"John\"\u003e\n    \u003cinput type=\"text\" name=\"surname\" value=\"Doe\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"userData\"\u003e\n    \u003cinput type=\"text\" name=\"username\" value=\"johndoe\"\u003e\n    \u003cinput type=\"password\" name=\"password\" value=\"secret\"\u003e\n  \u003c/div\u003e\n  \u003cbutton id=\"mybutton\"\u003eClick me!\u003c/button\u003e\n\u003c/div\u003e\n```\n\nIf we execute `data = DOM2Object(\"#mydata3\")` we will get an object with an structure like the next one:\n\n```javascript\ndata = {\n    mybutton: HTMLElement { ... }\n}\n```\n\nThis is because both `div` elements don't have a name or an id. So they are ignored.\n\nWe can make that the library acquires the children of anonymous elements by passing `true` as second parameter to `DOM2Object`. In that case, the child elements will be associated to the first parent that has a name or an id. If we make the call `data = DOM2Object(\"#mydata3\", true)` we will get an object with an structure like the next one:\n\n```javascript\ndata = {\n    name: HTMLElement { ... },\n    surname: HTMLElement { ... },\n    username: HTMLElement { ... },\n    password: HTMLElement { ... },\n    mybutton: HTMLElement { ... }\n}\n```\n\nBoth use cases may coexists. For example, in the following HTML fragment:\n\n```html\n\u003cdiv id=\"mydata4\"\u003e\n  \u003cdiv id=\"nameData\"\u003e\n    \u003cinput type=\"text\" name=\"name\" value=\"John\"\u003e\n    \u003cinput type=\"text\" name=\"surname\" value=\"Doe\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"userData\"\u003e\n    \u003cinput type=\"text\" name=\"username\" value=\"johndoe\"\u003e\n    \u003cinput type=\"password\" name=\"password\" value=\"secret\"\u003e\n  \u003c/div\u003e\n  \u003cbutton id=\"mybutton\"\u003eClick me!\u003c/button\u003e\n```\n\nIf we execute `data = DOM2Object(\"#mydata4\", true)` we will get an object with an structure like the next one:\n\n```javascript\ndata = {\n    nameData: {\n        name: HTMLElement { ... },\n        surname: HTMLElement { ... }\n    },\n    username: HTMLElement { ... },\n    password: HTMLElement { ... },\n    mybutton: HTMLElement { ... }\n}\n```\n\n## Technical details\n\n\u003e **NOTE**: In a common use of the library all the details contained in this section can be ignored in most of cases, but it is important to know them in case you want to use the library in a more advanced way.\n\nThe object returned by `DOM2Object` is a proxy object. This means that the object itself is not the HTMLElement, but a proxy that will redirect the calls to the _HTMLElement_. This is done to avoid the problem of the _HTMLElements_ being updated in the DOM tree, but the object properties not being updated.\n\nSo it may occurr a conflict if you use _HTMLElements_ with an _id_ or a _name_ that is the same as the name of an attribute or method of the _HTMLElement_ (it is extrange, but it may happen). In that case, the named _HTMLElement_ will substitute the existing attribute or method in the proxy object.\n\ne.g.:\n\n```html\n\u003cdiv id=\"mydata\"\u003e\n    \u003cinput type=\"text\" name=\"children\" value=\"johndoe\" /\u003e\n    \u003cinput type=\"password\" name=\"innerHTML\" value=\"secret\" /\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    var data = DOM2Object(\"#mydata\");\n    console.log(data.children.value);\n\u003c/script\u003e\n```\n\nIn this case, the `data.children` property will be the _HTMLElement_ with `name=\"children\"`, and the `data.innerHTML` property will be the _HTMLElement_ with `name=\"innerHTML\"`, instead of the legacy attributes of the `children` and `innerHTML` attributes from the `div` element.\n\n\u003e If this case happens and it is needed to access the legacy attributes, you can use the `data._el.children` and `data._el.innerHTML` attributes.\n\n### Proxy object attributes\n\nAppart from the standard _HTMLElement_ attributes and methods, the proxy object will also have the following attributes:\n\n- **_el**: the original _HTMLElement_.\n- **_children**: an object with the named children of the _HTMLElement_ (the keys are the name or id and the values are the raw objects).\n- **_childrenNames**: an array with the names of the children of the _HTMLElement_. It is the same as `Object.keys(_children)`.\n\nIf an object has these properties, that means that it has named children and thus it will be a proxy. If it doesn't have these properties, it will be a raw _HTMLElement_.\n\n## Documentation\n\nThe main function is `DOM2Object`, which receives a DOM element or a CSS selector and returns an object with the DOM tree as properties.\n\n```javascript\nDOM2Object(elementOrSelector, acquireChildrenFromAnonymous = false);\n```\n\n- **elementOrSelector**: a DOM element or a CSS selector.\n- **acquireChildrenFromAnonymous**: a boolean value indicating if the children of anonymous elements should be acquired. Default: `false`.\n\nThe `DOM2Object` function also has the following attributes and methods:\n\n- `DOM2Object.version`: contains the version of the library.\n- `DOM2Object.multiple(elements, acquireChildrenFromAnonymous = false)`: a function that receives an array of DOM elements or CSS selectors and returns an array of objects with the DOM tree as properties.\n    - **elements**: an array of DOM elements or CSS selectors, or a single selector may select multiple objects in the DOM (e.g. `div`). Even if associated, the result will be flattened to a single array.\n    - **acquireChildrenFromAnonymous**: a boolean value indicating if the children of anonymous elements should be acquired. Default: `false`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fdom2object","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdealfonso%2Fdom2object","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fdom2object/lists"}