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);
};

不建议使用＆＃34;浏览器＆＃34; - 更好的方法是使用某种包装对象来保存对元素的引用，并使用扩展方法，这样就可以保留元素＆＃34;＆＃34;通过各种浏览器，你仍然可以参考它们。它没有以前那么糟糕

Answer 2

您正在考虑分别添加HTMLElement和NodeList原型。

例如

＆＃13;

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();

＆＃13;

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

＆＃13;

<p id="p1">This is a plain old paragraph</p>

<ul>
<li>List #1</li>
<li>List #2</li>
</ul>

＆＃13;

如何在dom元素中添加扩展方法

2 个答案: