[Javascript] OOP and the DOM

girzel girzel at gmail.com
Wed Oct 17 08:02:23 CDT 2007


Hi there,

I have a somewhat theoretical question that I hope someone will have  
the patience to help me answer.

I have a relatively good grasp of OOP, via Python, and also a basic  
familiarity with using Javascript for doing 'stupid web tricks'. I'd  
like to deepen my understanding of Javascript so I can put it to more  
complex uses, but I'm a little confused about the connection between  
Javascript's OOP aspects, and its interaction with the DOM.  
Specifically, to what extent does a regular DOM node 'grab' like node  
= d.getElementsByID('myDiv') correspond to the creation of an object?  
If I've created my own classes which are meant to correspond to  
elements of the DOM, are they very closely tied together (ie as  
object references), or do they merely copy values from the elements?  
I've read that the DOM as a whole is a single object, does that mean  
that specific elements/nodes are only attributes of the DOM object?

My practical situation: I have a webpage with a giant list of links,  
and a smaller list which represents categories to which those links  
might belong. Clicking categories in the category list 'disappears'  
links which don't belong to that category, so that you can filter the  
giant link list by clicking on one or more categories.

Right now this is done by re-parsing the link list every time a  
category is toggled on or off. I thought I could move some of the  
heavy lifting to onLoad time, by creating a Category class  
corresponding to the category toggles, and having each instantiation  
search out the links which 'belong' to it and put them in an array.  
Then, when the category is clicked, it already 'knows' which links to  
disappear or not disappear.

I don't really know if this will actually run faster than my present  
setup. I also don't know if it's possible to 'actually' connect the  
class instances to the DOM elements: would a Category class have a  
this.element = d.getElementsByID() attribute in it? I'm afraid I'll  
make some elaborate construct that does just as much work as the  
preset hack-job, or even more: once at load time, and then again  
every time the categories are clicked.

If anyone's in the mood for a philosophical exposition (or can point  
me to an existing exposition) that would be wonderful; otherwise  
practical tips would be equally appreciated.

Thanks very much,
Eric



More information about the Javascript mailing list