cdeclog

document.getElementById('foo')

$('foo')

Surprisingly some people actually don't know about this one ( including ~100KB file just to use Ajax.Request family )

var woot = document.getElementById('bar').value

var woot = $('bar').value

var woot = $F('bar')

Handy shortcut for reading a value of a form control

$('footer').style.height = '100px';
$('footer').style.background = '#ffc';	

$('footer').setStyle({
	height: '100px',
	background: '#ffc'
})

Dreaming about IE behaving W3C way? Not happenning! (but second construct will make you forget about cross-browser glitches)

$('coolestWidgetEver').innerHTML = 'some nifty content'

$('coolestWidgetEver').update('some nifty content')

One of those simple ones yet quite often forgotten. Yes, I know they are almost the same but I want to see you doing THIS with the first one
(isn't chaining just cool?)

$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

new Ajax.Request('ninja.php', {
	parameters: {
		weapon1: 'foo',
		weapon2: 'bar'
	}
})

Cleaner and better structured parameters definition

new Ajax.Request('blah.php', {
	method: 'POST',
	asynchronous: true,
	contentType: 'application/x-www-form-urlencoded',
	encoding: 'UTF-8',
})

new Ajax.Request('blah.php')

All of these options are in Ajax.Request by default! "method: 'POST'" happens to be on every second pastie page I've seen 
(Still don't believe in JS inheritance? You don't have to. Just take advantage of it)

Event.observe('myContainer', 'click', doSomeMagic)

$('myContainer').observe('click', doSomeMagic)

This one is debatable but second way is more Object Oriented (well... sort of) and easier to chain (So decide for yourself)

$$('div.hidden').each(function(el){
	el.show();
})

$$('div.hidden').invoke('show')

Here's a typical "each overuse". We have invoke for such things, folks! Sadly not many people know about it.

$$('div.collapsed').each(function(el){
	el.observe('click', expand);
})

$$('div.collapsed').invoke('observe', 'click', expand)

Ha! Take this! Invoke can also be used for event handling when iterating over a collection of elements. It's really easy, isn't it?

$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);

$$('input.date')
	.invoke('observe', 'focus', onFocus)
		.invoke('observe', 'blur', onBlur)

Somehow people tend to forget about "chaining nirvana". Don't like the way it looks? Think about saving some time by NOT invoking $$ twice!

$('productTable').innerHTML = 
	$('productTable').innerHTML + 
	'<tr><td>' + productId + ' '
	+ productName + '</td></tr><tr><td>' 
	+ productId + ' ' + productPrice + 
	'</td></tr>'

var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
	rowTemplate.evaluate({
		id: productId,
		name: productName,
		price: productPrice
	}))
)

No I'm not kidding. This has been posted to #prototype and something was wrong with it (hmm... I wonder what)