Alias for getElemetById and getElementsByTagName without Jquery library help

Dear Expert,

I am trying to alias document.getElementId("container").getElementsByTagName("table")[0] . So I created two function one, gid and  the other ,gtn for getElementById
and ByTagName respectively.  If I run code with alert(gid("container").innerHTML));
or alert(gtn("table")[0].innerHTML); that is no issue. but when combine
two function, gid or gtn to use that will create error such as using  
 alert(gid("container").gtn("table")[0].innerHTML); that reported  invalid error for
document.getElementById("container").document.getElementsByTagName("table")[0]when combining two function gtd and gtn because correct sytnax should
be document.getElementById("container").getElementsByTagName("table")[0]

Anyone has code for combining function for gid() and gtn(0 code for achieving what
I need.
I know Jquery can be easily doing for that but I want do it for my own code or without
Jqurey code help that will be good for  us
study and that will help know how Jquery can make it easier or its code behind .
If you have code to know how Jquery do that that willl be welcome to send it to me.
Please don't send me the Jquery library path and word about Jquery already do that for you besides you know how

THis article link might help to know how Jquery can make that easier
http://stackoverflow.com/questions/954417/make-alias-to-document-getelementbyid-in-javascript
Please advise

Duncan











<html>
<head>
<script type="text/javascript">
alert(gid("container").gtn("table")[0].innerHTML);
function gid(id){
var mdoc = new Object;
mdoc=document.getElementById(id);
return mdoc;
}
function gtn(tn){

var mdoc = new Object;
mdoc=document.getElementsByTagName(tn);
return mdoc;
}
</script>
</head>
<body>
<div id="container">
<table><tr><td>1232</td></tr></table>
</div>
</body>
</html>

Open in new window

LVL 13
duncanb7Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

iGottZFrontend EngineerCommented:
the issue is that line 4 gets executed before the DOM is ready.
to solve that you could use <body onload="somefunction();">
could place the javascript below the body or could use jquery to use $() to fire as soon as the dom is ready.

besides that..

you are creating thoose functions after you use them. thats not supposed to work fine.

besides that.. what you seek for is appending thoose methods into the DOM objects prototype. i dont know yet how to do that crossbrowser. i will may try it in around a half hour. food is ready.
0
ProculopsisCommented:

The main problem is that for this to work you need to call the getElementsByTagName method for the actual object and not document.

<html>
<head>
<script type="text/javascript">

window.onload = function () {
  alert( gtn.call( gid("container"), "table" )[0].innerHTML );
};

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

function gtn(tn){ return this.getElementsByTagName( tn ); }

</script>
</head>
<body>
<div id="container">
<table><tr><td>1232</td></tr></table>
</div>
</body>
</html>

Open in new window

0
duncanb7Author Commented:
Yes, it works , how gtn will take consider getElementBYid, the element node
before gtn();
I never use call before, could you explain how it works
alert( gtn.call( gid("container"), "table" )[0].innerHTML ); ?


and "this" is referring to what at here ?

Please advise


0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

iGottZFrontend EngineerCommented:
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var gid = function (id) {
            return document.getElementById(id);
        }
        var gtn = function (tn) {
            return document.getElementsByTagName(tn);
        }
        HTMLDocument.prototype.gid = HTMLElement.prototype.gid = function (id) {
            return this.getElementById(id);
        }
        HTMLDocument.prototype.gtn = HTMLElement.prototype.gtn = function (tn) {
            return this.getElementsByTagName(tn);
        }
        function init () {
            alert(document.gid("container").gtn("table")[0].innerHTML);
        }
    </script>
</head>
<body onload="init();">
    <div id="container">
        <table><tr><td>1232</td></tr></table>
    </div>
</body>
</html>

Open in new window

though that is not IE compatible.. i will add IE compatiblity now.
0
iGottZFrontend EngineerCommented:
the this in gtn at this line:
alert(document.gid("container").gtn("table")[0].innerHTML);

refers to the return value of:
document.gid("container")
0
duncanb7Author Commented:
Thanks for all of your reply, I am studying this link also, and  ECMAScript document
http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx
0
duncanb7Author Commented:
Dear Igottz,

What is different bewteen
 
 HTMLDocument.prototype.gid = HTMLElement.prototype.gid = function (id) {
            return this.getElementById(id);
        }

And
 HTMLDocument.prototype.gid =function (id) {
            return this.getElementById(id);
        }

In
 HTMLDocument.prototype.gid = HTMLElement.prototype.gid = function (id) {
            return this.getElementById(id);
        }

Meaning do two times of

function (id) {
            return this.getElementById(id);
and then save it into HTMLDocument.prototype.gid?
0
iGottZFrontend EngineerCommented:
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		var addDOMMethod = function (name, func) {
			if (typeof HTMLElement != "undefined") {
				HTMLElement.prototype[name] = func;
			} else if (typeof Node != "undefined") {
				Node.prototype[name] = func;
			}
			if (typeof HTMLDocument != "undefined") {
				HTMLDocument.prototype[name] = func;
			} else {
				document[name] = func;
			}
			this[name] = (function (func) {
				return function (arg) {
					return func.call(document, arg);
				};
			})(func);
		}
		
		addDOMMethod.call(this, "gid", function(id) {
			return this.getElementById(id);
		});
		addDOMMethod.call(this, "gtn", function(tn) {
			return this.getElementsByTagName(tn);
		});
		
		var init = function () {
			var cont = gid("container");
			var tab = cont.gtn("table");
			alert(tab[0].innerHTML);
		}
	</script>
</head>
<body onload="init();">
<div id="container">
<table><tr><td>1232</td></tr></table>
</div>
</body>
</html>

Open in new window

voila.. made is just for you (though i think it can be usefull for my stuff too)

what it does: it extends the DOM with thoose functions and as you can see its a easy to use wrapper.
0
iGottZFrontend EngineerCommented:
waah.. my comment has spelling issues.. made *it just for you
0
iGottZFrontend EngineerCommented:
well.. this way it would work without the .call behind addDOMMethod
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		var addDOMMethod = function (that, name, func) {
			if (typeof HTMLElement != "undefined") {
				HTMLElement.prototype[name] = func;
			} else if (typeof Node != "undefined") {
				Node.prototype[name] = func;
			}
			if (typeof HTMLDocument != "undefined") {
				HTMLDocument.prototype[name] = func;
			} else {
				document[name] = func;
			}
			that[name] = (function (func) {
				return function (arg) {
					return func.call(document, arg);
				};
			})(func);
		}
		
		addDOMMethod(this, "gid", function(id) {
			return this.getElementById(id);
		});
		addDOMMethod(this, "gtn", function(tn) {
			return this.getElementsByTagName(tn);
		});
		
		var init = function () {
			var cont = gid("container");
			var tab = cont.gtn("table");
			alert(tab[0].innerHTML);
		}
	</script>
</head>
<body onload="init();">
<div id="container">
<table><tr><td>1232</td></tr></table>
</div>
</body>
</html>

Open in new window


notice: the "this" argument simply refers to the scope in wich the base function should be created in.
calling that function is simply equal to like: document.func but without using document. in coding.
0
duncanb7Author Commented:
Dear IGottz, your code just above is working in all browsers except IE7, Why?
And Proculopsis's code  that has done the work, what is advantage of your code
compared to him.Please advise

<script type="text/javascript">

window.onload = function () {
  alert( gtn.call( gid("container"), "table" )[0].innerHTML );
};

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

function gtn(tn){ return this.getElementsByTagName( tn ); }

</script>


And I should study more
"this" and ambigous fucntion, (function(func){}(func), HTMLElement, HTMLDocument
term.
 
0
iGottZFrontend EngineerCommented:
it does not work in ie7?.. hm.. i guess i know why. so far i've only tested it in chrome and ie9.
in some hours i will try making it compatible to ie5 but now i will have breakfast.
0
iGottZFrontend EngineerCommented:
IE7 sux. it does not have such a global object wich is used as prototype for each html element..

this solves it:
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		var addDOMMethod = (function () {
			var ie7 = /*@cc_on!@*/false && typeof HTMLElement == "undefined" && typeof Node == "undefined";
			if (ie7) {
				var methods = {};
				return function (that, name, func) {
					methods[name] = func;
					document[name] = func;
					that[name] = (function (func, methods) {
						return function (arg) {
							var ret = func.call(document, arg);
							for (var i in methods) {
								ret[i] = methods[i];
							}
							return ret;
						}
					})(func, methods);
				};
			} else {
				return function (that, name, func) {
					if (typeof HTMLElement != "undefined") {
						HTMLElement.prototype[name] = func;
					} else if (typeof Node != "undefined") {
						Node.prototype[name] = func;
					}
					if (typeof HTMLDocument != "undefined") {
						HTMLDocument.prototype[name] = func;
					} else {
						document[name] = func;
					}
					that[name] = (function (func) {
						return function (arg) {
							return func.call(document, arg);
						};
					})(func);
				};
			}
		})();
		
		addDOMMethod(this, "gid", function(id) {
			return this.getElementById(id);
		});
		addDOMMethod(this, "gtn", function(tn) {
			return this.getElementsByTagName(tn);
		});
		
		var init = function () {
			var cont = gid("container"); // equal to document.getElementById("container");
			var tab = cont.gtn("table"); // equal to document.getElementById("container").getElementsByTagName("table");
			alert(tab[0].innerHTML);
		}
	</script>
</head>
<body onload="init();">
	<div id="container">
		<table><tbody><tr><td>1232</td></tr></tbody></table>
	</div>
</body>
</html>

Open in new window

just as sidenote:
in IE7 and below this would work:
gid("container").gtn("table")[0];
but this dont:
document.getElementById("container").gtn("table")[0];
so do not use "document.getElementById() in case you want to use gtn on the returned object.

anyways.. you can also use this:

gtn("table")[0] without a scope in front.

also you could use:

gid("content").gid("some id within it");


have fun. hope this solves your problem somehow.
0
duncanb7Author Commented:
It works for all cases and double(gid().gid()),  but  the last one I found, for double gtn()

gtd("table")[0].gtn("table")[0].innerHTML is not working if
<div id="container">
            <table><tbody><tr><td><table<tr><td>1232</td></tr><table></td></tr></table></tbody></table>
      </div>

It will report null.probably is scope in front of gtn().
Would you mind also change that ?

Please advise
Duncan
0
iGottZFrontend EngineerCommented:
most likely because your html is invalid...
yours:
<div id="container">
	<table><tbody><tr><td><table<tr><td>1232</td></tr><table></td></tr></table></tbody></table>
</div>

Open in new window

valid:
<div id="container">
	<table><tbody><tr><td><table<tr><td>1232</td></tr><table></td></tr></table></tbody></table>
</div>

Open in new window

besides that, why are you using gtd? you never wanted a "gtd"
this is what works with my fixed version of your html:

var init = function () {
	alert(gid("container").gtn("table")[0].gtn("table")[0].innerHTML);
};

Open in new window

0
iGottZFrontend EngineerCommented:
oops. this is supposed to be the valid html. somehow my clipboard didnt copyed the fixed one in:
<div id="container">
	<table><tbody><tr><td><table><tbody><tr><td>1232</td></tr></tbody></table></td></tr></tbody></table>
</div>

Open in new window

0
duncanb7Author Commented:
typing mistake because I am tyring in EE instead of  copying the real code to you  , s
o not gtd , it should be gid and <div id="container">
      <table><tbody><tr><td><table><tbody><tr><td>1232</td></tr></tbody></table></td></tr></tbody></table>
</div>

After re-test
alert(gid("container").gtn("table")[0].gtn("table")[0].innerHTML);
 it is  no problem at all  in FF but still not working in IE7.



<html>
<head>
	<script type="text/javascript">
		var addDOMMethod = (function () {
			var ie7 = /*@cc_on!@*/false && typeof HTMLElement == "undefined" && typeof Node == "undefined";
			if (ie7) {
				var methods = {};
				return function (that, name, func) {
					methods[name] = func;
					document[name] = func;
					that[name] = (function (func, methods) {
						return function (arg) {
							var ret = func.call(document, arg);
							for (var i in methods) {
								ret[i] = methods[i];
							}
							return ret;
						}
					})(func, methods);
				};
			} else {
				return function (that, name, func) {
					if (typeof HTMLElement != "undefined") {
						HTMLElement.prototype[name] = func;
					} else if (typeof Node != "undefined") {
						Node.prototype[name] = func;
					}
					if (typeof HTMLDocument != "undefined") {
						HTMLDocument.prototype[name] = func;
					} else {
						document[name] = func;
					}
					that[name] = (function (func) {
						return function (arg) {
							return func.call(document, arg);
						};
					})(func);
				};
			}
		})();
		
		addDOMMethod(this, "gid", function(id) {
			return this.getElementById(id);
		});
		addDOMMethod(this, "gtn", function(tn) {
			return this.getElementsByTagName(tn);
		});
		
		var init = function () {
			var cont = gid("container"); // equal to document.getElementById("container");
			var tab = cont.gtn("table"); // equal to document.getElementById("container").getElementsByTagName("table");
			alert(tab[0].innerHTML);
			alert(gid("container").gtn("table")[0].gtn("table")[0].innerHTML);

		}
	</script>
	
</head>
<body onload="init();">
<div id="container" onload="init();">
	<table><tbody><tr><td><table><tbody><tr><td>1267</td></tr></tbody></table></td></tr></tbody></table>
</div> 


</body>
</html>

Open in new window

0
duncanb7Author Commented:
line14- for (var i in methods) {

line-49- var init = function () {
Both lines reports error

Please advise

Duncan
0
duncanb7Author Commented:
No food, please food provider

Duncan
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
duncanb7Author Commented:
Thanks for your reply.
I will continue this on new thread

Duncan
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Perl

From novice to tech pro — start learning today.