{"id":23053697,"url":"https://github.com/component/dom","last_synced_at":"2025-04-06T00:09:01.589Z","repository":{"id":4442542,"uuid":"5580883","full_name":"component/dom","owner":"component","description":"DOM traversal, manipulation and events aggregate library (like jQuery)","archived":false,"fork":false,"pushed_at":"2015-06-14T14:01:36.000Z","size":795,"stargazers_count":226,"open_issues_count":18,"forks_count":49,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-13T23:09:46.380Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/component.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-28T04:44:05.000Z","updated_at":"2024-04-12T14:25:11.000Z","dependencies_parsed_at":"2022-09-26T16:21:49.341Z","dependency_job_id":null,"html_url":"https://github.com/component/dom","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component%2Fdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/component","download_url":"https://codeload.github.com/component/dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935387,"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":[],"created_at":"2024-12-16T00:19:14.914Z","updated_at":"2025-04-06T00:09:01.572Z","avatar_url":"https://github.com/component.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dom\n\n  jQuery inspired DOM traversal / manipulation component. Aggregates the\n  following components to create a more familiar experience when you need\n  the combined functionality of:\n\n  - [domify](http://github.com/component/domify) to convert HTML to DOM nodes\n  - [query](http://github.com/component/query) for selector engine integration\n  - [classes](http://github.com/component/classes) to add, remove, and toggle classes\n  - [delegate](http://github.com/component/delegate) for event delegation\n  - [event](http://github.com/component/event) for event binding\n  - [value](http://github.com/component/value) for form field values\n  - [css](http://github.com/component/css) for style properties\n\n## Installation\n\n  With [component](https://github.com/component/component):\n\n```\n$ component install component/dom\n```\n\n## Stand-alone\n\n  This library may be used stand-alone without the component\n  tool, simply add ./dom.js to your application and reference\n  the `dom` global. With all its dependencies dom is the following size:\n\n```\n   28K  dom.js\n   16K  dom.min.js\n  8.0K  dom.js.gz\n  4.0K  dom.min.js.gz\n```\n\n## Example\n\n```js\nvar dom = require('dom');\n\ndom('li').select(function(el){\n  return el.text() == 'Maru';\n}).addClass('amazing');\n```\n\n## API\n\n  All occurrances of `List` refer to:\n\n  - an element passed\n  - a string of html\n  - a selector string\n  - a node list\n  - an array of nodes\n  - a dom `List` itself\n\n### dom(list)\n\n  Return a `List` with the given element(s)\n  via selector, html, arrays, nodelists, etc.\n\n```js\ndom('ul li');\ndom(dom('a'));\ndom('\u003cp\u003eHello\u003c/p\u003e');\n```\n\n### .append(list)\n\n  Append and return `list`:\n\n```js\ndom('ul')\n  .append('\u003cli\u003eTobi\u003c/li\u003e')\n  .addClass('user');\n```\n\n### .prepend(list)\n\n  Prepend and return `list`:\n\n```js\ndom('ul')\n  .prepend('\u003cli\u003eTobi\u003c/li\u003e')\n  .addClass('user');\n```\n\n### .insertAfter(list)\n\n  Insert after:\n\n```js\ndom('\u003cdiv\u003e\u003c/div\u003e')\n  .insertAfter('body');\n```\n\n### .replace(list)\n\n  Replace:\n\n```js\ndom('.placeholder')\n  .replace('\u003cdiv\u003eTobi\u003c/div\u003e')\n  .addClass('tobi');\n```\n\n### .on(event, fn, [capture])\n\n  Bind `event` handler function:\n\n```js\ndom('a.remove').on('click', function(e){\n\n});\n```\n\n### .on(event, selector, fn, [capture])\n\n  Bind delegate `event` handler function for `selector`:\n\n```js\ndom('ul li').on('click', 'a.remove', function(e){\n\n});\n```\n\n### .off(event, fn, [capture])\n\n  Unbind `event` callback `fn`.\n\n```js\ndom('a.remove').off('click', onremove);\n```\n\n### .off(event, selector, fn, [capture])\n\n  Unbind delegate `event` callback `fn` with `selector`.\n\n```js\ndom('ul li').off('click', 'a.remove', onremove);\n```\n\n### .appendTo(list)\n\n  Append elements in the list to `list`\n  and return itself for chaining.\n\n```js\ndom('\u003cli\u003eTobi\u003c/li\u003e')\n  .appendTo('ul')\n  .addClass('user');\n```\n\n### .attr(name)\n\n  Return value for attribute `name`:\n\n```js\nvar url = dom('img').attr('src');\n```\n\n### .attr(name, val)\n\n  Set attribute `name` to `val`.\n\n```js\ndom('img').attr('src', 'image/of/maru.jpg');\n```\n\n### .ATTR()\n\n  Attribute getters. These are functionally equivalent\n  to `.attr(ATTR)`:\n\n```js\nel.id()\nel.src()\nel.rel()\nel.cols()\nel.rows()\nel.name()\nel.href()\nel.title()\nel.style()\nel.tabindex()\nel.placeholder()\n```\n\n### .ATTR(val)\n\n  Attribute setters. These are functionally equivalent\n  to `.attr(ATTR, val)`:\n\n```js\nel.id('item-1')\nel.src('some/image.png')\nel.rel('stylesheet')\nel.cols(2)\nel.rows(3)\nel.name('username')\nel.href('http://google.com')\nel.title('Maru the cat')\nel.style('color: white')\nel.tabindex(2)\nel.placeholder('Username')\n```\n\n### .css(prop)\n\n  Get css property value:\n\n```js\ndom(el).css('width');\n```\n\n### .css(prop, val)\n\n  Set css property value:\n\n```js\ndom(el).css('width', '300px');\n```\n\n### .css(object)\n\n  Set css property values:\n\n```js\ndom(el).css({\n  top: 5,\n  left: 10\n});\n```\n\n### .addClass(name)\n\n  Add a class `name` to all elements in the list.\n\n```js\ndom('img').addClass('loading');\n```\n\n### .removeClass(name)\n\n  Remove class `name` to all elements in the list.\n\n```js\ndom('img.loading').removeClass('loading');\n```\n\n### .toggleClass(name, [bool])\n\n  Toggle class `name`, with optional `bool`.\n\n```js\ndom('img').toggleClass('loading');\ndom('img').toggleClass('loading', image.pending);\n```\n\n### .hasClass(name)\n\n  Check if any element in the list has the given class `name`.\n\n```js\ndom('img').hasClass('loading');\n```\n\n### .find(selector)\n\n  Return a list of descendants matching `selector`.\n\n```js\ndom('.uploads').find('.complete').remove();\n```\n\n### .each(fn)\n\n  Iterate elements passing each one as a list, and its index:\n\n```js\ndom('ul li').each(function(li, i){\n  if (li.hasClass('complete')) {\n    li.remove();\n  }\n});\n```\n\n### .empty()\n\n  Empties the elements.\n\n```js\nvar list = dom('\u003cdiv\u003e\u003ca href=\"/meow.html\"\u003ecute kitty\u003c/a\u003e\u003c/div\u003e');\nassert('' == list.empty().html());\n```\n\n### .forEach(fn)\n\n  Iterate elements passing each one, and its index:\n\n```js\ndom('ul li').forEach(function(li, i){\n  if (li.className == 'complete') {\n    li.parentNode.removeChild(li);\n  }\n});\n```\n\n### .map(fn)\n\n  Return an array with map `fn`, passing each element as a list:\n\n```js\nvar hrefs = dom('a').map(function(a){\n  return a.attr('href');\n});\n```\n\nOr with a string:\n\n```js\nvar types = dom('input').map('type');\n```\n\n### .select(fn)\n\n  Filter elements with the given function, passing each element\n  as a list. This method is aliased as `.filter(fn)`.\n\n```js\nvar pending = dom('ul li').select(function(li){\n  return li.hasClass('pending');\n});\n```\n\nOr with a string:\n\n```js\nvar imgs = dom('img').select('src');\n```\n\n### .reject(fn)\n\n  Reject elements with the given function, passing each element\n  as a list.\n\n```js\nvar active = dom('ul li').reject(function(li){\n  return li.hasClass('pending');\n});\n```\n\nOr with a string:\n\n```js\nvar active = dom('input').reject('disabled');\n```\n\n### .at(i)\n\n  Return a `List` containing the `i`th element.\n\n```js\ndom('ul li').at(1).remove();\n```\n\n### .first()\n\n  Return a `List` containing the first element:\n\n```js\ndom('ul li').first().remove();\n```\n\n### .last()\n\n  Return a `List` containing the last element:\n\n```js\ndom('ul li').last().remove();\n```\n\n### .html()\n\n  Return the inner html.\n\n### .html(str)\n\n  Set the inner html to `str`.\n\n### .text()\n\n  Return the text content.\n\n### .text(str)\n\n  Set text content to `str`.\n\n### .clone()\n\n  Return a cloned list of cloned nodes.\n\n### .focus()\n\n  Set focus on the element.\n\n## .use([name], fn|obj)\n\nSimilar to jQuery, you can extend dom to support plugins:\n\n```js\nvar get = function(i) { return this[i]; }\ndom.use('get', get);\n```\n\nUsing the function's name:\n\n```js\nfunction get(i) { return this[i]; }\ndom.use(get);\n```\n\nPassing an object through:\n\n```js\nvar obj = {};\nobj.get = function(i) { return this[i]; }\nobj.draggable = function() { ... }\ndom.use(obj);\n```\n\n## Notes\n\n  It is recommended that you do _not_ depend on this library directly\n  when creating public components, unless you require most or all of\n  the functionality provided. Otherwise it is preferred that you use\n  the smaller more specific components.\n\n  This lib will not include _any_ XHR support, js animations, promises, or anything\n  else out of scope. This library is for DOM manipulation, traversal, and events only.\n\n  This library is _not_ aiming for feature parity with jQuery.\n\n## Test\n\n    npm install component-test\n    make test\n\n## License\n\n  MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent%2Fdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomponent%2Fdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent%2Fdom/lists"}