problems with DOM

[Tim Bücker]

I want to save an object of an image in a variable.
I am doing this with the internet explorer with no problems using the following line:
oImage = node.childNodes(0).all["pic"]

Now I wanted to use the W3C-standard and thought I could get my object using this here:
oImage = node.childNodes(0).getElementById("pic")

The node variable is from an xsl file:
....
<div onclick="window.event.cancelBubble = true; clickOnNode(this);"
....

I don´t get it! I´ve tried a lot of variations and searched the net but I didn´t find anything.
Thanks for every little hint on this topic! Greetings,
Tim.

 

[Martin Honnen]

I want to save an object of an image in a variable.
I am doing this with the internet explorer with no problems using the following line:
oImage = node.childNodes(0).all["pic"]

Now I wanted to use the W3C-standard and thought I could get my object using this here:
oImage = node.childNodes(0).getElementById("pic")

Use
node.ownerDocument.getElementById("pic")

 

[Tim Bücker]

Thanks for the quick answer but unfortunately the problem is not solved.
It is still the same - ignoring the active node always the first one in the
document gets selected (I want to change icons for a menu whether they
are selected or not)!

Is more information needed? Any resources on the web concerning this
topic? More ideas? I am getting more and more desperate...

But thanks again for answering,
Tim.

I want to save an object of an image in a variable.
I am doing this with the internet explorer with no problems using the following line:
oImage = node.childNodes(0).all["pic"]

Now I wanted to use the W3C-standard and thought I could get my object using this here:
oImage = node.childNodes(0).getElementById("pic")

Use
node.ownerDocument.getElementById("pic")

 

[VK]

"DIV via DOM" doesn't expose getElementById() neither getElementByName()
methods, at least not in IE.

If you really want to keep your life as complicated as possible ;-) then
use something like:
myNode.childNodes(0).getElementsByTagName('IMG')[0].src = newSrc;

To spice it up, you actually can remove first the retrieved image node,
create a new one with another src attribute and insert it back.

Last stupid question: why not use the global document.images
collection? It's totally correct 3W-approved syntacs, if you are worried
about it.

 

[Lasse Reichstein Nielsen]

I want to save an object of an image in a variable.

I am doing this with the internet explorer with no problems using
the following line:

oImage = node.childNodes(0).all["pic"]

The "all" property is IE specific. You could use:
oImage = node.firstChild.getElementsByTagName("*")["pic"];
The getElementsByTagName("*") creates a collection equivalent to the
"all" collection.

I would just do
oImage = document.images["pic"];
If "pic" is the ID of the image, then it must be unique in the
document.

Now I wanted to use the W3C-standard and thought I could get my object using this here:
oImage = node.childNodes(0).getElementById("pic")

getElementById only exists on the document object. There is no need for
more than one, since Id's must be unique in the document.

If the node isn't from this document, then you can find the appropriate
document as: node.ownerDocument
(Same goes for document.images above).

The node variable is from an xsl file:
...
<div onclick="window.event.cancelBubble = true; clickOnNode(this);"

"window.event" is IE specific, and so is "cancelBubble".
In onclick attribute values, the variable "event" points directly to
the event (in other browsers it is a local variable, in IE it is global).

The W3C version would be:
<div onclick="event.stopPropagation();clickOnNode(this);">
Since IE doesn't support that, you'll have to do both:
<div onclick="if(event.stopPropagation){event.stopPropagation();}
else{event.cancelBubble = true;}; clickOnNode(this);">

/L

 

[Tim Bücker]

Thanks a lot for all the interesting information!
I will work myself through each of your proposals and see if they work in my case.
Unfortunately (for example) "pic" is not unique; as I use a xsl file like this:

<xsl:template match="node">
....
<img border="0" id="pic">
<xsl:attribute name="src">
<xsl:value-of select="testPic" />
</xsl:attribute>
</img>
....
</xsl:template>

But anyway thanks to everyone who tried to help me!
Thanks a lot.

Greetings,
Tim.

 

[Tim Bücker]

Unfortunately I am always getting an error message in the following line:
oImage = myNode.firstChild.getElementsByTagName("*")["pic"];
Although getElementsByTagName returns an object. So here is nothing wrong I think.

Event thread: onclick
Error:
name: TypeError
message: Statement on line 71: Expression did not evaluate to a function object: myNode.firstChild.getElementsByTagName

Any ideas? Again everything is working great using the IE.

Thanks again for answering,
Tim.

 

[Tim Bücker]

Using Opera getElementsByTagName does NOT return an object!
[ myNode.firstChild.getElementsByTagName("*") ]

 

[Lasse Reichstein Nielsen]

Using Opera getElementsByTagName does NOT return an object!
[ myNode.firstChild.getElementsByTagName("*") ]

Are you sure the first child is not a text node?
Remember, IE removes empty (all whitespace) text nodes from the document
tree, Mozilla and Opera doesn't.

Drop the ".firstChild", and it will probably work.

/L

 

[Tim Bücker]

Thanks a lot! That was the magic answer - at least my menu is now working on IE _and_ Opera. Unfortunately Netscape is still a
problem...

If I am honest, I did not really understand the thing with the text nodes.
Do you perhaps know a good internet resource about that kind of cross-browser compatibility?

Again - thanks a lot!
Greetings,
Tim.

Using Opera getElementsByTagName does NOT return an object!
[ myNode.firstChild.getElementsByTagName("*") ]

Are you sure the first child is not a text node?
Remember, IE removes empty (all whitespace) text nodes from the document
tree, Mozilla and Opera doesn't.

Drop the ".firstChild", and it will probably work.

/L

 

[Lasse Reichstein Nielsen]

(Please don't top post)

Thanks a lot! That was the magic answer - at least my menu is now
working on IE _and_ Opera. Unfortunately Netscape is still a
problem...

Do tell, what is the problem

If I am honest, I did not really understand the thing with the text
nodes. Do you perhaps know a good internet resource about that kind
of cross-browser compatibility?

Not really, no, sorry.

About the text nodes:

The DOM (Document Object Model) uses different kinds of DOM "Nodes"
(objects with some basic properties and methods) to represent
different parts of a document. There are, among others, Document
Nodes, Comment Nodes, Element Nodes and Text Nodes. The different
types have more specialized properties and methods than the
abstract Node class.

The code
<div>foo<span>bar</span>baz</div>
generates one Element Node for the div element. It has three child nodes:
- One text node containing the text "foo".
- One Element node for the span element. It has a text node as child,
containing "bar".
- One text node containing the text "baz".

The difference between browsers here is when two tags appear next to each other
with only whitespace between, e.g.:
<div>
<span>foo</span>
</div>

Between "<div>" and "<span>" is one newline and two spaces. In Mozilla
and Opera, that gives rise to a Text Node with those three characters.
IE doesn't generate Text Nodes for strings containing only whitespace.

Your problem was that getElementsByTagName is a method of Element Nodes,
not Text Nodes, and the first child element of your node was a text node
in Mozilla/Opera and an element node in IE.

/L

 

[Tim Bücker]

(Please don't top post)

Sorry for that!

Do tell, what is the problem

I think the problem is a bit hard to explain - that was the reason why I didn´t ask you.
But I´ll give it a try:

I am trying to develop a dynamic menu using xml for the data and xsl for the design.
As usual you have a + sign and a - sign in front of each node that has children.
Thanks to your help I have now managed to get it run on IE and Opera and the expansion
of nodes also works using Netscape 7 (the only version I am trying at the moment) the
BIG problem is that the collapsing is absolutely not working using NS! The main problem
at the moment is that clicking on a - sign not only all the children are disappearing but also
the parent node so that it is now possible to create a totally blank page clicking through the
menu.

My collapse function looks like this:

function collapse(myNode)
{
var i, oImage
myNode.getElementsByTagName('*')["pic"].src = myNode.getAttribute("pictureClosed");

for (i=0; i<myNode.childNodes.length; i++)
{
// to get rid of the empty text nodes
if (myNode.childNodes.style)
{
if (myNode.tagName == "DIV")
{
if (myNode.id != "root")
myNode.childNodes.style.display = "none"
collapse(myNode.childNodes)
}
}
}
myNode.setAttribute("open", "false");

/* // This code here works using IE and Opera (debug version)
for (i=0; i<myNode.childNodes.length; i++)
{
if (myNode.childNodes(i).tagName == "DIV")
{
if (myNode.id != "root")
myNode.childNodes(i).style.display = "none"
collapse(myNode.childNodes(i))
}
}
*/
}

I hope I could make myself clear at this time of day.
If you need more information I would love to send it to you ;-)

About the text nodes:

Thanks a lot for the information about text nodes!

Thank you for taking you time!
Greetings,
Tim.