Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The cleanest, easiest dom api ever! It will change your life!

I always thought there was a better way to access the dom. This is a tool that allows you to use extremely simple syntax to access dom elements. It makes an object with the name of your choice (I chose "$") that contains a reference to all elements that have an id.

example:

<script> $.foo.innerHTML = "Hello world" </script>

You can even choose to use an object that already exists (I chose "document" because it makes sense)

document.foo.innerHTML = "Hello world"

If you want to live dangerously, you can even make everything global!

foo.innerHTML = "Hello world"

function(
a, //object
d,i //placeholders
){
for(i in d=document.getElementsByTagName('*')) //for every element in the page
a[d[i].id] //make a variable in that object that has the name of the id
=d[i] //set that variable's value to the element
}
function(a,d,i){for(i in d=document.getElementsByTagName('*'))a[d[i].id]=d[i]}
{
"name": "EasyGetElementById",
"description": "The cleanest, easiest dom api ever! It will change your life!",
"keywords": [
"dom",
"id",
"query",
"simple",
"easy"
]
}
<!doctype html>
<span id=foo></span>
<span id=bar></span>
<span id=lorem></span>
<span id=ipsum></span>
<span id=dolor></span>
<span></span>
<script>
easydom = function(a,d,i){for(i in d=document.getElementsByTagName('*'))a[d[i].id]=d[i]}
var $={}
easydom($)
$.foo.innerHTML = "It"
$.bar.innerHTML = "works!"
$.lorem.innerHTML = "amazing"
$.ipsum.innerHTML = "!!!!!!!!"
</script>​
@atk

This comment has been minimized.

Copy link

commented Mar 26, 2012

You could replace "window" with "this", shortening this function even further. All this reminds me a bit of document.all, another rather stupid idea from Microsoft (not that they hadn't got a few good ones, like innerHTML).

@williammalo

This comment has been minimized.

Copy link
Owner Author

commented Mar 26, 2012

@atk
I used "window" because using "this" feels wrong. I guess I could tho...

Document.all was great! It should be in the standard imo...

@atk

This comment has been minimized.

Copy link

commented Mar 26, 2012

If not called/applied in another context, this will be window anyway. And I don't like document.all, because it erratically mixes IDs, names and classnames. The W3C DOM methods are much more straightforward (and with the new querySelector[All], they are really versatile).

@williammalo

This comment has been minimized.

Copy link
Owner Author

commented Mar 26, 2012

@atk
quote: " it erratically mixes IDs, names and classnames. "
I did not know that! I guess it really does suck then :)
P.S. I changed "window" to "this".

@Evghenusi

This comment has been minimized.

Copy link

commented Mar 30, 2012

Opera 11.62 - Uncaught exception: TypeError: Cannot convert 'this[a]' to object
Chrome 16.0.912.63 - TypeError: Cannot set property 'foo' of undefined
FireFox 12.0 - Error: can't convert undefined to object
IE6/7/8 - Error: Object expected
on jsfiddle.net works without error, but why not work on the page?


Hosting died as a specially
@atk

This comment has been minimized.

Copy link

commented Mar 30, 2012

OK, error found: we forgot to instantiate the object. Corrected function:

function(a,d,i){this[a]={};for(i in d=document.getElementsByTagName('*'))if(d[i].id)this[a][d[i].id]=d[i]}

Incidentially, testing in a jquery-Environment would have made this example run without failure.

@Evghenusi

This comment has been minimized.

Copy link

commented Mar 30, 2012

@atk, yes, now works. thank you

@atk

This comment has been minimized.

Copy link

commented Mar 30, 2012

You're welcome, @Evghenusi.

@williammalo

This comment has been minimized.

Copy link
Owner Author

commented Mar 30, 2012

@atk and @Evghenusi
Ah! I forgot to declare the $ variable!
The function is perfect, it's my example that failed.
I fixed it now.
I guess I shouldn't test my code in jsfiddle then...

@atk

This comment has been minimized.

Copy link

commented Mar 30, 2012

Never mind that. You could even save some space by reusing a:

function(a,d,i){a=this[a]={};for(i in d=document.getElementsByTagName('*'))if(d[i].id)a[d[i].id]=d[i]}

@p01

This comment has been minimized.

Copy link

commented Apr 11, 2012

Another 2 bytes shorter:

function(a,b,d,i){a=this[a]={};for(i in d=document.getElementsByTagName('*'))if(b=d[i].id)a[b]=d[i]}

Sidenote: self[a] might be less confusing than this[a]

@atk

This comment has been minimized.

Copy link

commented Apr 12, 2012

I like the idea of using self[a]. If we don't care about a[0] to possibly contain one element without any id, we can make this even shorter:

function(a,b,i){a=self[a]={};for(i in d=document.getElementsByTagName('*'))a[d[i].id||0]=d[i]}

@p01

This comment has been minimized.

Copy link

commented Apr 12, 2012

You mixed up b and d in that code snippet, but other than that all good!

I thought about d[i].id||'?' since ? is not a valid ID for HTML elements, that could work OK, but it still feels a bit dirty.

Speaking of dirty, what do you guys think of:

function a(d,i){for(i in d=document.getElementsByTagName('*'))a[d[i].id||'?']=d[i]}

which you use like this:

var $ = function a(d,i){for(i in d=document.getElementsByTagName('*'))a[d[i].id||'?']=d[i]};
$();
$.foo.textContent = 'woohooo!';

What do you guys think of that ?

@williammalo

This comment has been minimized.

Copy link
Owner Author

commented Apr 12, 2012

@p01
The problem with both of your edits is the fact that you reset "a" to an empty object. My code has to allow using an object that already exists, for example: "document".
I will take into condideration your "?" idea tho :)

@williammalo

This comment has been minimized.

Copy link
Owner Author

commented Apr 12, 2012

@atk and @p01
New version is up! Tell me what you think!
Turns out that the id of an element without an id is always === to ""... so checking if an element has an id isn't important at all.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.