childnode acess problem?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Sergio del Amo Caballero
    #1

    childnode acess problem?

    Hi,
    I have a structure like this in my xhtml 1.0 file.
    <body>
    <div>
    <a>
    <img ... id="f1" />
    <span>....</span><br/>
    <span>....</span>
    </a>
    ---> <div>
    <img />
    <span>....</span><br/>
    <span>....</span>
    </div>
    ---> <div>
    <img />
    <span>....</span><br/>
    <span>....</span>
    </div>
    </div>
    </body>

    I want to acces the div blocks with the arrows from a java script. I use
    the javas script object reference elment node. When somebody clicks on
    the image with id f1, i want to make invisible the div elements with arrows.
    I try to write this:

    function make_visible(id _img){
    document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[2].style.display= "none";
    document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[3].style.display= "none";
    }
    but it does not work.

    If i write :
    document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[1].style.display= "none";
    after clicking the <a> block gets invisible. The next child will be the
    div element. Isn't it?
    I do not understand why it does not work, can anybody help me?

    Tags: None
    • Martin Honnen
      #2
      Re: childnode acess problem?



      Sergio del Amo Caballero wrote:
      [color=blue]
      > I have a structure like this in my xhtml 1.0 file.
      > <body>
      > <div>
      > <a>
      > <img ... id="f1" />
      > <span>....</span><br/>
      > <span>....</span>
      > </a>
      > ---> <div>
      > <img />
      > <span>....</span><br/>
      > <span>....</span>
      > </div>
      > ---> <div>
      > <img />
      > <span>....</span><br/>
      > <span>....</span>
      > </div>
      > </div>
      > </body>
      >
      > I want to acces the div blocks with the arrows from a java script. I use
      > the javas script object reference elment node. When somebody clicks on
      > the image with id f1, i want to make invisible the div elements with
      > arrows.
      > I try to write this:
      >
      > function make_visible(id _img){
      > document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[2].style.display= "none";
      >
      > document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[3].style.display= "none";
      >
      > }
      > but it does not work.
      >
      > If i write :
      > document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[1].style.display= "none";
      >
      > after clicking the <a> block gets invisible. The next child will be the
      > div element. Isn't it?
      > I do not understand why it does not work, can anybody help me?[/color]

      Don't rely on childNodes[index] to be an element node, in Mozilla's DOM
      and in Opera 7's DOM the white space text nodes between element nodes
      are modelled in the DOM while they are not in IE/Win therefore cross
      browser code using childNodes[index] to expect a certain element doesn't
      work. Instead use getElementsByTa gName('tagname' ) and index that
      collection, as long as you aware of nested elements appearing in there
      too your code will work cross browser.


      --

      Martin Honnen
      Attention Required! | Cloudflare
      http://JavaScript.FAQTs.com/


        Comment

        • DU
          #3
          Re: childnode acess problem?

          Sergio del Amo Caballero wrote:[color=blue]
          > Hi,
          > I have a structure like this in my xhtml 1.0 file.
          > <body>
          > <div>
          > <a>
          > <img ... id="f1" />
          > <span>....</span><br/>
          > <span>....</span>
          > </a>
          > ---> <div>
          > <img />
          > <span>....</span><br/>
          > <span>....</span>
          > </div>
          > ---> <div>
          > <img />
          > <span>....</span><br/>
          > <span>....</span>
          > </div>
          > </div>
          > </body>
          >
          > I want to acces the div blocks with the arrows from a java script. I use
          > the javas script object reference elment node. When somebody clicks on
          > the image with id f1, i want to make invisible the div elements with
          > arrows.
          > I try to write this:
          >
          > function make_visible(id _img){
          > document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[2].style.display= "none";
          >
          > document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[3].style.display= "none";
          >
          > }
          > but it does not work.
          >
          > If i write :
          > document.getEle mentById(id_img ).parentNode.pa rentNode.childN odes[1].style.display= "none";
          >
          > after clicking the <a> block gets invisible. The next child will be the
          > div element. Isn't it?
          > I do not understand why it does not work, can anybody help me?
          >[/color]

          I'm just adding a few notes to what Martin replied to you.

          Whitespace in the DOM:
          "The presence of whitespace in the DOM can make manipulation of the
          content tree difficult in unforseen ways. In Mozilla, all whitespace in
          the text content of the original document is represented in the DOM (...)"
          Page not found | MDN
          http://www.mozilla.org/docs/dom/technote/whitespace/
          The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.


          There are a number of ways to work around this Mozilla difficulty.
          One would be to access the targeted node in a different manner. Here,
          your instruction needs to travel 4 different node in the document tree.
          So, even if the white space issue was not a problem, the code needed
          would still involve a rather long DOM-Tree path. I personally would
          examine this issue.
          Second alternative would be to remove all white spaces involved. The
          code used would work without adjustement for Mozilla-based browsers.
          Also, removing white spaces makes the source document a bit faster to
          parse and to render.


          DU
          --
          Javascript and Browser bugs:
          http://www10.brinkster.com/doctorunclear/

          - Resources, help and tips for Netscape 7.x users and Composer
          - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
          http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html


            Comment

            Previous template Next
            Working...