Named Element Access By ID

The problem goes like this:

For each element in the currently loaded markup page that has an 'id'
attribute, elements can be accessed like-

var elem = document.getElementById("foo"); - ("foo" is the 'id')

now i want to implement a shorthand method which can give me the
element just by this:

var elem = document.foo; -("foo" is the 'id');

For this , i will have to add properties to the global "document"
object for each element in the currently loaded page that has an
attribute. These properties should be added when a page is loaded , and
should be removed when a page is unloaded..

How can i dynamically add and remove property to an object.