Dominique

A micro DOM selector and property pluralizer

Open the sample page to see the below examples in action; or, get the JavaScript file at GitHub.

Dominique is a tiny JavaScript library who thinks that most of the JavaScript DOM API is a-ok, and really doesn't need any sweeping and opinionated framework to take over and start bossing it around. But there are a few things about the DOM that are just, well. Yeah. Need fixing.

Important: Dominique does not play well with jQuery (or MooTools or Prototype), since they share the $ in common. You should use one or the other.

Also: If you need to worry about really junk browsers, then you’d better include an ES6 polyfill. Dominique is into Zen: she lives in the now and has no regrets.

The good bits of the native DOM API:

The properties. The methods. innerHTML. appendChild(). insertBefore(). classList.add(). Heck yeah. Why fix what ain’t broke?

The not-so-good bits:

• The selectors.
• OMG the selectors!
• The oh-so-reliable-but-intensely-unsatisfying for loop.
• Having to set properties and methods one at a time. Yuck.

How-tos:

Selectors.

Users of popular JavaScript libraries will be well familiar with such selectors as $('p'), $('#clickme'), $('.ma-cherie-amour'), etc. Use this $selector pattern with JavaScript’s awesome DOM properties and methods:

Examples

$('html').lang = 'en';
$('body').classList.add('dominique');
$('#clickme').addEventListener('click', function() {
	alert('Wahoo!');
});

Note: $('html') selects for document.documentElement; $('body') selects for document.body.

Looping.

If you need to loop through an HTMLCollection, Dominique allows you to use the newer and simpler for...of (instead of the classic but bothersome for loop in vanillaJS):

Example

for (var querybobs of $('.querybob')) {
	querybobs.innerHTML = 'Hi, Bob!';
}

Now, who wouldn’t call that an improvement? Dominique thinks you’d have to.

If you need to grab just one element from a collection, go array-like:

Example

$('.querybob')[1].style.color = 'lightSeaGreen';

And you can still, of course, use the classic for loop. If you really want to. Masochist.

Element creation.

To access document.createElement(), simply include pointy brackets around a tag selector. To create an h1, for example, use $('<h1>').

This monster:

var h3 = document.createElement('h3');
h3.innerHTML = 'Footer:';
document.querySelector('#page').appendChild(h3);

is a pattern only a mother could love. So why don’t you and Dominique get together and do this instead:

Example

$('#page').appendChild($('<h3>')).innerHTML = 'Footer:';

Ooh! Like!

Pluralizer properties and methods.

As mentioned above, Dominique likes the properties and methods native to the DOM API just fine. But she thinks it would be nice if you could set more than one of them at a time. With Dominique’s properties() and methods(), you can do just that.

property()

With the property() method, you can pluralize settable static properties using standard object notation:

textContent: 'Later, Bob.'

Use a nested object for native chains of two methods (in particular style[x]):

style: {
	color: 'crimson'
}

Example

$('#page').appendChild($('<footer>')).property({
	textContent: 'Later, Bob.',
	className: 'footer-stuff',
	style: {
		color: 'crimson',
		'font-style': 'italic'
	}
});

method()

With method(), you can pluralize settable methods.

Variations:

Use a single value for methods possessing a single argument:

appendChild: $('<p>')

Use an empty string for methods possessing no arguments:

focus: ''

Use an array of strings for methods possessing two arguments:

setAttribute: ['title', 'page-stuff']

Use a nested object for native chains of two methods, e.g. classList.add:

classList: {
	add: 'dominique'
}

Examples:

$('#clickme').method({
	focus: '',
	addEventListener: ['click', function() {
		alert('Wahoo!');
	}]
});

$('#page').method({
	setAttribute: ['title', 'page-stuff'],
	classList: {
		add: ['dominique', 'ma-cherie-amour'],
		remove: 'page'
	}
});

setAttributes() and styles()

It would be convenient to have a way to set any number of attributes for an element within a single statement. But because of the nature of objects in JavaScript, you cannot set the same method multiple times within the same code block of methods() – only the last of the duplicates will be actually be set. Sorry, but that’s just JavaScript; nothing Dominique can do about it.

Or can she? Meet setAttributes():

Example:

$('#clickme').setAttributes({
	type: 'button',
	title: 'pretty-please',
	'data-trick': 'gotcha'
});

In the same spirit of giving, Dominique offers styles(), with which you can set as many styles as you want without mucking about with nested objects in properties(), for your convenience.

Example:

$('#page').styles({
	backgroundColor: 'blanchedAlmond',
	padding: '1em'
});

Pretty sweet, huh?

Okay, um... filesize?

Oh, yeah: the filesize of Dominique, minified, comes screaming in at 900-odd bytes. Yes, bytes. As in less than one kayBee. That’s like beating a four-minute mile. Woo-hoo!

Will you, won’t you beta test?

Go on, take Dominique out for coffee. Here’s the download at GitHub. Let us know how it goes.