{"id":18955022,"url":"https://github.com/alaca/domhelper","last_synced_at":"2026-03-30T17:30:18.534Z","repository":{"id":101128213,"uuid":"306296091","full_name":"alaca/domhelper","owner":"alaca","description":"A small helper utility that provides basic methods for DOM manipulation. API inspired by jQuery.","archived":false,"fork":false,"pushed_at":"2021-07-09T09:09:26.000Z","size":208,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T22:04:51.540Z","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/alaca.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-22T10:04:37.000Z","updated_at":"2023-03-07T05:17:26.000Z","dependencies_parsed_at":"2023-05-24T16:30:12.976Z","dependency_job_id":null,"html_url":"https://github.com/alaca/domhelper","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/alaca%2Fdomhelper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaca%2Fdomhelper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaca%2Fdomhelper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaca%2Fdomhelper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alaca","download_url":"https://codeload.github.com/alaca/domhelper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239952637,"owners_count":19723924,"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-11-08T13:46:57.836Z","updated_at":"2026-03-30T17:30:18.497Z","avatar_url":"https://github.com/alaca.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DOM Helper\n\nA small helper utility that provides basic methods for DOM manipulation. API inspired by jQuery.\n\n## API\n\n* [.on(event, [selector], function)](#onevent-selector-function)\n* [.each(function)](#eachfunction)\n* [.addClass(className|array)](#addclassclassnamearray)\n* [.removeClass(className|array)](#removeclassclassnamearray)\n* [.toggleClass(className|array)](#toggleclassclassnamearray)\n* [.hasClass(className)](#hasclassclassname)\n* [.closest(selector)](#closestselector)\n* [.parent()](#parent)\n* [.first()](#first)\n* [.last()](#last)\n* [.eq(index)](#eqindex)\n* [.remove()](#remove)\n* [.show()](#show)\n* [.hide()](#hide)\n* [.toggle()](#toggle)\n* [.attr(name, [value])](#attrname-value)\n* [.removeAttr(name)](#removeattrname)\n* [.html([html])](#htmlhtml)\n* [.text([text])](#texttext)\n* [.data(key, [value])](#datakey-value)\n* [.append(node|string)](#appendnodestring)\n* [.prepend(node|string)](#prependnodestring)\n* [.css(styles)](#cssstyles)\n\n#### .on(event, [selector], function)\n\nAttach an event handler function to the selected elements.\n\n```js\n$( '#elementId' ).on( 'click', function() {\n\tconsole.log( $( this ).html() );\n} );\n```\n\nEvent delegation\n\n```js\n$( document ).on( 'click', '#elementId', function() {\n\tconsole.log( $( this ).html() );\n} );\n```\n\n#### .each(function)\n\nIterate over a NodeList object, executing a function for each matched Element.\n\n```js\n$( 'li' ).each( function( element, index ) {\n\tconsole.log( $( element ).html() );\n} );\n```\n\n#### .addClass(className|array)\n\nAdds the specified class to element.\n\n```js\n$( '#elementId' ).addClass( 'test-class' );\n```\n\nAdding multiple classes.\n\n```js\n$( '#elementId' ).addClass( [ 'one', 'two' ] );\n```\n\n#### .removeClass(className|array)\n\nRemoves the specified class from element.\n\n```js\n$( '#elementId' ).removeClass( 'test-class' );\n```\n\nRemoving multiple classes.\n\n```js\n$( '#elementId' ).removeClass( [ 'one', 'two' ] );\n```\n\n#### .toggleClass(className|array)\n\nAdd or remove class from element, depending on the class's presence.\n\n```js\n$( '#elementId' ).toggleClass( 'test-class' );\n```\n\n\nToggle multiple classes.\n\n```js\n$( '#elementId' ).toggleClass( [ 'one', 'two' ] );\n```\n\n#### .hasClass(className)\n\nDetermine whether any of the matched elements are assigned the given class.\n\n```js\nif ( $( '#elementId' ).hasClass( 'test-class' ) ) {\n\tconsole.log( 'yep' );\n}\n```\n\n#### .closest(selector)\n\nGet the first element that matches the selector by testing the element itself and traversing up through its ancestors in\nthe DOM tree.\n\n```js\nconst closestSection = $( '#elementId' ).closest( '.section' );\nconsole.log( closestSection.html() );\n```\n\n#### .parent()\n\nGet the parent element.\n\n```js\nconst parentElement = $( '#elementId' ).parent();\nconsole.log( parentElement.html() );\n```\n\n#### .first()\n\nReduce the set of matched elements to the first in the set.\n\n```js\n$( '#navigation li' ).first().addClass( 'first' );\n```\n\n#### .last()\n\nReduce the set of matched elements to the final one in the set.\n\n```js\n$( '#navigation li' ).last().addClass( 'last' );\n```\n\n#### .eq(index)\n\nReduce the set of matched elements to the one at the specified index.\n\n```js\n$( '#navigation li' ).eq( 2 ).addClass( 'third' );\n```\n\n#### .remove()\n\nRemove the set of matched elements from the DOM.\n\n```js\n$( '.section' ).remove();\n```\n\n#### .show()\n\nDisplay the matched elements.\n\n```js\n$( '.section' ).show();\n```\n\n#### .hide()\n\nHide the matched elements.\n\n```js\n$( '.section' ).hide();\n```\n\n#### .toggle()\n\nDisplay or hide the matched elements.\n\n```js\n$( '.section' ).toggle();\n```\n\n#### .attr(name, [value])\n\nGet the value of an attribute for the first element in the set of matched elements or set attribute for every matched\nelement.\n\nSet attribute\n\n```js\n$( 'a' ).attr( 'href', 'https://github.com/alaca/domhelper' );\n```\n\nGet attribute\n\n```js\nconst href = $( 'a.latest' ).attr( 'href' );\nconsole.log( href );\n```\n\n#### .removeAttr(name)\n\nRemove an attribute from each element in the set of matched elements.\n\n```js\n$( 'a' ).removeAttr( 'href' );\n```\n\n#### .html([html])\n\nGet the HTML contents of the first element in the set of matched elements or set the HTML contents to matched elements.\n\nGet HTML contents\n\n```js\nconst htmlContent = $( '.section' ).html();\nconsole.log( htmlContent );\n```\n\nSet HTML contents\n\n```js\n$( '.section' ).html( '\u003ch1\u003eSection content\u003c/h1\u003e' );\n```\n\n#### .text([text])\n\nGet the text contents of the first element in the set of matched elements or set the text content to matched elements.\n\nGet text content\n\n```js\nconst textContent = $( '.section' ).text();\nconsole.log( textContent );\n```\n\n\nSet text content\n\n```js\n$( '.section' ).text( 'Section content' );\n```\n\n#### .data(key, [value])\n\nStore arbitrary data associated with the specified element or return the value that was set.\n\n```js\n$( '.section' ).data( 'info', 'Additional info' );\n```\n\nGet data attribute value\n\n```js\nconst info = $( '.section' ).data( 'info' );\nconsole.log( info );\n```\n\n#### .append(node|string)\n\nInsert content to the end of each element in the set of matched elements.\n\n```js\n$( '.section' ).append( ' this is appended text' );\n```\n\nAppend node\n\n```js\nconst element = $( document.createElement( 'div' ) ).text( 'Appended element content' );\n$( '.section' ).append( element );\n```\n\n#### .prepend(node|string)\n\nInsert content to the beginning of each element in the set of matched elements.\n\n```js\n$( '.section' ).prepend( ' this is prepended text' );\n```\n\nPrepend node\n\n```js\nconst element = $( document.createElement( 'div' ) ).text( 'Prepended element content' );\n$( '.section' ).prepend( element );\n```\n\n#### .css(styles)\n\nSet CSS styles of each element in the set of matched elements.\n\n```js\n$( '.section' ).css( {\n\tcolor: 'red',\n\tfontWeight: 'bold'\n} );\n```\n\nUsing string literals \n\n```js\nconst styles = `\n    folor: red; \n    font-weight: bold;\n`;\n\n$( '.section' ).css( styles );\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaca%2Fdomhelper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaca%2Fdomhelper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaca%2Fdomhelper/lists"}