{"id":13877452,"url":"https://github.com/ded/bonzo","last_synced_at":"2025-05-15T06:08:57.490Z","repository":{"id":57190075,"uuid":"1585031","full_name":"ded/bonzo","owner":"ded","description":"library agnostic, extensible DOM utility","archived":false,"fork":false,"pushed_at":"2016-06-02T12:05:39.000Z","size":988,"stargazers_count":1313,"open_issues_count":24,"forks_count":137,"subscribers_count":65,"default_branch":"master","last_synced_at":"2025-05-14T09:25:56.664Z","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":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ded.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}},"created_at":"2011-04-07T23:59:24.000Z","updated_at":"2025-04-28T00:15:03.000Z","dependencies_parsed_at":"2022-08-27T10:41:33.121Z","dependency_job_id":null,"html_url":"https://github.com/ded/bonzo","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fbonzo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fbonzo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fbonzo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ded%2Fbonzo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ded","download_url":"https://codeload.github.com/ded/bonzo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283350,"owners_count":22045141,"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-08-06T08:01:01.967Z","updated_at":"2025-05-15T06:08:57.469Z","avatar_url":"https://github.com/ded.png","language":"JavaScript","readme":"## Bonzo\n\nA library agnostic extensible DOM utility. Nothing else.\n\nBonzo is designed to live in any host library, such as [Ender](http://enderjs.com), or simply as a stand-alone tool for the majority of your DOM-related tasks.\n\n**It looks like this:**\n\n``` js\nbonzo(elements)\n  .hide()\n  .addClass('foo')\n  .append('\u003cp\u003ethe happs\u003c/p\u003e')\n  .css({\n    color: 'red',\n    'background-color': 'white'\n  })\n  .show()\n```\n\n---------\n\n  * \u003ca href=\"#useselector\"\u003e\u003cb\u003eUse with a selector engine\u003c/b\u003e\u003c/a\u003e\n  * \u003ca href=\"#extensions\"\u003e\u003cb\u003eBonzo extension API\u003c/b\u003e\u003c/a\u003e\n  * \u003ca href=\"#api\"\u003e\u003cb\u003eComplete Bonzo API\u003c/b\u003e\u003c/a\u003e\n  * \u003ca href=\"#aboutname\"\u003e\u003cb\u003eAbout the name \"Bonzo\"\u003c/b\u003e\u003c/a\u003e\n  * Contributing:\n    - \u003ca href=\"#building\"\u003e\u003cb\u003eBuilding\u003c/b\u003e\u003c/a\u003e\n    - \u003ca href=\"#tests\"\u003e\u003cb\u003eTests\u003c/b\u003e\u003c/a\u003e\n  * \u003ca href=\"#browsers\"\u003e\u003cb\u003eBrowser support\u003c/b\u003e\u003c/a\u003e\n  * \u003ca href=\"#ender\"\u003e\u003cb\u003eEnder integration\u003c/b\u003e\u003c/a\u003e\n  * \u003ca href=\"#contributors\"\u003e\u003cb\u003eContributors\u003c/b\u003e\u003c/a\u003e\n  * \u003ca href=\"#licence\"\u003e\u003cb\u003eLicence \u0026 copyright\u003c/b\u003e\u003c/a\u003e\n\n--------------------------------------------------------\n\n\u003ca name=\"useselector\"\u003e\u003c/a\u003e\n### Use with a selector engine\n\nA great way to use Bonzo is with a selector engine, like [Qwery](https://github.com/ded/qwery). You could wrap Bonzo up and augment your wrapper to inherit the same methods:\n\n``` js\nfunction $(selector) {\n  return bonzo(qwery(selector))\n}\n```\n\nThis now allows you to write the following code:\n\n``` js\n$('#content a[rel~=\"bookmark\"]').after('√').css('text-decoration', 'none')\n```\n\nSee \u003ca href=\"#api-setQueryEngine\"\u003e\u003ccode\u003ebonzo.setQueryEngine()\u003c/code\u003e\u003c/a\u003e for more details.\n\n\u003ca name=\"extensions\"\u003e\u003c/a\u003e\n### Bonzo extension API\n\nOne of the greatest parts about Bonzo is its simplicity to hook into the internal chain to create custom methods. For example you can create a method called `color()` like this:\n\n``` js\nbonzo.aug({\n  color: function (c) {\n    return this.css('color', c);\n  }\n})\n\n// you can now do the following\n$('p').color('aqua')\n```\n\n\u003ca name=\"api\"\u003e\u003c/a\u003e\n### Complete Bonzo API\n\n  * \u003ca href=\"#api-ctor\"\u003e\u003ccode\u003ebonzo()\u003c/code\u003e\u003c/a\u003e\n\n\u003ca name=\"instance\"\u003e\u003c/a\u003e\n### Instance methods\n\n  * \u003ca href=\"#api-get\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eget()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-each\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eeach()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-deepEach\"\u003e\u003ccode\u003ebonzo().\u003cb\u003edeepEach()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-map\"\u003e\u003ccode\u003ebonzo().\u003cb\u003emap()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-html\"\u003e\u003ccode\u003ebonzo().\u003cb\u003ehtml()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-text\"\u003e\u003ccode\u003ebonzo().\u003cb\u003etext()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-addClass\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eaddClass()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-removeClass\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eremoveClass()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-hasClass\"\u003e\u003ccode\u003ebonzo().\u003cb\u003ehasClass()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-toggleClass\"\u003e\u003ccode\u003ebonzo().\u003cb\u003etoggleClass()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-show\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eshow()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-hide\"\u003e\u003ccode\u003ebonzo().\u003cb\u003ehide()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-toggle\"\u003e\u003ccode\u003ebonzo().\u003cb\u003etoggle()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-first\"\u003e\u003ccode\u003ebonzo().\u003cb\u003efirst()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-last\"\u003e\u003ccode\u003ebonzo().\u003cb\u003elast()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-next\"\u003e\u003ccode\u003ebonzo().\u003cb\u003enext()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-previous\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eprevious()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-parent\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eparent()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-focus\"\u003e\u003ccode\u003ebonzo().\u003cb\u003efocus()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-blur\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eblur()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-append\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eappend()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-appendTo\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eappendTo()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-prepend\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eprepend()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-prependTo\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eprependTo()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-before\"\u003e\u003ccode\u003ebonzo().\u003cb\u003ebefore()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-insertBefore\"\u003e\u003ccode\u003ebonzo().\u003cb\u003einsertBefore()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-after\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eafter()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-insertAfter\"\u003e\u003ccode\u003ebonzo().\u003cb\u003einsertAfter()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-replaceWith\"\u003e\u003ccode\u003ebonzo().\u003cb\u003ereplaceWith()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-css\"\u003e\u003ccode\u003ebonzo().\u003cb\u003ecss()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-offset\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eoffset()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-dim\"\u003e\u003ccode\u003ebonzo().\u003cb\u003edim()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-attr\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eattr()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-removeAttr\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eremoveAttr()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-val\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eval()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-data\"\u003e\u003ccode\u003ebonzo().\u003cb\u003edata()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-remove\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eremove()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-empty\"\u003e\u003ccode\u003ebonzo().\u003cb\u003eempty()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-detach\"\u003e\u003ccode\u003ebonzo().\u003cb\u003edetach()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-scrollLeft\"\u003e\u003ccode\u003ebonzo().\u003cb\u003escrollLeft()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-scrollTop\"\u003e\u003ccode\u003ebonzo().\u003cb\u003escrollTop()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n\n\u003ca name=\"static\"\u003e\u003c/a\u003e\n### Static methods\n\n  * \u003ca href=\"#api-aug\"\u003e\u003ccode\u003ebonzo.\u003cb\u003eaug()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-doc\"\u003e\u003ccode\u003ebonzo.\u003cb\u003edoc()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-viewport\"\u003e\u003ccode\u003ebonzo.\u003cb\u003eviewport()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-firstChild\"\u003e\u003ccode\u003ebonzo.\u003cb\u003efirstChild()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-isAncestor\"\u003e\u003ccode\u003ebonzo.\u003cb\u003eisAncestor()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-create\"\u003e\u003ccode\u003ebonzo.\u003cb\u003ecreate()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-setQueryEngine\"\u003e\u003ccode\u003ebonzo.\u003cb\u003esetQueryEngine()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n\nAdded in the Ender bridge:\n\n  * \u003ca href=\"#api-parents\"\u003e\u003ccode\u003e$().\u003cb\u003eparents()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-closest\"\u003e\u003ccode\u003e$().\u003cb\u003eclosest()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-siblings\"\u003e\u003ccode\u003e$().\u003cb\u003esiblings()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-children\"\u003e\u003ccode\u003e$().\u003cb\u003echildren()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-width\"\u003e\u003ccode\u003e$().\u003cb\u003ewidth()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n  * \u003ca href=\"#api-height\"\u003e\u003ccode\u003e$().\u003cb\u003eheight()\u003c/b\u003e\u003c/code\u003e\u003c/a\u003e\n\n\n------------------------------------------------\n\u003ca name=\"api-ctor\"\u003e\u003c/a\u003e\n### bonzo(DOMElement | ArrayLikeDOMElementCollection)\nFactory function for bonzo objects. Takes in either a single `DOMElement`, or an array-like object or array of them. Returns an array-like `Bonzo` object possessing all of the [instance methods](#instance) documented below.\n```js\nvar elem = document.getElementById('foo');\nvar $elem = bonzo(elem);\n// $elem now has all the special powers listed below...\n```\n\n------------------------------------------------\n\u003ca name=\"api-get\"\u003e\u003c/a\u003e\n### bonzo().get(index)\nReturns the raw `DOMElement` held at `index`. Because Bonzo objects are array-like, this is identical to saying `bonzo()[index]`.\n```js\nvar elem = document.getElementById('bar');\nvar $elem = bonzo(elem);\nvar sameElem = $elem.get(0);\nvar sameElemAgain = $elem[0];\n// elem === sameElem \u0026\u0026 sameElem === sameElemAgain\n```\n\n------------------------------------------------\n\u003ca name=\"api-each\"\u003e\u003c/a\u003e\n### bonzo().each(fn[, scope])\nAllows you to iterate over the raw elements contained in `bonzo` collections. `fn` gets called once for each element in the collection, with each element, in turn, as its first argument.  If the optional `scope` argument is supplied, then it is used as the `this` value of the function. Otherwise, the same element that is passed as the first argument is used.  The index of the element is passed as the second argument, and the collection itself is passed as the third.\n\n------------------------------------------------\n\u003ca name=\"api-deepEach\"\u003e\u003c/a\u003e\n### bonzo().deepEach(fn[, scope])\n`deepEach()` ...\n\n------------------------------------------------\n\u003ca name=\"api-map\"\u003e\u003c/a\u003e\n### bonzo().map(fn[, rejectFn])\n`map()` ...\n\n------------------------------------------------\n\u003ca name=\"api-html\"\u003e\u003c/a\u003e\n### bonzo().html([content])\n\n`bonzo.html()` either sets or gets the elements' `innerHTML` to `content`, depending if the optional `content` argument is pased in. If called without the argument, `.html()` returns the element's `innerHTML`.\n\n* `content` is an *optional* argument. If it is passed in, it will **set** the `innerHTML` of a given element and return a `Bonzo` object.\n\n#### Examples\n\n```js\nbonzo(element).html('\u003cp\u003efoo\u003c/p\u003e');\nbonzo(element).html(); // \u003cp\u003efoo\u003c/p\u003e\n```\n\n------------------------------------------------\n\u003ca name=\"api-text\"\u003e\u003c/a\u003e\n### bonzo().text([content])\n\n`bonzo.text()` is very similar to [`.html`](#api-html), but uses the elements' `textContent` instead of `innerHTML` when setting the `content`. Thus, the `content` will not get parsed as markup.\n\nThis method either **gets** or **sets** the text of a given element, depending if the optional *content* argument is passed in.\n\n* `content` is an *optional* argument. If it is passed in, it will **set** the text value of a given element and return a `Bonzo` object.\n\nIf no `content` is specified, the `.text()` method will return the text that makes up that element.\n\nIf the element has children (i.e. a `ul` containing several `li` children), the children's text is included in the return value.\n\n#### Examples\n\n``` js\nbonzo(\"\u003ch1\u003ehello, world\u003c/h1\u003e\").text()\n  // →  returns \"hello, world\"\n\nbonzo(\"\u003ch1\u003ei'm going to change\u003c/h1\u003e\").text(\"changed you!\")\n  // the \u003ch1\u003e now says \"changed you!\"\n  // →  returns a Bonzo object\n\nbonzo(\"\u003cul\u003e\u003cli\u003eone\u003c/li\u003e\u003cli\u003etwo\u003c/li\u003e\u003c/ul\u003e\").text()\n  // →  returns \"one\n  // two\"\n\nbonzo(\"\u003cul\u003e\u003cli\u003eone\u003c/li\u003e\u003cli\u003etwo\u003c/li\u003e\u003c/ul\u003e\").text('hello')\n  // the html is now \u003cul\u003ehello\u003c/ul\u003e\n  // →  returns a Bonzo object\n```\n\n------------------------------------------------\n\u003ca name=\"api-addClass\"\u003e\u003c/a\u003e\n### bonzo().addClass(class | classList)\n\n`bonzo.addClass(class | classList)` adds the specified `class` to the given element. It returns a `Bonzo` object.\n\n* `class` is a *required* argument. It is the name of the class you wish to add to the given element.\n\n  * If you'd like to add multiple classes at once, simply use a\nspace-separated string, a `classList` (i.e. \"classOne classTwo\").\n\n#### Examples\n\n``` js\nbonzo(\"\u003ch1\u003ehello, world\u003c/h1\u003e\").addClass('big')\n  // the html is now \u003ch1 class=\"big\"\u003ehello, world\u003c/h1\u003e\n  // →  returns a Bonzo object\n\nbonzo(\"\u003ch1\u003ehello, world\u003c/h1\u003e\").addClass()\n  //  throws an error, since the argument is required\n\nbonzo(\"\u003cp\u003ei want lots of classes\u003c/p\u003e\").addClass(\"one two three\")\n  // the html is now \u003cp class=\"one two three\"\u003ei want lots of classes\u003c/p\u003e\n  // →  returns a Bonzo object\n```\n\n\n------------------------------------------------\n\u003ca name=\"api-removeClass\"\u003e\u003c/a\u003e\n### bonzo().removeClass(class | classList)\n\n`bonzo.removeClass(class)` removes the specified `class` from the given element. It returns a `Bonzo` object.\n\n* `class` is a *required* argument. It is the name of the class you wish to remove from the given element.\n\n  * If you'd like to remove multiple classes at once, simply use a\nspace-separated string, a `classList` (i.e. \"classOne classTwo\").\n\n#### Examples\n\n``` js\nbonzo(\"\u003ch1 class='small'\u003ehello, world\u003c/h1\u003e\").removeClass('small')\n  // the html is now \u003ch1 class\u003ehello, world\u003c/h1\u003e\n  // →  returns a Bonzo object\n\nbonzo(\"\u003ch1 class='removeMe'\u003ehello, world\u003c/h1\u003e\").removeClass()\n  //  throws an error, since the argument is required\n\nbonzo(\"\u003cp class='one two three'\u003ei have lots of classes\u003c/p\u003e\").removeClass(\"one two three\")\n  // the html is now \u003cp\u003ei have lots of classes\u003c/p\u003e\n  // →  returns a Bonzo object\n\nbonzo(\"\u003ch1 class='error'\u003ehello, world\u003c/h1\u003e\").removeClass('does_not_exist')\n  // →  since the argument does not match a classlist the \u003ch1\u003e has, nothing happens and a Bonzo object is returned\n```\n\n------------------------------------------------\n\u003ca name=\"api-hasClass\"\u003e\u003c/a\u003e\n### bonzo().hasClass(class | classList)\n\n`bonzo.hasClass(class)` returns **true** or **false**, based on whether\nor not the specified element has a given *class*. It returns **true** if\nthe specified element *does* have the `class`, and returns **false** if\nthe specified element **does not** have the `class`.\n\n* `class` is a *required* argument. It is the name of the class you wish to check for in a given element.\n\n  * **NOTE**: if you pass in a space-separated `classList` like you can\nin \u003ca href=\"#api-addClass\"\u003eaddClass\u003c/a\u003e and \u003ca\nhref=\"#api-removeClass\"\u003eremoveClass\u003c/a\u003e, this method will return\n**true** if **any** of the space-separated `classList` classes are present in the element.\n\n#### Examples\n\n``` js\n\nbonzo(\"\u003cp class='alert'\u003esomething went wrong\u003c/p\u003e\").hasClass('alert')\n  // →  returns true\n\nbonzo(\"\u003cp class='alert'\u003esomething went wrong\u003c/p\u003e\").hasClass('normal')\n  // →  returns false\n\nbonzo(\"\u003cp class='one'\u003esomething went wrong\u003c/p\u003e\").hasClass('one two three')\n  // →  returns true\n\nbonzo(\"\u003cp class='one'\u003esomething went wrong\u003c/p\u003e\").hasClass('three two one')\n  // →  returns true\n\nbonzo(\"\u003cp class='large'\u003esomething went wrong\u003c/p\u003e\").hasClass('small tiny')\n  // →  returns false\n\n```\n\n------------------------------------------------\n\u003ca name=\"api-toggleClass\"\u003e\u003c/a\u003e\n### bonzo().toggleClass(class | classList)\n\n`bonzo.toggleClass(class)` either adds or removes a specified `class` to the given element, depending on whether or not the given element already has a class with that `class` or not.\n\nIf the element **does** have a class named `class`, calling `toggleClass()` will **remove** the `class` class from it. If the element **does not** have a class with the specified `class`, calling `toggleClass()` will **add** a class with that `class`.\n\n* `class` is a *required* argument. It is the name of the class you wish to toggle.\n\n  * If you'd like to toggle multiple classes at once, simply use a\nspace-separated string, a `classList` (i.e. \"classOne classTwo\").\n\n\n#### Examples\n\n``` js\n\nbonzo(\"\u003cp class='alert'\u003esomething went wrong\u003c/p\u003e\").toggleClass('alert')\n  // the html is now \u003cp class\u003esomething went wrong\u003c/p\u003e\n  // →  returns a Bonzo object\n\nbonzo(\"\u003cp class='alert'\u003esomething went wrong\u003c/p\u003e\").toggleClass('different')\n  // the html is now \u003cp class=\"alert different\"\u003esomething went wrong\u003c/p\u003e\n  // →  returns a Bonzo object\n\nbonzo(\"\u003cp class='one'\u003esomething went wrong\u003c/p\u003e\").toggleClass('three two one')\n  // the html is now \u003cp class=\"three two\"\u003esomething went wrong\u003c/p\u003e\n  // →  returns a Bonzo object\n\nbonzo(\"\u003cp class='large'\u003esomething went wrong\u003c/p\u003e\").toggleClass('small tiny')\n  // the html is now \u003cp class=\"small tiny large\"\u003esomething went wrong\u003c/p\u003e\n  // →  returns a Bonzo object\n\n```\n\n------------------------------------------------\n\u003ca name=\"api-show\"\u003e\u003c/a\u003e\n### bonzo().show([type])\n\n`bonzo.show()` sets a given element or set of elements' `display` style property. By passing in an optional `type` argument, you can specify the attribute of the `display` property Bonzo gives the element(s).\n\n* `type` is an *optional* argument. It is the display type you wish to\nutilize.\n\nIf you specify an unsupported `type` (i.e. something other than `block`, `compact`, `inline-block`, `inline`, `inline-table`, `list-item`, `run-in`, `table`, `table-caption`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, or `table-row-group`), Bonzo will ignore the invalid `type`.\n\n#### Examples\n\n``` js\n\nbonzo(\"\u003cp style=\\\"display: none;\\\"\u003eI was hidden\u003c/p\u003e\").show()\n  // html is now \u003cp style\u003eI was hidden\u003c/p\u003e\n  // →  returns a Bonzo object\n\nbonzo(\"\u003cp style=\\\"display: none;\\\"\u003eI was hidden\u003c/p\u003e\").show('inline-block')\n  // html is now \u003cp style=\"display: inline-block;\"\u003eI was hidden\u003c/p\u003e\n  // →  returns a Bonzo object\n\n```\n\n------------------------------------------------\n\u003ca name=\"api-hide\"\u003e\u003c/a\u003e\n### bonzo().hide()\n\n`bonzo.hide()` adds a `display: none;` to the specified element.\n\n#### Examples\n\n``` js\n\nbonzo(\"\u003cp\u003eHello, world\u003c/p\u003e\").hide()\n  // html is now \u003cp style=\"display: none;\"\u003eHello, world\u003c/p\u003e\n  // →  returns a Bonzo object\n\n```\n\n------------------------------------------------\n\u003ca name=\"api-toggle\"\u003e\u003c/a\u003e\n### bonzo().toggle([callback[, type]])\n`toggle()` ...\n\n------------------------------------------------\n\u003ca name=\"api-first\"\u003e\u003c/a\u003e\n### bonzo().first()\n\n`bonzo.first()` returns a Bonzo object referencing the first element in a set of elements. If the set is empty, the a Bonzo object will still be returned, but it won't contain any children.\n\n#### Examples\n\n``` js\n\nvar firstItem = bonzo(\"\u003cli\u003eone\u003c/li\u003e\u003cli\u003etwo\u003c/li\u003e\u003cli\u003ethree\u003c/li\u003e\").first()\nfirstItem.text() // \"one\"\nfirstItem.length // 1\n  // →  returns a Bonzo object\n\nvar el = bonzo(\"\").first()\nel.text() // \"\"\nel.length // 0\n  // →  returns a Bonzo object\n```\n\n------------------------------------------------\n\u003ca name=\"api-last\"\u003e\u003c/a\u003e\n### bonzo().last()\n\n`bonzo.last()` returns a Bonzo object referencing the last element in a set of elements. If the set is empty, the a Bonzo object will still be returned, but it won't contain any children.\n\n#### Examples\n\n``` js\n\nvar lastItem = bonzo(\"\u003cli\u003eone\u003c/li\u003e\u003cli\u003etwo\u003c/li\u003e\u003cli\u003ethree\u003c/li\u003e\").last()\nlastItem.text() // \"three\"\nlastItem.length // 1\n  // →  returns a Bonzo object\n\nvar el = bonzo(\"\").last()\nel.text() // \"\"\nel.length // 0\n  // →  returns a Bonzo object\n```\n\n------------------------------------------------\n\u003ca name=\"api-next\"\u003e\u003c/a\u003e\n### bonzo().next()\n`bonzo.next()` returns a `Bonzo` object with a list of the next element siblings in the initial collection.\n\n------------------------------------------------\n\u003ca name=\"api-previous\"\u003e\u003c/a\u003e\n### bonzo().previous()\n`bonzo.previous()` returns a `Bonzo` object with a list of the previous element siblings in the initial collection.\n\n------------------------------------------------\n\u003ca name=\"api-parent\"\u003e\u003c/a\u003e\n### bonzo().parent()\n`bonzo.parent()` returns a `Bonzo` object with a list of the `parentNode`'s of each item in the initial collection.\n\n------------------------------------------------\n\u003ca name=\"api-focus\"\u003e\u003c/a\u003e\n### bonzo().focus()\n`bonzo.focus()` will send the browser's focus event to an input element. This will only work on the first (zeroith index) item in the `Bonzo` collection.\n\n------------------------------------------------\n\u003ca name=\"api-blur\"\u003e\u003c/a\u003e\n### bonzo().blur()\n`bonzo.blur()` will send the browser's blur event to an input element. This will only work on the first (zeroith index) item in the `Bonzo` collection.\n\n------------------------------------------------\n\u003ca name=\"api-append\"\u003e\u003c/a\u003e\n### bonzo().append(html | element | collection)\n`bonzo.append()` will insert the supplied html | element | collection at the initial supplied collection.\n\n#### Examples\n``` js\nbonzo([element1, element2]).append('\u003cp\u003ehello\u003c/p\u003e\u003cp\u003eworld\u003c/p\u003e')\nbonzo(document.createElement('div')).append(document.createElement('p'))\nbonzo(element).append(document.getElementsByTagName('p'))\n```\n\n------------------------------------------------\n\u003ca name=\"api-appendTo\"\u003e\u003c/a\u003e\n### bonzo().appendTo(target)\n`bonzo.appendTo()` will insert the initial collection at the supplied `target`. It's the backwards version of `bonzo.append`\n\n#### Examples\n``` js\nbonzo('\u003cp\u003ehello\u003c/p\u003e').appendTo(document.body)\nbonzo(document.createElement('div')).appendTo(document.querySelectorAll('p'))\n```\n\n------------------------------------------------\n\u003ca name=\"api-prepend\"\u003e\u003c/a\u003e\n### bonzo().prepend(html | element | collection)\n`bonzo.prepend()` is similar to \u003ca href=\"#api-append\"\u003ebonzo.append()\u003c/a\u003e, but inserts at the top of a collection (it prepends ;).\n\n------------------------------------------------\n\u003ca name=\"api-prependTo\"\u003e\u003c/a\u003e\n### bonzo().prependTo(target)\n`prependTo()` is similar to \u003ca href=\"#api-append\"\u003ebonzo.appendTo()\u003c/a\u003e, but, you know, prepends.\n\n------------------------------------------------\n\u003ca name=\"api-before\"\u003e\u003c/a\u003e\n### bonzo().before(html | element | collection)\n`bonzo.before()` inserts the supplied content before each item in the initial collection.\n\n#### Examples\n``` js\nbonzo(document.querySelectorAll('p')).before('\u003cb\u003ehello\u003c/b\u003e')\n```\n\n------------------------------------------------\n\u003ca name=\"api-insertBefore\"\u003e\u003c/a\u003e\n### bonzo().insertBefore(target)\n`bonzo.insertBefore()` will insert the items in the initial collection before the supplied targets.\n\n#### Examples\n``` js\nbonzo('\u003cp\u003ehello\u003c/p\u003e').insertBefore(document.querySelectorAll('div'))\n```\n\n------------------------------------------------\n\u003ca name=\"api-after\"\u003e\u003c/a\u003e\n### bonzo().after(html | element | collection)\n`bonzo.after()` will insert the supplied content after each item in the initial collection.\n\n#### Examples\n``` js\nbonzo(document.querySelectorAll('p')).after('\u003cb\u003e, huh\u003c/b\u003e')\n```\n\n------------------------------------------------\n\u003ca name=\"api-insertAfter\"\u003e\u003c/a\u003e\n### bonzo().insertAfter(target)\n`insertAfter()` ...\n\n------------------------------------------------\n\u003ca name=\"api-replaceWith\"\u003e\u003c/a\u003e\n### bonzo().replaceWith(html | element | collection)\n`bonzo.replaceWith()` will replace each item in the initial collection with the supplied content.\n\n#### Examples\n``` js\nbonzo(document.querySelectorAll('p')).replaceWith('\u003cp\u003eyou have been replaced\u003c/p\u003e')\n```\n\n------------------------------------------------\n\u003ca name=\"api-css\"\u003e\u003c/a\u003e\n### bonzo().css(property | hash[, value])\nSets or returns CSS properties of the element. If a single string argument is passed, then the value of that CSS property is returned. If two string arguments are passed, the CSS property specified by the first is set to the value specified by the second. If a single hash argument is passed, then the CSS property corresponding to each property is set to the value designated by the hash property's value.\n```js\nbonzo(elem).css({\n  background: 'blue',\n  color: green;\n}).css('border', '2px solid red').css('color'); // \"green\"\n```\n\n------------------------------------------------\n\u003ca name=\"api-offset\"\u003e\u003c/a\u003e\n### bonzo().offset([ x, y ] | [ hash ])\n`bonzo.offset()` is an overloaded setter and getter. When setting the offset of a collection, it will set an element to an explicit x/y coordinate position on the page. When getting the offset, the function returns an object containing the four properties `top`, `left`, `width`, and `height`.\n\n#### Examples\n``` js\nbonzo(el).offset() // returns { top: n, left: n, width: n, height: n }\nbonzo(el).offset(50, 100) // sets left to 50, and top to 100\nbonzo(el).offset({ left: 50, top: 100 }) // sets left to 50, and top to 100\n```\n\n------------------------------------------------\n\u003ca name=\"api-dim\"\u003e\u003c/a\u003e\n### bonzo().dim()\n`bonzo.dim()` returns the entire `width` and `height` dimensions of an element, including the `scrollHeight`.\n\n------------------------------------------------\n\u003ca name=\"api-attr\"\u003e\u003c/a\u003e\n### bonzo().attr(key[, value] | hash)\nSets or returns attributes of the element. If the first argument is a hash, then each property of the hash is read and the corresponding attribute of the element is set to the hash property's value. If the first argument is a string and no second argument is provided, the value of the element's attribute with the same name is returned. If a second argument *is* supplied, then the element's attribute of the same name as the first argument is set to the value of the second argument.\n\n------------------------------------------------\n\u003ca name=\"api-removeAttr\"\u003e\u003c/a\u003e\n### bonzo().removeAttr(key)\n`bonzo.removeAttr()` removes the supplied attribute from each item in the initial collection.\n\n------------------------------------------------\n\u003ca name=\"api-val\"\u003e\u003c/a\u003e\n### bonzo().val([ value ])\n`bonzo.val()` is an overloaded setter and getter. it returns the content from the first element `value` attribute. When setting it sets the `value` attribute of each item in the initial collection.\n\n------------------------------------------------\n\u003ca name=\"api-data\"\u003e\u003c/a\u003e\n### bonzo().data([ key[, value ] ] | [ hash ])\n`bonzo.data()` is an overloaded setter and getter. `data` can be set to any value and referenced further when getting the data.\n\n#### Examples\n``` js\nbonzo(el).data('username', 'ded')\nbonzo(el).data('username') // returns 'ded'\n\nbonzo(another).data('userinfo', {\n  id: 911,\n  name: 'agent'\n  age: 2\n})\n```\n\n------------------------------------------------\n\u003ca name=\"api-remove\"\u003e\u003c/a\u003e\n### bonzo().remove()\n`bonzo.remove()` removes the initial supplied collection from the DOM\n\n#### Examples\n``` js\nbonzo(document.querySelectorAll('p')).remove()\n```\n\n------------------------------------------------\n\u003ca name=\"api-empty\"\u003e\u003c/a\u003e\n### bonzo().empty()\n`bonzo.empty()` will empty out the content of the initial supplied collection, but not remove the nodes themselves.\n\n------------------------------------------------\n\u003ca name=\"api-detach\"\u003e\u003c/a\u003e\n### bonzo().detach()\n`bonzo.detach()` returns a `Bonzo` object containing the supplied collection, but detached from the DOM. This is useful if you wish to do heavy operations an offline Node, and then inserting it back into the DOM again.\n\n#### Examples\n``` js\nbonzo(document.querySelectorAll('p')).detach().addClass('eyo').html('\u003cp\u003estuff\u003c/p\u003e').appendTo(document.body)\n```\n\n------------------------------------------------\n\u003ca name=\"api-scrollLeft\"\u003e\u003c/a\u003e\n### bonzo().scrollLeft([ x ])\n`bonzo.scrollLeft()` is an overloaded setter and getter. it returns the `scrollLeft` of an element when no argument is supplied, otherwise, sets it.\n\n------------------------------------------------\n\u003ca name=\"api-scrollTop\"\u003e\u003c/a\u003e\n### bonzo().scrollTop([ y ]\n`bonzo.scrollTop()` is an overloaded setter and getter. it returns the `scrollTop` of an element when no argument is supplied, otherwise, sets it.\n\n------------------------------------------------\n\u003ca name=\"api-aug\"\u003e\u003c/a\u003e\n### bonzo.aug(hash)\n`bonzo.aug()` will agument the `Bonzo` prototype so that you can customize and include additions to your liking.\n\n#### Examples\n``` js\nbonzo.aug({\n  color: function (c) {\n    // `this` is the scope of the `Bonzo` instance\n    return this.css('color', c)\n  }\n})\n\n// you can now do the following\n$('p').color('aqua')\n```\n\n------------------------------------------------\n\u003ca name=\"api-doc\"\u003e\u003c/a\u003e\n### bonzo.doc()\n`bonzo.doc()` returns an object containing `width` and `height` information regarding the document size. This includes `scrollWidth` and `scrollHeight`.\n\n\n------------------------------------------------\n\u003ca name=\"api-viewport\"\u003e\u003c/a\u003e\n### bonzo.viewport()\n`bonzo.viewport()` returns an object containing `width` and `height` information regarding the document viewport. This is usually the same as using `bonzo.doc()`, but can be smaller given it's only what you *see* in the viewport, and not the entire document (with scrolling).\n\n------------------------------------------------\n\u003ca name=\"api-firstChild\"\u003e\u003c/a\u003e\n### bonzo.firstChild(element)\n`firstChild()` ...\n\n------------------------------------------------\n\u003ca name=\"api-isAncestor\"\u003e\u003c/a\u003e\n### bonzo.isAncestor(container, element)\n`isAncestor()` ...\n\n------------------------------------------------\n\u003ca name=\"api-create\"\u003e\u003c/a\u003e\n### bonzo.create(container, element)\n`create()` ...\n\n------------------------------------------------\n\u003ca name=\"api-parents\"\u003e\u003c/a\u003e\n### $().parents()\n`parents()` ...\n\n------------------------------------------------\n\u003ca name=\"api-setQueryEngine\"\u003e\u003c/a\u003e\n### bonzo.setQueryEngine(engine)\n`bonzo.setQueryEngine()` is a useful utility that allows you to pair `Bonzo` with a selector engine.\n\n\nFor the insertion methods you can set a query selector host:\n\n#### Examples\n``` js\n// using Ender supported modules\nbonzo.setQueryEngine(require('qwery'))\nbonzo(bonzo.create('\u003cdiv\u003e')).insertAfter('.boosh a')\n\n// or Sizzle\nbonzo.setQueryEngine(Sizzle)\n```\n\n\n\n------------------------------------------------\n\u003ca name=\"api-closest\"\u003e\u003c/a\u003e\n### $().closest()\n`closest()` ...\n\n------------------------------------------------\n\u003ca name=\"api-siblings\"\u003e\u003c/a\u003e\n### $().siblings()\n`siblings()` ...\n\n------------------------------------------------\n\u003ca name=\"api-children\"\u003e\u003c/a\u003e\n### $().children()\n`children()` ...\n\n------------------------------------------------\n\u003ca name=\"api-width\"\u003e\u003c/a\u003e\n### $().width([ value ])\n`width()` ...\n\n------------------------------------------------\n\u003ca name=\"api-height\"\u003e\u003c/a\u003e\n### $().height([ value ])\n`height()` ...\n\n------------------------------------------------\n\n\n\u003ca name=\"aboutname\"\u003e\u003c/a\u003e\nAbout the name \"Bonzo\"\n----------------------\n*Bonzo Madrid* was a malicious battle school commander of whom eventually is killed by [Ender Wiggin](http://en.wikipedia.org/wiki/Ender_Wiggin). Bonzo represents the DOM, of whom we'd all love to slay.\n\n\u003ca name=\"contributing\"\u003e\u003c/a\u003e\nContributing\n------------\n\nYou should only edit the files in the *src/* directory. Bonzo is compiled into the *bonzo.js* and *bonzo.min.js* files contained in the root directory by the build command:\n\n\u003ca name=\"building\"\u003e\u003c/a\u003e\n### Building\n\n```sh\n$ npm install\n$ make\n```\n\n\u003ca name=\"tests\"\u003e\u003c/a\u003e\n### Tests\n\nPoint your test browser(s) to *tests/tests.html*, or:\n\n```sh\n$ open tests/tests.html\n```\n\nPlease try to include tests or adjustments to existing tests with all non-trivial contributions.\n\n\u003ca name=\"browsers\"\u003e\u003c/a\u003e\nBrowser support\n---------------\n\n  * IE9+\n  * Chrome\n  * Safari 5+\n  * Firefox 10+\n  * Opera\n\n\u003ca name=\"ender\"\u003e\u003c/a\u003e\nEnder integration\n-----------------\n\nBonzo is a registered npm package and fits in nicely with the [Ender](http://enderjs.com) framework. If you don't have Ender, you should install now, and never look back, *ever*. As a side note the *query engine host* is set for you when you include it with Ender.\n\n```sh\n$ npm install ender -g\n```\n\nTo combine Bonzo to your Ender build, you can add it as such:\n\n```sh\n$ ender build bonzo[ package-b[ package-c ...]]\n```\n\nor, add it to your existing ender package\n\n```sh\n$ ender add bonzo\n```\n\nBonzo is included in [The Jeesh](http://ender.jit.su/#jeesh), Ender's \"starter-pack\", when you `ender build jeesh` you'll get Bonzo and some other amazing libraries that'll make working in the browser a breeze. See the [Ender documentation](http://ender.jit.su/) for more details.\n\n\u003ca name=\"contributors\"\u003e\u003c/a\u003e\nContributors\n------------\n\n  * [Dustin Diaz](https://github.com/ded/bonzo/commits/master?author=ded)\n  * [Rod Vagg](https://github.com/ded/bonzo/commits/master?author=rvagg)\n  * [Jacob Thornton](https://github.com/ded/bonzo/commits/master?author=fat)\n\n\u003ca name=\"licence\"\u003e\u003c/a\u003e\nLicence \u0026 copyright\n-------------------\n\nBonzo is Copyright \u0026copy; 2014 Dustin Diaz [@ded](https://twitter.com/ded) and licensed under the MIT licence. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE file for more details.\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fded%2Fbonzo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fded%2Fbonzo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fded%2Fbonzo/lists"}