如何在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); 
}; 

它继承不推荐，因为“浏览器” - 一个更好的方法是使用某种类型的包装保存到你的元素的引用的对象，并具有扩展方法，这样可以使各种浏览器保持“按原样”的元素，而且你仍然可以引用它们。它不像以前那样糟糕