problems with DOM

Discussion in 'Javascript' started by Tim Bücker, Nov 24, 2003.

  1. Tim Bücker

    Tim Bücker Guest

    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.
    Tim Bücker, Nov 24, 2003
    #1
    1. Advertising

  2. Tim Bücker wrote:

    > 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")
    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Nov 24, 2003
    #2
    1. Advertising

  3. Tim Bücker

    Tim Bücker Guest

    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.

    "Martin Honnen" <> schrieb im Newsbeitrag news:3fc235a3$...
    >
    >
    > Tim Bücker wrote:
    >
    > > 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")
    > --
    >
    > Martin Honnen
    > http://JavaScript.FAQTs.com/
    >
    Tim Bücker, Nov 24, 2003
    #3
  4. Tim Bücker

    VK Guest

    "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.
    VK, Nov 24, 2003
    #4
  5. "Tim Bücker" <> writes:

    > 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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Nov 24, 2003
    #5
  6. Tim Bücker

    Tim Bücker Guest

    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, Nov 25, 2003
    #6
  7. Tim Bücker

    Tim Bücker Guest

    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, Nov 25, 2003
    #7
  8. Tim Bücker

    Tim Bücker Guest

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

    "Tim Bücker" <> schrieb im Newsbeitrag news:bpvs20$15sv$-koblenz.de...
    > 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, Nov 25, 2003
    #8
  9. "Tim Bücker" <> writes:

    > 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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Nov 25, 2003
    #9
  10. Tim Bücker

    Tim Bücker Guest

    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.

    "Lasse Reichstein Nielsen" <> schrieb im Newsbeitrag news:...
    > "Tim Bücker" <> writes:
    >
    > > 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 -
    > DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    > 'Faith without judgement merely degrades the spirit divine.'
    Tim Bücker, Nov 25, 2003
    #10
  11. "Tim Bücker" <> writes:

    (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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Nov 25, 2003
    #11
  12. Tim Bücker

    Tim Bücker Guest

    "Lasse Reichstein Nielsen" <> wrote:
    > (Please don't top post)


    Sorry for that!

    > > 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 :)


    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.
    Tim Bücker, Nov 26, 2003
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thorsten Meininger
    Replies:
    0
    Views:
    434
    Thorsten Meininger
    Jul 28, 2004
  2. Thorsten Meininger
    Replies:
    0
    Views:
    498
    Thorsten Meininger
    Jul 28, 2004
  3. mike
    Replies:
    1
    Views:
    1,112
    Martin Honnen
    Nov 20, 2004
  4. Replies:
    0
    Views:
    538
  5. Replies:
    3
    Views:
    523
    Stefan Behnel
    Aug 3, 2007
Loading...

Share This Page