22 Aralık 2008 Pazartesi

HTML DOM tree in Mozilla

This text is valid for only Firefox !!! Internet Explorer behaves differently. This explains why using cross browser DOM library is necessary. I have demonstrated the cross browser script for this example here.

IN FIREFOX, first and last chilren of DOM elements (html, head, body, and others) are text nodes. In the example below they are represented as (#text). This is very important!. Suppose that we have
<head>
    <title>Deneme</title>
</head>
To get the Title node, we should write a code like:
    var titleNode1 = headNode.firstChild.nextSibling;
    // or
    var titleNode2 = headNode.childNodes[1];

document
   |----- html (element)
            |
            |----- (#text)
            |
            |----- head (element)
            |        |
            |        |----- (#text)
            |        |
            |        |----- title (element)
            |        |        |
            |        |        |----- (#text)
            |        |
            |        |----- (#text)
            |
            |----- (#text)
            |
            |----- body (element)
            |        |
            |        |----- (#text)
            |        |
            |        |----- p (element)
            |        |        |
            |        |        |----- (#text)
            |        |        |
            |        |        |----- i(element)
            |        |        |        |
            |        |        |        |----- (#text)
            |        |        |
            |        |        |----- (#text)
            |        |
            |        |----- (#text)
            |
            |----- (#text)

Hiç yorum yok: