eXtensible Image Replacement

[Dante]

I was trying to improve PPK's JIR script by using XML. I have this code:
function init()
{
var x = document.getElementsByTagName('replace');
var prefix = 'http://www.quirksmode.org/dom/pix/';
var suffix = '.gif';
for (var i=0;i<x.length;i++)
{
if (x.getAttribute('url'))
{
var y = replace.cloneNode(true);
y.replacedHeader = x;
outimage = prefix + x.getAttribute('url') + suffix;
outalt = x.firstChild.nodeValue;
var replace='<img src="'+outimage+'" alt="'+outalt+'">';
y.onload = function () {
this.replacedHeader.innerHTML=replace;
};
}
}
}
I'm sure there's plenty of things wrong with it that I missed...is there?

 

[Thomas 'PointedEars' Lahn]

I was trying to improve PPK's JIR script by using XML.

#define PPK
#define JIR

I have this code:
function init()
{
var x = document.getElementsByTagName('replace'); ^
var prefix = 'http://www.quirksmode.org/dom/pix/';
var suffix = '.gif';
for (var i=0;i<x.length;i++)

^
It is wise to check references before accessing the objects/properties
they refer to:

if (typeof document.getElementsByTagName != "function"
|| typeof document.getElementsByTagName != "object")
{
var x = document.getElementsByTagName('replace');
if (x)
{
...
}
}

While the first test may not be required (depending on the DOM of the
target UA), the second one is duty.

{
if (x.getAttribute('url'))

Do not use getAttribute(...) if you can avoid it, the so-called most
used browser (IE)'s implementation of the W3C-DOM is flawed on it
Use

if (x.url)

instead.

Also note that it is unwise not to give variables a talking name. To
know what `x' refers to, one must re-read the preceding statements.
Time is money.

{
var y = replace.cloneNode(true);
y.replacedHeader = x;

Again, you should check if the cloneNode(...) process succeeded:

if (y)

outimage = prefix + x.getAttribute('url') + suffix;

Again, drop getAttribute(...) if you can. Besides, is it intended
that `outimage'

outalt = x.firstChild.nodeValue;

and `outalt' are declared global? If not, use the `var' keyword.

var replace='<img src="'+outimage+'" alt="'+outalt+'">';
y.onload = function () {
this.replacedHeader.innerHTML=replace;

`innerHTML' is a proprietary property only available in the HTML DOM of
some UAs. Use standardized W3C-DOM properties and methods instead:

// Create the `img' element
var oImg = document.createElement("img");
if (oImg) // if that worked
{
// assign values to its properties
oImg.src = outimage;
oImg.alt = outalt;

// remove all child nodes from the later parent element
var o = this.replacedHeader;
while (o.childNodes.length > 0)
o.removeChild(o.firstChild);

// and append the `img' element as its child node
o.appendChild(oImg);
}

I'm sure there's plenty of things wrong with it that I missed...is there?

Yes, there is, for suitable values of `plenty' ;-)

Have a look in the specification before you continue:
http://www.w3.org/TR/DOM-Level-2-Core/


PointedEars

 

[Dante]

I forgot to mention:

The original plan was to use document.createElement. But due to
name-spacing difficulties I modified it. Would
document.createElement('html:img') work if the html namespace was
defined?

 

[Lasse Reichstein Nielsen]

The original plan was to use document.createElement. But due to
name-spacing difficulties I modified it. Would
document.createElement('html:img') work if the html namespace was
defined?

I have no idea. It doesn't say it should in the W3C DOM Core
specification.
However, it has
document.createElementNS(htmlNamespaceURI,"img")
If you application is HTMLonly, you don't need it, but otherwise
you should use the "NS" methods.

W3C DOM 2 Core: <URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html>

?L