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 10 of 10

Thread: DOM Difference

  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Location
    Philadelphia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question DOM Difference - nextSibling

    Hey everybody,
    I am having a problem here - I get two different result from NS and IE ( to be exptected I guess ). I am using DOM so I expect to work on both browsers but I am wrong. Below is a sample - What I am trying to do is get the next row of a table when an item in the the previous row was clicked in one of the cells - yeah... Anyway, IE works as I anticipated but NS is tripping on it. Is there a problem with NS DOM nextSibling? The problem part is in red and NS returns an "undefined."

    Thanks in advanced.

    <html>
    <head>
    <title>Master Shake</title>
    </head>
    <body>
    <table id="table1" border=1>
    <tr id="TR1">
    <td id="TD1">bla1</td>
    <td id="TD2">bla2<img id="IMG1" src="chevrondown.jpg"></td>
    <td id="TD3">bla3</td>
    </tr>
    <tr id="TR2">
    <td>sdfds</td>

    <td>dfasdf</td>
    <td>sdfsd</td>
    </tr>
    </table>
    <script>
    obj= document.getElementById("IMG1");
    alert(obj.src);
    obj.src="chevronup.jpg"
    objParent = obj.parentNode.parentNode
    alert(objParent.id);
    objParSibling = objParent.nextSibling;
    alert(objParSibling.id)
    objParSibling.style.display="none";

    </script>
    </body>
    </html>
    Last edited by Echo88; 08-09-2004 at 06:22 PM.

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Whitespace nodes are included in Mozilla's DOM. Perhaps nextSibling is a whitespace node instead of an element.

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Location
    Philadelphia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok - but why would it return an "undefined" value? As if it is returning null. Is TR considered a whitespace node.

    Is there a better way of tranversing through the DOM.

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    The "id" property is not defined on a whitespace node, therefore it is "undefined".

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can go two ways - well three ways, but the third is ugly:

    1 - don't rely on sibling relationships - look for elements using getElementsByTagName - this is very simple and effective, although slightly less efficient overall

    2 - clean the whitespace before you start - Alex Vincent wrote a function for that: Cleaning useless whitespace in Mozilla DOM This works admirably to normalise any DOM, but don't allow it to run in Mac/IE5, because in that browser HTML structures become unstable when stripped of whitespace (weird rendering bugs start happening)

    3 - every time you look for a sibling node you can check if it's a text node using "nodeName" - a text node returns "#text" - if it is then you can deem the node you want to be either the next or previous sibling, depending on which way you're going. This is tedious and will drive you insane ...
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    You could always prototype your own navigation properties:

    Code:
    Node.prototype.__defineGetter__("previousElementSibling", function() {
    	if (!this.previousSibling) // firstChild
    		return null;
    	if (this.previousSibling.nodeType == Node.ELEMENT_NODE)
    		return this.previousSibling;
    	else
    		return this.previousSibling.previousElementSibling;
    });
    
    Node.prototype.__defineGetter__("nextElementSibling", function() {
    	if (!this.nextSibling) // lastChild
    		return null;
    	if (this.nextSibling.nodeType == Node.ELEMENT_NODE)
    		return this.nextSibling;
    	else
    		return this.nextSibling.nextElementSibling;
    });
    
    Node.prototype.__defineGetter__("firstElementChild", function() {
    	if (!this.hasChildNodes()) // empty node
    		return null;
    	return (this.firstChild.nodeType == Node.ELEMENT_NODE) ? this.firstChild : this.firstChild.nextElementSibling;
    });
    
    Node.prototype.__defineGetter__("lastElementChild", function() {
    	if (!this.hasChildNodes()) // empty node
    		return null;
    	return (this.lastChild.nodeType == Node.ELEMENT_NODE) ? this.lastChild : this.lastChild.previousElementSibling;
    });
    These aren't tested, but they should provide a "more-expected" traversal in Mozilla.

  • #7
    New to the CF scene
    Join Date
    Aug 2004
    Location
    Philadelphia
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all your help-
    But I don't understand how whitespace nodes are created or how I have a whitespace node? Can someone help me get an understanding of this?

    Thanks!

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Whitespace nodes are caused by whitespace in your source code... go figure. For instance:

    Code:
    <div>
        <p>hello world</p>
    </div>
    The indentation before the <p> is actually a node of it's own.

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    ... as is the newline after the </p>.

    I don't see why you simply don't check the node type. It's a rather simple process:
    Code:
    var
        objParSibling=objParent;
    do
        objParSibling=ObjParSibling.nextSibling;
    while(objParSibling.nextSibling!=null&&objParSibling.nodeType>1);
    Last edited by liorean; 08-24-2004 at 10:13 PM.
    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

  • #10
    New Coder
    Join Date
    May 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mozilla white space

    I have had quite a few problems with mozilla's white space.

    Mozilla creates lots of white space while the user is editing an editable document. Like everytime they press return . . . .

    You could just check the node name as suggested, that works well in most cases. Removing white space is an option if you are wanting to avoid some errors that mozilla 1.7+ has with its editor.

    I ended up removing white space on the fly as it enters my editable document.


  •  

    Posting Permissions

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