如何對getElementById獲得的元素執行函數？

Question

使用jquery你可能對這樣的元素執行的方法：如果下面是試圖

$('#myElement').show(); 

它提出了一個TypeError: undefined is not a function錯誤：

document.getElementById('myElement').show(); 

展示（）函數的定義爲：

MyClass.prototype.show = function() { } 

如何在不使用jquery的情況下調用show（）函數？

Answer 1

document.getElementById('myElement')返回Element類型的對象。如果你想一個函數show添加到它，你可以做以下注意：不建議這樣做：

Element.prototype.show = function() { return 'I am called!' } 
document.getElementById('myElement').show(); // 'I am called!' 

你應該避免添加自定義方法，以DOM不惜一切代價的元素。很少有，如果有的話，這是一個很好的理由。

這是爲什麼不做到這一點的詳細信息：http://perfectionkills.com/whats-wrong-with-extending-the-dom/

如果您正在尋找複製jQuery的show功能，你可以做以下的功能：

var _$ = function(selector) { 

    var elem = document.querySelectorAll(selector); 
    var hasResults = elem.length > 0; 

    var _show = function() { 
     if (hasResults) { 
      for (var i=0,l=elem.length;i<l;i++) { 
       elem[i].style.display = "block"; 
      } 
     } 

     return this; 
    } 

    return { 
     show : _show 
    } 

} 

_$('#foo').show(); 

或者，使用document.getElementById：

document.getElementById('myElement').style.display = "block";