How to code document.querySelector('.class').doSomeThing() with native JavaScript

Question

How to code document.querySelector('.class').doSomeThing() with native JavaScript like jQuery methode

exp: $('.class').doSomeThing();

http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript — Linek, Apr 17 '14 at 14:05
If you want to mess with host objects, you should check out the original [*prototype.js*](http://prototypejs.org) (the one that used to modify DOM object prototypes) and also [*What's wrong with extending the DOM*](http://perfectionkills.com/whats-wrong-with-extending-the-dom/). That's not to dissuade you from having a go, just to open your eyes to the pitfalls. — RobG, Apr 17 '14 at 23:23

score 1 · Answer 1 · answered Apr 17 '14 at 14:15

1

Element.protototype.doSomething = function( passedFunction ){        
    passedFunction.call( this );

    return this;
}

To work with querySelectorAll as well, you would need to assign the function to NodeList.prototype.doSomething too.

answered Apr 17 '14 at 14:15

Barney

16,181
5
62
76

Amit Joki · Answer 2 · 2014-04-17T14:17:34.067

0

Implement a prototype of the Element object.

Element.prototype.doSomething = function(){
  // do something
}

edited Apr 17 '14 at 14:17

answered Apr 17 '14 at 14:06

Amit Joki

58,320
7
77
95

Maybe better to add it to the `element` and/or `nodeList` prototypes, not all objects? – Barmar Apr 17 '14 at 14:14
This way you add the doSomething to all objects inside your dom – Guy Dafny Apr 17 '14 at 14:15
But it also adds the method to non-DOM objects. – Barmar Apr 17 '14 at 14:16
Only if the host implements prototype inheritance for DOM objects and makes appropriate prototypes available and modifiable. – RobG Apr 17 '14 at 14:16

score 0 · Answer 3 · answered Apr 17 '14 at 14:11

If I understood right:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bla! </title>
        <script type='text/javascript'>
          function SayB1(data) {
            alert (data);
          }
          function Init() {
              var buttons = document.getElementsByClassName('button1');
              for (var i in buttons) {
                  buttons[i].onclick = function() {
                      SayB1(this.innerHTML);
                  };
              }
          }
        </script>
    </head>
    <body onload='Init();'>
        <button class='button1'> B1 -1 </button>
        <button class='button1'> B1 -2 </button>
        <button class='button2'> B2 -1 </button>
        <button class='button2'> B2 -2 </button>
        <button class='button1'> B1 -3 </button>
    </body>
</html>

I think he's asking how he can write code without having to write a loop, the way you can with jQuery. — Barmar, Apr 17 '14 at 14:13

score 0 · Answer 4 · answered Apr 17 '14 at 14:25

There is multiple way of doing a jQuery like plugin. Here one way i like :

(function(scope, name, undefined){
    scope[name] = function(selector){
        return new Plugin(selector);
    }

    function Plugin(selector){
        buildArrayLike(this, selector)
    }
    function buildArrayLike(obj, selector){
        var el = document.querySelectorAll(selector);
        for(var c = 0; c < el.length; c++) obj[c] = el[c];
        obj.length = el.length;
    }

    Plugin.prototype = {
        constructor : Plugin,
        method : function(){
            alert(this.length);
            return this; //For chaining;
        }
    }
})(window, '$')



console.log($('div'));

$('div').method();

Fiddle : http://jsfiddle.net/Rw5BJ/

How to code document.querySelector('.class').doSomeThing() with native JavaScript

4 Answers4