在 DOM 元素上调用自定义方法答案

【问题标题】：Invoke a custom method on a DOM element在 DOM 元素上调用自定义方法
【发布时间】：2015-06-18 03:56:40
【问题描述】：

我想在 DOM 元素上调用自定义方法

像这样：

<div id="MyObject">
    <!-- some elements -->
</div>

<script>
    function doSomething() {
        // do something with input DOM element
    }

    $("MyObject").doSomething();
</script>

我该如何解决这个问题？有没有必要使用jQuery？

【问题讨论】：

它是否绑定到特定事件，如click、hover 等？或者您只是希望它成为函数中的可访问值？
不，我想调用输入 DOM 元素上的每个自定义函数
这样做的原因是什么？

标签： javascript jquery dom methods invoke

【解决方案1】：

没有 jQuery，你可以做类似的事情

if (typeof $ != 'function') {
  //create a function $ which will return the element with said id
  window.$ = function(id) {
    return document.getElementById(id);
  }
}

//Add a method to the Elemen prototype so you can call it on any element object
Element.prototype.doSomething = function() {
  this.innerHTML = 'hi from inner';
}

$('MyObject').doSomething();

<div id="MyObject">
  <!-- some elements -->
</div>

【讨论】：

【解决方案2】：

您不需要使用 jQuery。您可以使用document.getElementById('MyObject') 获取对 DOM 节点的引用。

要在其上运行 doSomething 函数，您需要向其添加节点参数，如下所示：

function doSomething(input) {
  // do something with input DOM element
}

doSomething(document.getElementById('MyObject'));

要将其链接起来，您需要添加到所有 DOM 节点实现的 Element 接口（重读，我的意思是继承自）。如果你走那条路，你可以这样做：

Element.prototype.doSomething = function() {
  alert(this);
}

document.getElementById('MyObject').doSomething();

JSFiddle：http://jsfiddle.net/6Lyb4b9p/

MDN：getElementById

【讨论】：

我不想将 DOM 元素的名称传递给函数，我想在每个任意 DOM 元素上调用该函数。
@EmadArmoun 您的意思是要定义一个以通用方式绑定到每个 DOM 元素的函数吗？
我以前从未使用过原型修改，但我真的想让我的元素修改函数链式化。我阅读了上百万篇不同的帖子，但答案并不完全是金钱，直到我终于找到了如何做到这一点的超级简单的解释。

【解决方案3】：

我自己找到了答案。

我可以这样练习：

<script>
    (function ($) {
        $.fn.doSomething = function () {
            // do something like this
            $(this).append("Hello Object");
        }
    } (jQuery));

    $("#MyDOMElement").doSomething();
</script>

【讨论】：