chibineku Posted April 27, 2009 Share Posted April 27, 2009 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 More sharing options...
jeffman Posted April 27, 2009 Share Posted April 27, 2009 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 More sharing options...
chibineku Posted April 27, 2009 Author Share Posted April 27, 2009 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 More sharing options...
Ingolme Posted April 27, 2009 Share Posted April 27, 2009 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 More sharing options...
chibineku Posted April 27, 2009 Author Share Posted April 27, 2009 So is there any worthwhile purpose to these methods then? Link to comment Share on other sites More sharing options...
jeffman Posted April 27, 2009 Share Posted April 27, 2009 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 More sharing options...
Ingolme Posted April 27, 2009 Share Posted April 27, 2009 Unfortunately, Internet Explorer does not allow you to play with the HTMLElement() object Link to comment Share on other sites More sharing options...
jeffman Posted April 27, 2009 Share Posted April 27, 2009 Unfortunately, Internet Explorer does not allow you to play with the HTMLElement() objectYes. 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 More sharing options...
chibineku Posted April 27, 2009 Author Share Posted April 27, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.