W JavaScript, możesz rozszerzyć DOM?

Question

w JavaScripcie, można wydłużyć istniejących klas przy użyciu jego prototyp obiektu:

String.prototype.getFirstLetter = function() { 
    return this[0]; 
}; 

Czy to możliwe, aby skorzystać z tej metody, aby przedłużyć elementów DOM?

Answer 1

można rozszerzyć DOM za pomocą prototypu elementu. Jednak nie działa to w IE7 i wcześniejszych wersjach. Będziesz musiał rozszerzyć konkretny element, po jednym na raz. Robi to biblioteka Prototype. Polecam przejrzeć source, aby zobaczyć dokładnie, jak to się robi.

Answer 2

Znalazłem odpowiedź tak, jak pisałem pytanie, ale myślałem, że mimo to opublikuję informacje.

Obiekt, który należy rozszerzyć, to Element.prototype.

Element.prototype.getMyId = function() { 
    return this.id; 
}; 

Answer 3

Tak, można, ale zdecydowanie nie należy.

Jeśli zastąpisz coś, czego inna biblioteka spodziewa się być oryginalną lub inna biblioteka nadpisuje coś, czego oczekiwałeś .. chaos!

Najlepiej zachować kod w swoim własnym obszarze nazw/zasięgu.

Answer 4

Nie powinieneś bezpośrednio rozszerzać czegokolwiek (przez "cokolwiek" mam na myśli rodzime obiekty DOM) - to tylko doprowadzi do złych rzeczy. Dodatkowo ponowne rozszerzenie każdego nowego elementu (coś, co musiałbyś zrobić, aby obsługiwać IE), dodaje dodatkowe obciążenie.

Dlaczego nie przyjąć podejście jQuery i utworzyć otoki/konstruktora i rozszerzenia, które zamiast:

var myDOM = (function(){ 
    var myDOM = function(elems){ 
      return new MyDOMConstruct(elems); 
     }, 
     MyDOMConstruct = function(elems) { 
      this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems]; 
      return this; 
     }; 
    myDOM.fn = MyDOMConstruct.prototype = { 
     forEach : function(fn) { 
      var elems = this.collection; 
      for (var i = 0, l = elems.length; i < l; i++) { 
       fn(elems[i], i); 
      } 
      return this; 
     }, 
     addStyles : function(styles) { 
      var elems = this.collection; 
      for (var i = 0, l = elems.length; i < l; i++) { 
       for (var prop in styles) { 
        elems[i].style[prop] = styles[prop]; 
       } 
      } 
      return this; 
     } 
    }; 
    return myDOM; 
})(); 

Następnie można dodać swoje własne metody poprzez myDOM.fn ... I można go używać tak:

myDOM(document.getElementsByTagName('*')).forEach(function(elem){ 
    myDOM(elem).addStyles({ 
     color: 'red', 
     backgroundColor : 'blue' 
    }); 
});