A custom DOM utility for a browser environment. Provides methods which will be familiar to users of jQuery.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
jasmine
DOM.js
LICENSE
README.md

README.md

DOM Utility

Built as a learning experiment but feel free to use it!

A custom DOM utility for a browser environment. Provides methods which will be familiar to users of jQuery.

This is the code accompanying my series of blog posts on building your own DOM utility:

Build your own DOM utility Part 1

Build your own DOM utility Part 2

Build your own DOM utility Part 3

# $DOM()

Use the $DOM() function to create new elements, wrap raw HTML elements and also as a selector function to select elements. A $DOM object is returned with a number of convenience methods described below.

NOTE: The selector form returns an array of $DOM objects which you'll have to iterate through yourself.

// Create a new element by adding the HTML angle brackets around the tag name
var newDiv = $DOM('<div>');

// Wrap a raw HTML element
var body = $DOM(document.body);

// Otherwise provide any valid CSS selector to select elements
var allDivs = $DOM('div');
var boxes = $DOM('.boxes');

# el.text([text])

Use the text() method to get or set the text content of an element.

// Set text
$domEl.text('I love JavaScript!');

// Get text
var text = $domEl.text();

# el.html([html])

Use the html() method to get or set the html content of an element.

// Set text
$domEl.html('<h2>I love JavaScript!</h2>');

// Get html
var text = $domEl.html();

# el.attr(attrName[, attrValue])

Use the attr() method to get or set attributes on an element.

// Set attribute
$input.attr('placeholder', 'Enter email');

// Get an attribute
var lastUpdated = $table.attr('data-updated');

# el.prop(propName[, propValue])

Use the prop() method to get or set properties on an element.

// Set property
$input.prop('value', 10);

// Get a property
var enteredValue = $input.prop('value');

# el.hasClass(className)

Use the hasClass() method to check whether a class is set on an element.

var isAwesome = $domEl.hasClass('awesome-text');

# el.addClass(className)

Use the addClass() method to add a class to an element, if it is not already set.

// Make it awesome
$domEl.addClass('awesome-text');

# el.removeClass(className)

Use the removeClass() method to remove a class on an element.

// Make it boring
$domEl.removeClass('awesome-text');

# el.toggleClass(className)

Use the toggleClass() method to toggle a class on an element.

// Add class
$domEl.toggleClass('awesome-text');

//Remove it again
$domEl.toggleClass('awesome-text');

# el.parent()

Use the parent() method to get the parent element (also a $DOM object) of a given element.

var container = $content.parent();

container.addClass('active');

# el.children()

Use the children() method to get the child elements of a given element. This will return an array of $DOM objects.

var items = $myList.children();

items.forEach(function($item) {
  // so something with each item...
});

# el.find(selector)

Use the find() method to get the descendant elements of the given element that match a provided selector. This will return an array of $DOM objects.

var newItems = $items.find('.new-item');

newItems.forEach(function($item) {
  // so something with each item...
});

# el.remove()

Use the remove() method to remove the element from the document.

$domEl.remove();

# el.append(elem)

Use the append() method to insert an element as the last child of a parent element. This will return the appended element as a $DOM object.

// Append a $DOM element
$myList.append($newItem);

// Append a raw HTML element
$myList.append(li);

// Append an element created on the fly
$myList.append('<li>')
  .addClass('new-item');

# el.prepend(elem)

Use the prepend() method to insert an element as the first child of a parent element. This will return the prepended element as a $DOM object. See el.append() for all the ways you can use this method.

# el.css()

Use the css() method to set inline styles on an element, or to retrieve particular styles on an element as determined by the browser.

// Set single style
$item.css('color', 'red');

// Set multiple styles
$item.css({
  color: 'red',
  'font-weight': 'bold'
});

// Get a computed style by name
var bg = $domEl.css('background-color');

// Get all computed styles
var allStyles = $domEl.css();

# el.data()

Use the data() method to associate data with an element, or to retrieve data already set on an element using this method.

// Set a data key and value
$item.data('price', 100);

// Set many data pieces at once
$item.data({
  price: 100,
  discountPc: 10,
  stock: 37
});

// Get a piece of data
var price = $item.data('price');

// Get all data associated with this element
var data = $item.data();

// Delete all data associated with this element by passing in null
$item.data(null);

# el.on(eventType, handlerFunc[, context])

Use the on() method add an event listener to an element. The optional argument context allows a custom value to be set for this inside the hander function. It defaults to the $DOM object that the event listener is being added to.

$closeButton.on('click', function() {
  this.parent().remove();
});