CODEWITHSUNDEEP
javascriptfirefoxdomtostring
fon60
fon60

Reputation: 474

HTMLElement.toString() only works in Chrome

I have found an error in FireFox and Opera.(I'm running Debian Whezee, Firefox 9.0.1, Opera 11.60, Chrome 16.0.912.63) When you type something like this:

var a = document.createElement('a')
a.toString = function(){ return "Hello" }
alert(a+" World");

In Chrome you will get alert box with "Hello World" as you expect, but in firefox and opera (don't know about IE) you get something like this "[object HTMLElement] World"

What I've tried to solve this:

Object.prototype.toString = function(){ return "Hello" };
Function.prototype.toString = function(){ return "Hello" };

It doesn't work Because DOM elements are not Object (don't inherits from Object and therefor Function) and even this didn't help:

HTMLElement.prototype.toString = function(){ return "Hello" };
Element.prototype.toString = function(){ return "Hello" };
Node.prototype.toString = function(){ return "Hello" };

Because HTMLElement, Element, Node are all interfaces and not functions.

Now my question is where to report this mistake? Can someone help me with this?

//Edit

This is my original toString function:

var a = document.createElement('a');
a.toString = function(){
    var tmp=document.createElement('div');
    tmp.appendChild(this);
    return tmp.innerHTML;
}

As you can see this is alternative to outerHTML and I need this as a default behavior in following line

document.getElemntById('someID').innerHTML += "click this link:"+a;

The result should be like this:

<div id='someID'>click this link:<a></a></div>

Upvotes: 1

Views: 1088

Answers (3)

bobince
bobince

Reputation: 536765

Array object has toString that can be overwritten, but why DOM elements don't have this

An Array is a native JavaScript object. The ECMAScript standard lays down the requirements of how JS objects work, including the ability to hack a different toString into the prototype.

However the DOM objects are not specified anywhere to be native-JS objects or to adhere to the general rules of behaviour for JS objects. They are permitted to be what the standard calls ‘host objects’, which are much less well-specified.

Hacking their prototypes is very unreliable and not at all a good idea. One JS library, prototype.js, tried, and the results were messy.

Please let Node inherits from Object. Please

Sorry, Stack Overflow has no authority to require Node to be a native JavaScript object!

Until you can persuade all the browser vendors to standardise on native JS objects for the DOM, you will have to use an external function Node_getOuterHTML(node) { ... } and call it explicitly, "click this link:"+Node_getOuterHTML(a).

Although, it would generally be better to append the node you created to the document directly rather than send it through the DOM->HTML-markup->DOM serialise-and-parse cycle it's undergoing at the moment with innerHTML.

Upvotes: 0

Mondo
Mondo

Reputation: 327

Anytime you are trying to change the default/native behavior for your project; it's almost always a bad idea. I guess I might suggest:

var aa = document.createElement('a');
document.body.appendChild(aa);
var nodeList = document.getElementsByClassName('*');
for (var i = 0, len = nodeList.length; i < len; i ++) {
    nodeList[i].myCustomFunction = toStringOverride;
}
function toStringOverride() {
    return "Hello ";
}

alert(aa.myCustomFunction() + " World");

Upvotes: 0

Adam Rackis
Adam Rackis

Reputation: 83376

I don't think there's any place to report this since calling toString on dom elements is not standard behavior. To get the html content from an element you're supposed to use innerHTML, and to get just the text content, textContent (or innerText for older IE browsers)

Upvotes: 1

Related Questions