duncanb7
asked on
Alias for getElemetById and getElementsByTagName without Jquery library help
Dear Expert,
I am trying to alias document.getElementId("con tainer").g etElements ByTagName( "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").inn erHTML));
or alert(gtn("table")[0].inne rHTML); 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].innerHT ML); that reported invalid error for
document.getElementById("c ontainer") .document.getElementsByTagName("tabl e")[0]when combining two function gtd and gtn because correct sytnax should
be document.getElementById("c ontainer") .getElemen tsByTagNam e("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
I am trying to alias document.getElementId("con
and ByTagName respectively. If I run code with alert(gid("container").inn
or alert(gtn("table")[0].inne
two function, gid or gtn to use that will create error such as using
alert(gid("container").gtn
document.getElementById("c
be document.getElementById("c
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
the this in gtn at this line:
alert(document.gid("contai ner").gtn( "table")[0 ].innerHTM L);
refers to the return value of:
document.gid("container")
alert(document.gid("contai
refers to the return value of:
document.gid("container")
ASKER
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
http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx
ASKER
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 ?
What is different bewteen
HTMLDocument.prototype.gid
return this.getElementById(id);
}
And
HTMLDocument.prototype.gid
return this.getElementById(id);
}
In
HTMLDocument.prototype.gid
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>
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
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.
<!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>
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.
ASKER
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.
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(
</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.
in some hours i will try making it compatible to ie5 but now i will have breakfast.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It works for all cases and double(gid().gid()), but the last one I found, for double gtn()
gtd("table")[0].gtn("table ")[0].inne rHTML is not working if
<div id="container">
<table><tbody><tr><td><tab le<tr><td> 1232</td>< /tr><table ></td></tr ></table>< /tbody></t able>
</div>
It will report null.probably is scope in front of gtn().
Would you mind also change that ?
Please advise
Duncan
gtd("table")[0].gtn("table
<div id="container">
<table><tbody><tr><td><tab
</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:
this is what works with my fixed version of your html:
yours:
<div id="container">
<table><tbody><tr><td><table<tr><td>1232</td></tr><table></td></tr></table></tbody></table>
</div>
valid:<div id="container">
<table><tbody><tr><td><table<tr><td>1232</td></tr><table></td></tr></table></tbody></table>
</div>
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);
};
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>
ASKER
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><tab le><tbody> <tr><td>12 32</td></t r></tbody> </table></ td></tr></ tbody></ta ble>
</div>
After re-test
alert(gid("container").gtn ("table")[ 0].gtn("ta ble")[0].i nnerHTML);
it is no problem at all in FF but still not working in IE7.
o not gtd , it should be gid and <div id="container">
<table><tbody><tr><td><tab
</div>
After re-test
alert(gid("container").gtn
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>
ASKER
line14- for (var i in methods) {
line-49- var init = function () {
Both lines reports error
Please advise
Duncan
line-49- var init = function () {
Both lines reports error
Please advise
Duncan
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for your reply.
I will continue this on new thread
Duncan
I will continue this on new thread
Duncan
ASKER
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