PrateekSaxena Posted March 14, 2007 Share Posted March 14, 2007 Hello,I am building something in JS that requires me to often check the elements parent's parent of grandpa. Is there a way that I can extend the element object to get a method called grandpa??? Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 you could do something like this (use this function instead of document.createElement) function createElement(tag){ var elem = document.createElement(tag); elem.grandpa = function() { return this.parentNode.parentNode; } return elem;} Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 14, 2007 Author Share Posted March 14, 2007 No no.. I mean like there is an HTML file - <body> <div id="saxena"> <div id="sks"> <div id="prateek"></div> <divi id="pooja"></div> </div> <div id="vandna"></div></body> go if i call prateek.grandpa.nodeId I should get "saxena" Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 You can extend the native Element object...many toolkits do it. Maybe you could download Prototype or mootools and look at the source and see how they do it. Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 the object oyu what to extend is HTMLElement. Unfortunately IE doesn't let you extend it. you will need to create a function that would scan the DOM and attach your function to every element unless you create the dom dynamically using the function I showed earlier. Link to comment Share on other sites More sharing options...
jesh Posted March 14, 2007 Share Posted March 14, 2007 the object oyu what to extend is HTMLElement. Unfortunately IE doesn't let you extend it. you will need to create a function that would scan the DOM and attach your function to every element unless you create the dom dynamically using the function I showed earlier.Yeah, I just ran into IE's little prevention yesterday on a different project. Punks. I wanted to add an addEventListener method to HTMLElements so that I could do it in a cross-browser way (rather than use addEventListener in DOM Compliant browsers and attachEvent in IE). So, I ended up doing what aspnetguy did - I wrote a stand-alone function.Instead of element.addEventListener("click", myhandler), I have to call addEventListener(element, "click", myhandler). Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 Is it that way with IE7 too? Hopefully they will open it up in future versions. Link to comment Share on other sites More sharing options...
jesh Posted March 14, 2007 Share Posted March 14, 2007 Is it that way with IE7 too?I don't know, I haven't downloaded that virus yet. Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 let me check then...I have it on my web server.EDIT: Nope IE7 won't let me either. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 14, 2007 Author Share Posted March 14, 2007 Would you please suggest a book that I could get on JS that tell you about the OOP in JS. I mean just the Syntax not the Bruce Eckel Stuff about OOP Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 I wrote an object to simulate HTMLElement.prototype in all browsersobject var DOMElement = { extend: function(name,fn) { if(!document.all) eval("HTMLElement.prototype." + name + " = fn"); else { // // IE doesn't allow access to HTMLElement // so we need to override // *document.createElement // *document.getElementById // *document.getElementsByTagName // //take a copy of //document.createElement var _createElement = document.createElement; //override document.createElement document.createElement = function(tag) { var _elem = _createElement(tag); eval("_elem." + name + " = fn"); return _elem; } //take copy of //document.getElementById var _getElementById = document.getElementById; //override document.getElementById document.getElementById = function(id) { var _elem = _getElementById(id); eval("_elem." + name + " = fn"); return _elem; } //take copy of //document.getElementsByTagName var _getElementsByTagName = document.getElementsByTagName; //override document.getElementsByTagName document.getElementsByTagName = function(tag) { var _arr = _getElementsByTagName(tag); for(var _elem=0;_elem<_arr.length;_elem++) eval("_arr[_elem]." + name + " = fn"); return _arr; } } } }; Here is some examples of how to use itexample <html><head> <script type="text/javascript" src="DOMElement.js"></script> <script type="text/javascript"> DOMElement.extend("foo",function(){alert('bar')}); DOMElement.extend("about","DOMElement v0.1") DOMElement.extend("contents",function(){return this.innerHTML}) var elem = document.createElement("div"); elem.foo(); onload = function() { var elem2 = document.getElementById("myDiv"); alert(elem2.about); var divs = document.getElementsByTagName("div"); for(var i=0;i<divs.length;i++) alert(divs[i].contents()) } </script></head><body> <div id="myDiv">hi</div> <div id="div2">there</div></body></html> Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 14, 2007 Author Share Posted March 14, 2007 Any suggestions for the book? Cause i could not understand half of what you wrote up there ! Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 start here http://www.javascriptkit.com/javatutors/oopjs.shtmlkeep in mind: var obj = new Object();obj.name = "myObject";obj.eat = function(){alert(this.name + " is eating!")} is the same as var obj = { name: "myObject", eat: function(){alert(this.name + " is eating!")}} and var arr = newArray();arr[0] = "one";arr[1] = "two"; is the same as var arr = ["one","two"]; Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 14, 2007 Author Share Posted March 14, 2007 Okay!eat: function(){alert(this.name + " is eating!")}This is the part that I was never able to understand!Apart from a website, is there a book that I should refer too, I mean a real book with paper and stuff! Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 O'Rielly always has good books. However, I have not bought or read any programming books (except for some in college) and have learned everything online and for free. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 14, 2007 Author Share Posted March 14, 2007 Alright, online it is then! thanks for your help, I will post on this topic only if I have any more problems!thanks.... Link to comment Share on other sites More sharing options...
jesh Posted March 14, 2007 Share Posted March 14, 2007 I wrote an object to simulate HTMLElement.prototype in all browsers// // IE doesn't allow access to HTMLElement // so we need to override // *document.createElement // *document.getElementById // *document.getElementsByTagName // Hah! So IE doesn't allow you to extend the HTMLElement, but it doesn't have any problems with you completely overriding document.createElement and document.getElementById!? All I can do is shake my head...Nice work, aspnetguy. Link to comment Share on other sites More sharing options...
jesh Posted March 14, 2007 Share Posted March 14, 2007 Alright, online it is then! thanks for your help, I will post on this topic only if I have any more problems!Me too, Prateek. I've only read one book on javascript (it was an O'Reilly book), the rest I've learned from playing and from reading online. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 14, 2007 Author Share Posted March 14, 2007 Ok....it seems that everyone seems to do it that way. Well then I will do the same! I iwll also save money as wont have to buy the book Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 programming books where I live are $50 - $80 so there is no way I would pay that much. In college we would by 4-6 books per semester and it would always be $300 - $400. Link to comment Share on other sites More sharing options...
aspnetguy Posted March 14, 2007 Share Posted March 14, 2007 I posted the code on my blog aswell so if you find any bugs or have an suggestions please post them there also. http://www.aspnetguy.com/blog/index.php/20...lelement-in-ie/Thanks Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 15, 2007 Author Share Posted March 15, 2007 My dad got this subscription from O'Reilly where you pay 20$ a month and can read any 10 books for that month, online! Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 15, 2007 Author Share Posted March 15, 2007 Blog added to http://del.icio.us/PrateekSaxena Link to comment Share on other sites More sharing options...
aspnetguy Posted March 15, 2007 Share Posted March 15, 2007 My dad got this subscription from O'Reilly where you pay 20$ a month and can read any 10 books for that month, online!Wow that is a good deal. If he already has a subscription you might as well use it if you can. Those books aren't downloadable are they j/kBlog added to http://del.icio.us/PrateekSaxena Thanks. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 15, 2007 Author Share Posted March 15, 2007 Hmm..actually you can see each page as a print friendly format too and they can be saved. But the subscriptions allows you to download any 5 Chapters in PDF in one month! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now