如何在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

像這樣，元素繼承自Element

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

由於“瀏覽器”，它不推薦使用 - 更好的方法是使用某種包含對元素的引用的包裝對象，並且具有擴展方法，這樣的元素可以被各種瀏覽器“按原樣”保存，而且你還可以參考它們。 它沒有以前那么糟糕

Answer 2

您正在考慮分別添加到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>