document.getElementById() shortcut :)

Tazz-99 · 05-09-2012, 04:45 AM

Using OOP, you can shorten your time spent typing "document.getElementById()" to something short as shown here:

I use "Tie" as mine, since it's easy for me to remember hehe.

Code:

Tie = function () {} // This just declares the object "Tie".

Tie.id = function (div) {
  return document.getElementById(div);
}

Now if you need to get something by using ID, You only have to type:

Code:

Tie.id("whatyouwant").innerHTML = "Useful";

I find this saves me a lot of time.

devnull69 · 05-09-2012, 07:12 AM

A more common and shorter way

Code:

function $(id) {
    return document.getElementById(id);
}

$("posts").style.backgroundColor = "black";

Tazz-99 · 05-09-2012, 10:15 PM

True, whichever you prefer really.

Lerura · 05-10-2012, 05:12 AM

Code:

Doc=document;
Object.prototype.Id=function(id){return this.getElementById(id);}
Object.prototype.BGC=function(C){this.style.backgroundColor=C;}

Code:

Doc.Id('ElementID').BGC('black');

Taro · 05-10-2012, 10:33 PM

Hello,

How do you incorporate this script with an on-button-click event?

Lerura · 05-16-2012, 12:56 AM

Quote:

Originally Posted by Taro

How do you incorporate this script with an on-button-click event?

Code:

<html>
<head>
<title></title>
<script>
Doc=document;
Object.prototype.Id=function(id){return this.getElementById(id);}
Object.prototype.BGC=function(C){this.style.backgroundColor=C;}
</script>
<head>
<body>
<div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>
<input type="button" onclick="Doc.Id('Square').BGC('black')" value="Make It Black">
<input type="button" onclick="Doc.Id('Square').BGC('blue')" value="Make It Blue">
</body>
</html>

Old Pedant · 05-16-2012, 01:12 AM

But couldn't you do it neater, thus?

Code:

<html>
<head>
<title></title>
<head>
<body>
<div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>
<form id="theForm">
<input type="button" name="b1" value="Make It Black">
<input type="button" name="b2" id-"b2" value="Make It Blue">
</form>
<script>
Doc=document;
Object.prototype.Id=function(id){return this.getElementById(id);}
Object.prototype.BGC=function(C){this.style.backgroundColor=C;}

// then either of these:
Doc.Id("theForm").b1.onclick = function(){Doc.Id('Square').BGC('black');};
Doc.Id("b2").onclick = function(){Doc.Id('Square').BGC('blue');};
</script>

</body>
</html>

Lerura · 05-16-2012, 01:38 AM

Also a good way.

This way have the advantage(?) that all scripting is written inside the <script>

Richter · 06-12-2012, 12:08 PM

Quote:

Originally Posted by Lerura

Code:

Doc=document;
Object.prototype.Id=function(id){return this.getElementById(id);}
Object.prototype.BGC=function(C){this.style.backgroundColor=C;}

Code:

Doc.Id('ElementID').BGC('black');

Be caution when you touch the Object class, it can effect to every object in javascript like you can't use For In to Array for get every index.

If you want to do it that way I suggest you to use HTMLElement will be better choice then Object.

jmrker · 06-12-2012, 09:43 PM

Quote:

Originally Posted by Old Pedant

But couldn't you do it neater, thus?

Code:

<html>
<head>
<title></title>
<head>
<body>
<div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>
<form id="theForm">
<input type="button" name="b1" value="Make It Black">
<input type="button" name="b2" id-"b2" value="Make It Blue">
</form>
<script>
Doc=document;
Object.prototype.Id=function(id){return this.getElementById(id);}
Object.prototype.BGC=function(C){this.style.backgroundColor=C;}

// then either of these:
Doc.Id("theForm").b1.onclick = function(){Doc.Id('Square').BGC('black');};
Doc.Id("b2").onclick = function(){Doc.Id('Square').BGC('blue');};
</script>

</body>
</html>

Minor typing error. Should be:

Code:

<input type="button" name="b2" id="b2" value="Make It Blue">

Philip M · 06-14-2012, 07:47 AM

This code throws an error in IE9

Line: 17
Error: Object doesn't support property or method 'Id'

Seems a long way round to get to

Code:

<div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>

<input type="button" id="b1" value="Make It Black" onclick = "change('black')">
<input type="button" id="b2" value="Make It Blue" onclick = "change('blue')">

<script type="text/javascript">
function change(col) {
document.getElementById("Square").style.backgroundColor = col;
}
</script>

DrDOS · 06-14-2012, 03:21 PM

This is my version. Saves a lot of coding.

Code:

function byId(A)
{
var B=window.document.getElementById(A);
return B;
}
function byClass(C)
{
var D=window.document.getElementsByClassName(C);
return D;
}
function byTag(E)
{
var F=window.document.getElementsByTagName(E);
return F;
}