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

Question

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

像这样 ：

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

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

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

我怎样才能发展这个问题？是否有必要使用jQuery？

Answer 1

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

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

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

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

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

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

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

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

MDN：getElementById