DOM Helper

A small helper utility that provides basic methods for DOM manipulation. API inspired by jQuery.

API

• .on(event, [selector], function)
• .each(function)
• .addClass(className|array)
• .removeClass(className|array)
• .toggleClass(className|array)
• .hasClass(className)
• .closest(selector)
• .parent()
• .first()
• .last()
• .eq(index)
• .remove()
• .show()
• .hide()
• .toggle()
• .attr(name, [value])
• .removeAttr(name)
• .html([html])
• .text([text])
• .data(key, [value])
• .append(node|string)
• .prepend(node|string)
• .css(styles)

.on(event, [selector], function)

Attach an event handler function to the selected elements.

$( '#elementId' ).on( 'click', function() {
	console.log( $( this ).html() );
} );

Event delegation

$( document ).on( 'click', '#elementId', function() {
	console.log( $( this ).html() );
} );

.each(function)

Iterate over a NodeList object, executing a function for each matched Element.

$( 'li' ).each( function( element, index ) {
	console.log( $( element ).html() );
} );

.addClass(className|array)

Adds the specified class to element.

$( '#elementId' ).addClass( 'test-class' );

Adding multiple classes.

$( '#elementId' ).addClass( [ 'one', 'two' ] );

.removeClass(className|array)

Removes the specified class from element.

$( '#elementId' ).removeClass( 'test-class' );

Removing multiple classes.

$( '#elementId' ).removeClass( [ 'one', 'two' ] );

.toggleClass(className|array)

Add or remove class from element, depending on the class's presence.

$( '#elementId' ).toggleClass( 'test-class' );

Toggle multiple classes.

$( '#elementId' ).toggleClass( [ 'one', 'two' ] );

.hasClass(className)

Determine whether any of the matched elements are assigned the given class.

if ( $( '#elementId' ).hasClass( 'test-class' ) ) {
	console.log( 'yep' );
}

.closest(selector)

Get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

const closestSection = $( '#elementId' ).closest( '.section' );
console.log( closestSection.html() );

.parent()

Get the parent element.

const parentElement = $( '#elementId' ).parent();
console.log( parentElement.html() );

.first()

Reduce the set of matched elements to the first in the set.

$( '#navigation li' ).first().addClass( 'first' );

.last()

Reduce the set of matched elements to the final one in the set.

$( '#navigation li' ).last().addClass( 'last' );

.eq(index)

Reduce the set of matched elements to the one at the specified index.

$( '#navigation li' ).eq( 2 ).addClass( 'third' );

.remove()

Remove the set of matched elements from the DOM.

$( '.section' ).remove();

.show()

Display the matched elements.

$( '.section' ).show();

.hide()

Hide the matched elements.

$( '.section' ).hide();

.toggle()

Display or hide the matched elements.

$( '.section' ).toggle();

.attr(name, [value])

Get the value of an attribute for the first element in the set of matched elements or set attribute for every matched element.

Set attribute

$( 'a' ).attr( 'href', 'https://github.com/alaca/domhelper' );

Get attribute

const href = $( 'a.latest' ).attr( 'href' );
console.log( href );

.removeAttr(name)

Remove an attribute from each element in the set of matched elements.

$( 'a' ).removeAttr( 'href' );

.html([html])

Get the HTML contents of the first element in the set of matched elements or set the HTML contents to matched elements.

Get HTML contents

const htmlContent = $( '.section' ).html();
console.log( htmlContent );

Set HTML contents

$( '.section' ).html( '<h1>Section content</h1>' );

.text([text])

Get the text contents of the first element in the set of matched elements or set the text content to matched elements.

Get text content

const textContent = $( '.section' ).text();
console.log( textContent );

Set text content

$( '.section' ).text( 'Section content' );

.data(key, [value])

Store arbitrary data associated with the specified element or return the value that was set.

$( '.section' ).data( 'info', 'Additional info' );

Get data attribute value

const info = $( '.section' ).data( 'info' );
console.log( info );

.append(node|string)

Insert content to the end of each element in the set of matched elements.

$( '.section' ).append( ' this is appended text' );

Append node

const element = $( document.createElement( 'div' ) ).text( 'Appended element content' );
$( '.section' ).append( element );

.prepend(node|string)

Insert content to the beginning of each element in the set of matched elements.

$( '.section' ).prepend( ' this is prepended text' );

Prepend node

const element = $( document.createElement( 'div' ) ).text( 'Prepended element content' );
$( '.section' ).prepend( element );

.css(styles)

Set CSS styles of each element in the set of matched elements.

$( '.section' ).css( {
	color: 'red',
	fontWeight: 'bold'
} );

Using string literals

const styles = `
    folor: red; 
    font-weight: bold;
`;

$( '.section' ).css( styles );