Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2003
    Location
    paderborn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unexpected result when accessing DOM attributes using nested DIVs

    When using nest DIVs or SPANs to call a javascript function to display the node.firstChild.data, the function is called more than once and is called for every node right back to the start of the first DIV. If I replace the DIVs with nested P tags this does not occur. Anyone have any idea?


    <html>
    <head>
    <title>Unexpected Result</title>
    <style type="text/css">
    <!--
    .item {

    border:1px solid #DDDDDD;
    padding:5px;
    margin:5px 5px 0px 15px;
    display:block;
    cursorointer;
    }
    //-->
    </style>


    <SCRIPT LANGUAGE="JavaScript">
    <!--

    function checkitem(node){

    alert("firstChild.data : " + node.firstChild.data);

    }


    //-->
    </script>
    </head>

    <body>

    <div onclick="checkitem(this)" class="item">Document Root
    <div onclick="checkitem(this)" class="item">Chapter 1
    <div onclick="checkitem(this)" class="item">Section 1.1
    </div>
    <div onclick="checkitem(this)" class="item">Section 1.2
    </div>
    </div>
    </div>

    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Jun 2003
    Location
    paderborn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Just as a follow up

    This occurs with both IE6 and mozilla 1.4. If a taged object is placed within the nested divs this does not occur and the javascript function is executed once.

    <div class="item">
    <span onclick="checkitem(this)">Section 1.1</span>
    </div>

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    First of all - p can't nest. p only allows inline elements. I believe that is the reason for it not happening there. If you want to only trigger the event on one of the elements, stop the bubbling - that should do it.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    New to the CF scene
    Join Date
    Jun 2003
    Location
    paderborn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thankyou I was just looking for the term

    I was just not sure what the term was called that caused it. I can think of quite a few positive uses for bubbling. I did not see it as a problem. I realize that breaking the bubble prevents or I could use the events preventDefault method. Thankyou for the prompt reply. It is actually documented.

    http://www.w3.org/TR/DOM-Level-2-Eve...-flow-bubbling

    The reason why I started with bubbling was to demonstrate how to build a tree style structure without resorting to tables:

    http://www.mywebstuff.com/01_dhtml/dht_p02_06.html

    Thanks again..
    Last edited by phillhw; 06-07-2003 at 01:16 PM.

  • #5
    New to the CF scene
    Join Date
    Jun 2003
    Location
    paderborn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    As to nesting p.

    It is true that Ps cannot be nested and this was probably a bad example. Although the layout using Ps cannot nest, I can still physically nest Ps in each other within the source code. DOM build its structure from the source code.

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, you have a very important difference between HTML4 and XHTML here. Have a look at this code:
    Code:
    Grandparent
    <p>Parent
    <p>Child
    <p>Grandchild
    </p>
    Child
    </p>
    Parent
    </p>
    Grandparent
    This is invalid, of course, but here's how an XML or XHTML parser would parse it:
    >#text:Grandparent
    >p
    >p>#text:Parent
    >p>p
    >p>p>#text:Child
    >p>p>p
    >p>p>p>#text:Grandchild
    >p>p>/p
    >p>p>#text:Child
    >p>/p
    >p>#text:Parent
    >/p
    >#text:Grandparent


    And here is how an SGML/HTML parser would parse it:
    >#text:Grandparent
    >p
    >p>#text:Parent
    >/p
    >p
    >p>#text:Child
    >/p
    >p
    >p>#text:Grandchild
    >/p
    >#text:Child
    >/p
    >#text:Parent
    >/p
    >#text:Grandparent


    There is a possibility that a badly written HTML parser would make the parsing that an XML parser does, but that would be a very erratic parser, because it SHOULD know to close the p tag before it opens any block element.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •