SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Stevenwulf's Avatar
    Join Date
    May 2002
    Location
    Berkeley
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Clarification Regarding childNodes attribute

    I'm having trouble understanding how childNodes work.

    From what I've read, everything in the DOM is a node. Basically there are three types of nodes: text, element and attribute (there are more node types but these are the most common).


    Let's say I have the following html:

    <html>
    <form>
    <p></p>
    </form
    </html>

    Then this javascript:

    var forms = document.getElementsByTagName("form")
    var form = forms[0];
    alert(form.childNodes.length); /* output is 3 */


    I would think that the output should be 2 as I only see 2 childNodes for the form object: the <p> element is an element node and the <p> element has a text node, so that's a total of 2 nodes. Where is the 3rd one comming from.

    To add to the confusion, if I change the html to:

    <html>
    <form>
    <p title="jeff" id="22"></p>
    </form
    </html>

    The above javascript still outputs 3. I would think that the output is 4:
    - 1st node is the <p> element
    - 2nd node is the <p> element's attribute node "title"
    - 3rd node is the <p> element's attribute node "id"
    - 4th node is the <p> element's text node

    Obviously I'm not correctly comprehending how childNodes are determined. If someone could explain where I've gone wrong, I'd really appreciate it.

    Thanks,
    Steven

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    white-space

    Try putting the mark-up on one line like this:
    HTML Code:
    <html><form><p></p></form></html>
    and see what you get.

  3. #3
    SitePoint Enthusiast Stevenwulf's Avatar
    Join Date
    May 2002
    Location
    Berkeley
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I'm even more confused

    HTML Code:
     <html><form><p></p></form></html>
    var forms = document.getElementsByTagName("form")
    var form = forms[0];
    alert(form.childNodes.length); /* output is now 1 */


    I still think the output should be two. Can you explain how it's gone from 3 to 1? I could make a guess as to why, but I'd rather know what's actually going on instead of guessing.

    Also, running the above javascript on:

    HTML Code:
      <html><form><p title="jeff" id="22"></p></form></html>
    Also outputs 1, why aren't the attribute nodes "title, id" being included in this count?

    Thanks,
    Steven

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    white-space

    The difference is because different browsers (XML parsers) treat white-space differently. Newlines are white-space so
    HTML Code:
    <html>
    <form>
    <p></p>
    </form>
    </html>
    is considered as being
    HTML Code:
    <html>
    <form><text>
    </text><p></p><text>
    </text></form>
    </html>
    giving the form node 3 children, where with
    HTML Code:
    <html><form><p></p></form></html>
    the form node only has 1.
    Calling attributes "nodes" is a bit confusing. They aren't accessed as nodes, but as attributes. eg.
    getAttribute("title")

  5. #5
    SitePoint Enthusiast Stevenwulf's Avatar
    Join Date
    May 2002
    Location
    Berkeley
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, that makes sense.

    So then if I put text within the <p> element

    <form><p>text</p></form>

    Why is the form element's childNodes count still 1. Shouldn't the text node within the <p> tag be included in the count?

    -Steven

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    text

    AFAIK, in some browsers (IE?) it is. But in others it isn't.
    I know, it sure doesn't help make working with the DOM any easier. So much for "standards".

  7. #7
    SitePoint Enthusiast Stevenwulf's Avatar
    Join Date
    May 2002
    Location
    Berkeley
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One last question.

    The three most common nodeTypes are:

    Element = 1
    Attribute = 2
    Text = 3

    In what instance would a nodeType of "Attribute" exist?

    if I have:

    <html><form><p id="1" title="jeff"></p></form></html>

    var p = document.getElementById("1");
    alert(p.childNodes.length); // ouput = 1
    alert(p.firstChild.nodeType); // output = 3
    // conclusion: the element p has one childNode and its
    // nodeType is = "text"
    // Since the "id" and "title" attributes are ignored, they are
    // not true nodes?

    var title = p.getAttribute("title");
    alert(title); // ouput = "jeff"
    alert(title.nodeType); // ouput = "undefined"

    Since an attribute of an element--like the p element's "title"--has an undefined nodeType, is there a nodeType of "Attribute" that is different
    from the attributes that belong to the <p> element?

    If so, in what type in situation would a node like this exist?

    Regards,
    steven

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,014
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    attribute "nodes"

    Although the terminology calls them "attribute nodes", they are more like "element properties". They "belong to" or are "part of" the element they're in. So in a way they're not nodes of the document per se. IMHO it is confusing to call attributes "nodes", but that is the way it is and not likely to change. I did see a pretty good explanation somewhere (W3C ?) but even though it made sense at the time, I don't remember it now.


Bookmarks

Posting Permissions

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