{"id":16945139,"url":"https://github.com/rafbm/diy-dom-library","last_synced_at":"2026-05-19T00:02:35.775Z","repository":{"id":1942814,"uuid":"2872210","full_name":"rafbm/diy-dom-library","owner":"rafbm","description":"Starter kit for developing your own jQuery-compatible DOM library","archived":false,"fork":false,"pushed_at":"2011-12-01T22:19:55.000Z","size":103,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T05:26:05.704Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/rafbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2011-11-29T03:05:22.000Z","updated_at":"2014-01-22T05:42:43.000Z","dependencies_parsed_at":"2022-08-29T14:01:47.249Z","dependency_job_id":null,"html_url":"https://github.com/rafbm/diy-dom-library","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafbm%2Fdiy-dom-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafbm%2Fdiy-dom-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafbm%2Fdiy-dom-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafbm%2Fdiy-dom-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafbm","download_url":"https://codeload.github.com/rafbm/diy-dom-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244767753,"owners_count":20507110,"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-10-13T21:21:14.679Z","updated_at":"2026-05-19T00:02:30.749Z","avatar_url":"https://github.com/rafbm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Do-It-Yourself DOM Library\n==========================\n\n\nIntro\n-----\n\n\n[diy-dom-library](https://github.com/rafBM/diy-dom-library) is a starter kit for developing you’re own jQuery-based DOM library. It includes:\n\n- a basic JavaScript class (`DomWrapper`) with placeholder methods and a global `$` shortcut to the class’ constructor\n- an HTML playground to mess around with some DOM\n- unit tests so you can feel good about your progress\n\nThe purpose of this is of course to learn. And have fun. You’ll love to find out how jQuery uses these low-level DOM APIs internally to build an expressive, powerful and flexible API on top of it.\n\n\n### Why jQuery?\n\nBecause it has become the de facto standard and everyone is familiar with its API. If you’ve never used jQuery, you’re probably not into front-end web development. [Zepto](http://zeptojs.com/) is also based on a jQuery-compatible API.\n\n\n### Getting started\n\n```sh\ngit clone git@github.com:rafBM/diy-dom-library.git\ncd diy-dom-library\ngit submodule init # for qunit\ngit submodule update\n```\n\n\n### Testing\n\nOpen `test/index.html` in a browser of your choice.\n\n\n### “Is this thing complete?”\n\nDefinitely not! Feel free to add missing methods and tests.\n\n\nSpecs\n-----\n\nFirst of all, please **don’t waste your time with cross-browser compatibility** first. Start by coding for and testing in your favourite browser only. This way you won’t encounter quirks that require you to find two different solutions to the same problem before considering it done. You will progress much faster and will be much more motivated.\n\nYou might want to iterate on your project by multiple steps. Then this could be a pretty good road map to have:\n\n### (already baked in with love)\n\n```\n$(element)\n$(HTMLCollection)\n\n.each(callback)\n```\n\n### The Basics\n\n```\n$(selector)\n$(html_string)\n\n.text([text]) (be careful about how you decide to get or set…)\n.html([html]) (be careful about how you decide to get or set…)\n\n.addClass\n.removeClass\n.hasClass\n.toggleClass\n\n.is(selector)\n\n.append(element)\n.append(html_string)\n.prepend(element)\n.prepend(html_string)\n.before(element)\n.before(html_string)\n.after(element)\n.after(html_string)\n.remove\n\n.find([selector]) (watch out for duplicates!)\n.prev([selector])\n.next([selector])\n.parent([selector])\n\n.css (accept numbers for pixel values, but there’s a catch…)\n\n.on(event, callback)\n```\n\nAlways make sure calling methods on empty DomWrapper sets doesn’t break!\n\n\n### Grown Up\n\n```\n$(selector, context)\n\n.addClass, .removeClass, .toggleClass with multiple classes\n\n.filter(selector)\n.not(selector)\n\n.append(DomWrapper_instance)\n.append(HTMLCollection)\n.prepend(DomWrapper_instance)\n.prepend(HTMLCollection)\n.before(DomWrapper_instance)\n.before(HTMLCollection)\n.after(DomWrapper_instance)\n.after(HTMLCollection)\n\n.children([selector])\n.siblings([selector])\n.closest([selector])\n\n.css(map)\n\n.on('mouseenter')\n.on('mouseleave')\n.on('event1 event2 event3', callback)\n.off\n```\n\n*Then* you could start thinking about cross-browser support.\n\n\n### Advanced (overkill…)\n\n```\n$(DomWrapper_instance)\n\n.append, .prepend, .before and .after with multiple arguments\n\n.on(map)\n\nevent delegation\n```\n\n\nResources\n----------\n\n\n### [Quirskmode](http://quirksmode.org/)\n\nJust skim through [The Great Compatibility Tables](http://quirksmode.org/compatibility.html) and you’ll learn plenty. Other articles are also worth mentioning:\n\n- http://quirksmode.org/dom/getstyles.html\n- http://quirksmode.org/js/events_advanced.html\n- http://quirksmode.org/js/events_order.html\n- http://quirksmode.org/js/events_mouse.html\n\n\n### [Mozilla Developer Network](https://developer.mozilla.org/en/Gecko_DOM_Reference)\n\nOf course.\n\n\n### [Dottoro](http://help.dottoro.com/)\n\nSurprisingly awesome resource for anything client-side, including massive amounts of cross-browser tips.\n\n\n### [Can I use?](http://caniuse.com/)\n\nScroll to the bottom, click “Show all” and explore!\n\n\n### Random clues\n\n`querySelectorAll`, `createContextualFragment`, `insertAdjacentHTML`, `getComputedStyle`, `matchesSelector`…\n\n\nEnjoy!\n======\n\n\nAnd while you’re here to learn… why not try to write this DOM library semicolonless from top to bottom? See if you can look back after then… ;)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafbm%2Fdiy-dom-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafbm%2Fdiy-dom-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafbm%2Fdiy-dom-library/lists"}