Invoke a custom method on a DOM element

Question

I want to invoke a custom method on a DOM element

like this :

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

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

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

How can I develop this problem? Is it necessary to use jQuery or not?

Answer 1

You do not need to use jQuery. You can use document.getElementById('MyObject') to get a reference to the DOM node.

To run your doSomething function on it, you would need to add a node parameter to it something like this:

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

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

To have it chained, you would need to add to the Element interface which all DOM nodes implement (rereading, I meant inherit from). If you go that way, you could do:

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

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

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

MDN: getElementById