Element.prototype

**Tabo** · 06-22-2008, 11:34 AM

How can I get it to work in internet explorer without using the horrible htc files?

**jscheuer1** · 06-22-2008, 02:02 PM

What's so horrible about htc files? Anyways, I've always just used functions for manipulating elements. The prototype model really has little to offer over the function model other than a certain elegance in the way that the code looks. I would, of course use it for elements, if it were cross browser, which it is not.

You can still do some fun things with prototype String and Array - those work in most browsers:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
Array.prototype.hide = function(v){
for (var i = this.length - 1; i > -1; --i)
if (typeof this[i] == 'object' && this[0].tagName)
this[i].style.visibility = v;
}
String.prototype.arEl = function(){
return [document.getElementById(this)];
}
</script>
</head>
<body>
<div id="test">
Hi
</div>
<input type="button" value="Hide" onclick="'test'.arEl().hide('hidden');"> 
<input type="button" value="Show" onclick="'test'.arEl().hide('');">
</body>
</html>

**Twey** · 06-22-2008, 06:05 PM

I don't believe you can, but the common workaround (used in libraries like Prototype or jQuery) is to use an accessor function to get elements that adds the necessary properties to the element before returning it.

**Trinithis** · 06-22-2008, 06:33 PM

String.prototype.arEl = function(){ return [document.getElementById(this)]; }

Never thought of this. Cool.

**jscheuer1** · 06-22-2008, 06:55 PM

Originally Posted by Trinithis

Never thought of this. Cool.

It could be much more powerful and/or specific, consider this mod (arEls):

Code:

String.prototype.arEls = function(){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
a[i] = document.getElementById(a[i]);
return a;
}

Which will return the same as the original, but can also return an array of multiple elements by their id's:

Code:

'test menu1 button2'.arEls()

**Tabo** · 06-22-2008, 07:03 PM

Thanks for the help jscheuer1.

Originally Posted by Twey

I don't believe you can, but the common workaround (used in libraries like Prototype or jQuery) is to use an accessor function to get elements that adds the necessary properties to the element before returning it.

I was trying to imitate the features of prototype, as it saves lines and lines of code. I've made my own personal js framework which builds powerful widgets with just a few lines of code, however I have one problem and it is with Element.prototype.

In the same way prototype uses $("id").setStyle();

I would like to do $("whatever").buildWidget(); etc.

rather than $("whatever") = new Widget("more","parameters","needed","this","way")

Before posting I tried adding elements to an array every time my $("id") function is called, and doing things that way with no success.

Any idea how I can "use an accessor function"? I've never heard of it.

**jscheuer1** · 06-22-2008, 07:09 PM

You can use the Array and/or String prototypes and bend them to your needs, ex:

Code:

String.prototype.widget=function(){
var el = document.getElementById(this);
do whatever to el here;
}

Usage:

Code:

'id'.widget();

**Tabo** · 06-22-2008, 07:15 PM

Originally Posted by jscheuer1

You can use the Array and/or String prototypes and bend them to your needs, ex:

Code:

String.prototype.widget=function(){
var el = document.getElementById(this);
do whatever to el here;
}

Usage:

Code:

'id'.widget();

I know I'm being fussy, but is there no way to use $("whatever"); (where $() returns document.get...

**Trinithis** · 06-22-2008, 07:16 PM

Things like Prototype's $ function are accessor functions. They grab things. In addition, the $ function adds functionality to the things it grabs.

Code:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

See the highlighted code? That is where it extends the data. In this way, you can transparently add methods to elements in a way similar to that of Element.prototype. All you have to do is guarantee that you use $ when you grab an element (directly or indirectly).

BTW, what exactly is a widget?

**Tabo** · 06-22-2008, 07:20 PM

Originally Posted by Trinithis

widget?

<input type="text" id="input" ... />

<script>
lEvents.onwhenready=function(){
$("input").widget("spinbox","...")
}
</script>

Changes existing things to make them better... I don't know if it's a widget but I call them that

Thread: Element.prototype

Thread Tools

Search Thread

Element.prototype

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions