Extending DOM but NOT element prototype.. possible?

Question

I would like to extend some group or class if you want in DOM but I dont want to have all lements extended. It is possible?

for example:

document.getElementsByClass('extended').myMethod(); // working

BUT

document.getElementById('elementNotExtendedClass').myMethod(); // shouldnt be working

Because I dont want to mess all elements, just the selected ones. Maybe it should be done somehow by creating my own version of createElement() method in document. For example document.CreateMyElement().

Or any ideas? Thanks

Edit June 06: I am looking for solution where prototype chain retains working, so I can change some shared methods and properties at once.

@AlexanderPavlov: My goal is to make simple wysiwyg features for webpage. I mean that editor of the page just start editable mode and lot of stuff is editable. So I think that extend some elements with my methods and properties could be the best way how to achieve this. — Luckylooke, Jun 03 '12 at 07:42

canon · Answer 1 · 2012-06-01T20:31:11.777

2

Why not add the method to each instance (fiddle)

function test() {
    this.style.fontWeight = "bold";
}

window.onload = function(){
    // add your method to existing elements with class 'extended'
    var elements = document.getElementsByClassName('extended');
    for (var i = 0; i < elements.length; i++){        
        elements[i].test = test;
    }
    // just to visualize what happened...
    var spans = document.getElementsByTagName("span");
    alert("span[0].test: " + typeof spans[0].test
          +"\nspan[1].test: " + typeof spans[1].test); 
    spans[0].test();
};

edited Jun 01 '12 at 20:31

answered Jun 01 '12 at 20:16

canon

40,609
10
73
97

This works, but I dont want to loose prototype chain, so if I would need to change test function, I have to distribute this function for all elements with "extended" class. I was looking for solution where prototype chain is working, so I can change some shared methods and properties at once. Thanks – Luckylooke Jun 03 '12 at 09:19

Ja͢ck · Answer 2 · 2012-06-04T13:40:02.987

0

Update

This approach would define a global interface onto which you define the extension methods. Having them inside an interface like this allows you to change the method without having to reapply it.

MyExtendedInterface = {
    test: function() {
        // this points to the DOM element itself
        console.log(this);
    }
}

var elements = document.getElementsByClassName('extended');
for (var i = 0, el; el = elements[i]; ++i) {
    for (var j in MyExtendedInterface) {
        // bind the interface methods to the current element
        el[j] = MyExtendedInterface[j].bind(el);
    }
}

The .bind() is a recent addition to JavaScript; see also: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

edited Jun 04 '12 at 13:40

answered Jun 03 '12 at 10:18

Ja͢ck

170,779
38
263
309

@Luckylooke I've updated the answer, hope this is something you'd like more :) – Ja͢ck Jun 04 '12 at 13:40
I have to do some testing with your snippet first. In the meantime I have found interesting partial answer [here](http://stackoverflow.com/questions/1489738/how-to-inherit-from-the-dom-element-class) And most interesting answer is from kangax and he was writing about wrapper or decorator patterns at the end. But I am curious how this patterns should be used in the case. – Luckylooke Jun 04 '12 at 18:25

Extending DOM but NOT element prototype.. possible?

2 Answers2