DOM object augmentation / Dopplegangers / Code Kata

[Peter Michaux]

Hi,

A few times, I've programmed a web page where I create JavaScript
objects to mirror DOM objects. I think of the JavaScript objects as
duals or dopplegangers where the JavaScript and DOM objects are
intimately connected. I've seen this called a backing object in one
book on JavaScript.

Lately I've been thinking about augmenting the DOM objects directly
with new properties. If I do augment, I think this means I have to do
a cleanup on the window.onunload even for Internet Explorer memory
leaks. Are there any other problems or issues with augmenting DOM
objects? Do people have opinions if this a good or bad practice? Seems
like DOM augmentation is a tidier concept.

Below are examples of each technique for the same task (using
JavaScript 1.6's map function). Any thoughts or suggestions? I know
this can be done in a functional programming style but I'm interested
in comparing the more OOP oriented techniques. However if someone
want's to post alternative techniques I'd be interested to read them.
This is a bit of a code kata (yes a new buzz phrase someone will pick
on) I've been thinking about lately. <URL: http://
codekata.pragprog.com/>

Thank you,
Peter

== using a dual object for the list ==

<ul id="todoList">
<li class="medium">Buy milk</li>
<li class="high">Ask Q on c.l.j</li>
<li class="high">Climb rocks</li>
</ul>

<p><a href="#" id="showHighs">high priority items</a></p>

<script type="text/javascript">

var list = {
el: document.getElementById('todoList'),

getHighPriorityItems: function() {
var items = this.el.childNodes,
highs = [];
for (var i=0; i<items.length; i++) {
if (items.className == "high") {
highs.push(items);
}
}
return highs;
}

};

document.getElementById('showHighs').onclick = function() {
var highs = list.getHighPriorityItems();
alert(highs.map(function(item){return
item.innerHTML;}).join('\n'));
return false;
};

</script>




== augmenting the DOM element ==

<ul id="todoList">
<li class="medium">Buy milk</li>
<li class="high">Ask Q on c.l.j</li>
<li class="high">Climb rocks</li>
</ul>

<p><a href="#" id="showHighs">high priority items</a></p>

<script type="text/javascript">

document.getElementById('todoList').getHighPriorityItems =
function() {
var items = this.childNodes,
highs = [];
for (var i=0; i<items.length; i++) {
if (items.className == "high") {
highs.push(items);
}
}
return highs;
};

document.getElementById('showHighs').onclick = function() {
var highs =
document.getElementById('todoList').getHighPriorityItems();
alert(highs.map(function(item){return
item.innerHTML;}).join('\n'));
return false;
};

</script>