Link to home
Start Free TrialLog in
Avatar of duncanb7
duncanb7

asked on

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

SOLUTION
Avatar of iGottZ
iGottZ
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of duncanb7
duncanb7

ASKER

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


SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
the this in gtn at this line:
alert(document.gid("container").gtn("table")[0].innerHTML);

refers to the return value of:
document.gid("container")
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
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?
<!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.
waah.. my comment has spelling issues.. made *it just for you
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.
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.
 
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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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

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

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

line14- for (var i in methods) {

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

Please advise

Duncan
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for your reply.
I will continue this on new thread

Duncan