Skip to content

Instantly share code, notes, and snippets.

@williammalo
Forked from 140bytes/LICENSE.txt
Last active January 26, 2018 21:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save williammalo/2193431 to your computer and use it in GitHub Desktop.
Save williammalo/2193431 to your computer and use it in GitHub Desktop.
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
Copy link

atk 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
Copy link
Author

@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
Copy link

atk 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
Copy link
Author

@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
Copy link

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
Copy link

atk 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
Copy link

@atk, yes, now works. thank you

@atk
Copy link

atk commented Mar 30, 2012

You're welcome, @Evghenusi.

@williammalo
Copy link
Author

@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
Copy link

atk 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
Copy link

p01 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
Copy link

atk 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
Copy link

p01 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
Copy link
Author

@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
Copy link
Author

@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