How to use prototype for custom methods and object manipulation

Question

Honestly, I am trying to understand JavaScript prototypes and I'm not making much progress. I am not exactly sure how to explain what I am trying to do, except to say that in part my end goal is to learn how to traverse the DOM similar to jQuery and to add custom methods to manipulate particular elements being accessed.

EDIT : The code below has been updated to reflect concepts I have learned from the answers received so far, and to show where those fall short of what I am looking to accomplish.

function A(id) {
    "use strict";
    this.elem = document.getElementById(id);
}
A.prototype.insert = function (text) {
    "use strict";
    this.elem.innerHTML = text;
};

var $A = function (id) {
    "use strict";
    return new A(id);
};

var $B = function (id) {
    "use strict";
    return document.getElementById(id);
};

function init() {
    "use strict";
    $A('para1').insert('text goes here'); //this works
    $A('para1').innerHTML = 'text goes here';  //this does not work
    console.log($A('para1')); //returns the object A from which $A was constructed
    console.log($B('para1')); //returns the dom element... this is what I want

    /*I want to have $A('para1').insert(''); work and $A('para1').innerHTML = '';
      work the same way that $B('para1').innerHTML = ''; works and still be able
      to add additional properties and methods down the road that will be able
      act directly on the DOM element that is contained as $A(id) while also
      being able to use the properties and methods already available within
      JavaScript*/
}
window.onload = init;

Where possible please add an explanation of why your code works and why you believe it is the best possible method for accomplishing this.

Note: The whole purpose of my inquiry is to learn this on my own... please do not suggest using jQuery, it defeats the purpose.

yngccc · Accepted Answer · 2012-08-31 02:59:23Z

1

var $ = function(id) {  
    return new My_jquery(id);  
}  

function My_jquery(id) { 
    this.elem = document.getElementById(id);
}

My_jquery.prototype = {
   insert : function(text) { this.elem.innerHtml = text; return this;}
}

$('para1').insert('hello world').insert('chaining works too');

add any method u want to operate on elem in My_jquery.prototype

answered Aug 31, 2012 at 2:59

yngccc

5,7042 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

person0 Over a year ago

I have been fiddling around with this code and the problem is that when I leave it the way you have written it then: $('para1').innerHTML = 'this works'; //Does not work anymore wouldn't you want to maintain accessibility to all standard methods?

yngccc Over a year ago

you will need to write a html method in the prototype, like in jQuery.

RobG Over a year ago

@yngum—jQuery doesn't work that way either, you'd need to do $('#foo')[0].innerHTML`.

person0 Over a year ago

yeah I was trying to find a way around this, but I suppose that's what I have to do.

RobG · Accepted Answer · 2012-08-31 03:12:34Z

1

You can use a scheme like the following:

function $(id) {
  return new DOMNode(id);
}

function DOMNode(id) {
  this.element = document.getElementById(id);
}

DOMNode.prototype.insert = function(value) {

  if (value) {

    // If value is a string, assume its markup
    if (typeof value == 'string') {
      this.element.innerHTML = value;

    // Otherwise assume it's an object
    } else {

      // If it's a DOM object
      if (typeof value.nodeName == 'string') {
        this.element.appendChild(value);

      // If it's a DOMNode object
      } else if (this.constructor == DOMNode) {
        this.element.appendChild(value.element);
      }
    }
  } // If all fails, do nothing
}

$('id').insert('foo bar');

Some play stuff:

<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>

<script>
// insert (replace content with) string, may or may not be HTML
$('d0').insert('<b>foo bar</b>');

// insert DOMNode object
$('d0').insert($('d1'));

// Insert DOM element
$('d0').insert(document.getElementById('d2'));

</script>

You may find it useful to study how MyLibrary works, it has some very good practices and patterns.

edited Aug 31, 2012 at 3:12

answered Aug 31, 2012 at 3:04

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

person0 Over a year ago

See comment on @yngum 's answer, the same applies to yours.

person0 · Accepted Answer · 2012-09-01 13:45:25Z

1

Try this.

var getDOM= function(id) {
  this.element= document.getElementById(id);
}

getDOM.prototype.insert= function(content) {
  this.element.innerHTML= content;
}

var $= function(id) {
  return new getDOM(id);
};

$('id').insert('Hello World!'); // can now insert 'Hello World!' into document.getElementById('id')

edited Sep 1, 2012 at 13:45

person0

1,3982 gold badges15 silver badges22 bronze badges

answered Aug 31, 2012 at 2:27

Christian Ezeani

3501 silver badge7 bronze badges

2 Comments

RobG Over a year ago

Upvotes for non–working code? Note that objects inherit from their constructor's prototype, not their own. $ doesn't have an insert method, so the above throws a type error. You need to remove the return from the $ function, then do: (new $('id')).insert('Hello World!');.

person0 Over a year ago

See comment on @yngum 's answer, the same applies to yours.

Collectives™ on Stack Overflow

How to use prototype for custom methods and object manipulation

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related