如何在DOM元素添加的擴展方法

Question

我的元素，我得到這樣

var elem = document.getElementById('my-element'); 

或

var elems = document.querySelector('.all-elements-with-this-class'); 

我想要做的就是這個

elem.myExtensionMethod(); 

或

elems.myExtensionMethod(); 

我的擴展方法可能，正如我想象，會以這種方式實現

var myExtensionMethod = function() { 
     this.classList.add('add-this-class-to-all'); 
    } 

我怎樣做在JavaScript本擴展DOM元素？

謝謝。

Answer 1

您正在尋找分別添加到HTMLElement和NodeList原型。

例如

HTMLElement.prototype.myExtensionMethod = function() { 
 
    this.classList.add('add-this-class-to-all'); 
 
} 
 
NodeList.prototype.myExtensionMethod = function() { 
 
    this.forEach(el => el.myExtensionMethod()) 
 
} 
 

 
document.getElementById('p1').myExtensionMethod() 
 
document.querySelectorAll('li').myExtensionMethod();

.add-this-class-to-all { 
 
    background-color: red; 
 
    color: white; 
 
} 
 
.add-this-class-to-all:after { 
 
    content: " but now it's red!" 
 
}

<p id="p1">This is a plain old paragraph</p> 
 

 
<ul> 
 
<li>List #1</li> 
 
<li>List #2</li> 
 
</ul>

Answer 2

與此類似，元素從Element

Element.prototype.myExtensionMethod = function() { 
    console.log("myExtensionMethod!", this); 
}; 

它繼承不推薦，因爲「瀏覽器」 - 一個更好的方法是使用某種類型的包裝保存到你的元素的引用的對象，並具有擴展方法，這樣可以使各種瀏覽器保持「按原樣」的元素，而且你仍然可以引用它們。它不像以前那樣糟糕