Jump to content

__definegetter__ & __definesetter__


chibineku

Recommended Posts

Hi there. I'm working my way through the JavaScript Bible and I've come across a couple of methods that I understand are only available on Mozilla, and therefore (I assume because they aren't widely supported) aren't explained in massive detail. Well, it bugs me not understanding it. Here is an example from the book of how __defineGetter__() can be used:

<script type="text/javascript">if (HTMLElement) {HTMLElement.prototype.__defineGetter__("childNodeDetail",function() {   var result = {elementNodes:0, textNodes:0}   for (var i=0; i < this.childNodes.length; i++) {	  switch (this.childNodes[i].nodeType) {		 case 1:			result.elementNodes++;			break;		 case 3:			result.textNodes++;			break;	  }   }   return result;   }   )}</script>

What I find baffling in particular is how we come to have case 1 and case 3. I can't see where these numbers come from. I hope I'm not being especially dense and missing something obvious.

Link to comment
Share on other sites

The item being tested in the switch is a nodeType. There are many different node types. All this function is concerned with is nodeType 1 and 3. Type 1 refers to any page element, the kind that exists in a <tag>. Type 3 refers to a text node, which is never an element by itself, but is the text content of certain elements.There is a partial list here: http://www.w3schools.com/Dom/dom_nodetype.aspThe Firefox DOM Inspector (it's an add-on) puts a list of these guys at the top of the inspection window (when inspecting as a Javascript Object).So your function is simply creating a tally of page elements and text nodes.

Link to comment
Share on other sites

Ah, I see. So to access this property, would I simply type, for example: document.childNodeDetail and that would take the value of the number of child nodes in the document? Or, say, document.head.childNodeDetail?

Link to comment
Share on other sites

You can access the "nodeType" property on any node.The number of child nodes is given by the length property of the node list object:

document.childNodes.length;

The nodeType property returns a number that's associated with the type of node:

document.nodeType;

Look through the XML DOM tutorial for more information about it.

Link to comment
Share on other sites

So is there any worthwhile purpose to these methods then?

Link to comment
Share on other sites

So is there any worthwhile purpose to these methods then?
The __definegetter__ & __definesetter__ methods allow you to re-prototype an HTML element (among other objects) in a single statement. So yes, it is useful. You may wish to associate some data with a page element when there is no existing variable to hold it. You may wish for every instance of an element to have a method associated with it.For instance, if you want to animate multiple page elements using setInterval(), you need a unique variable to store the return value of setInterval() every time it is called. You could do that with a clunky array, and then mess around with indexes, etc.. Or you can assign a new property to your page element (call it "interval") that holds the return value. Doing it this way streamlines the code a lotThe childNodes examples look kind of dumb, but examples often do.The problem is that these are Mozilla only.So to ensure that this functionality works in all browsers, what we currently do is get a reference to all instances of an element using something like getElementsByTagName(), put them through a loop, and attach a property or method to the instances one at a time. And this is not hard to do at all. The __define__ methods you've brought up are shortcuts to that process.
Link to comment
Share on other sites

Unfortunately, Internet Explorer does not allow you to play with the HTMLElement() object
Yes. Redefining element prototypes would be helpful. It's not a big hassle to redefine a group of unique elements, as I described above. But if you create an element dynamically, you have to redefine its properties as well. That's just an extra step that could be skipped.
Link to comment
Share on other sites

Provided you don't want to create elements dynamically, is there any time/efficiency gain in redefining the prototype rather than just running an array/loop type of function? I mean, the new method you add just equates to a function anyway. I don't mean to be too pesky, but if anyone has any examples that use the defineGetter/Setter functions, could I take a look?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...