Solved

IE Question: element.previousSibling returns phantom object

Posted on 2004-03-22
11
303 Views
Last Modified: 2010-05-18

<html>
<body>

<form>
<input type='text'>
<span onclick='alert(this.previousSibling.tagName)'>click me</span>
</form>

</body>
</html>

When you click on "click me", the result should be a popup box that says, "INPUT".  However, the result is "undefined".

If you change the reference from "this.previousSibling.tagName" to "this.previousSibling.previousSibling.tagName" it works.  Seems like there's some phantom object between the "INPUT" tag and the "SPAN" tag.  NOTE:  I added some code to display the number of children below the "FORM" tag.  The result was 2.  Weird.

However, if I replace the "INPUT" tag with some non-form tag, I only need one "previousSibling" reference to get the object...which makes sense.

Does anybody know if this is a known bug or if there is some extra object that pads form tags that I don't know about?  I'd like to know before I start widely using the "Sibling" references with form tags.  BTW, the same phenomenon applies for "nextSibling".

0
Comment
Question by:2perplexed
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
  • 2
  • +1
11 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10653773
Depends on the browser.  Some will treat the line feed as a node, so previousSibling in that case has no tag.   That is actually the correct implementation of the standard. try putting the span on the same lins as the input like this:

<input type='text'><span onclick='alert(this.previousSibling.tagName)'>click me</span>

It has messed my up a few times when I try to process the childnodes in a loop nad get the white space text nodes.  The way to avoid problems is to check the node types which are text for the phantom whitespace nodes.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10653813
That's incredible. I had subscribed to the Q for interest sake - knowing that you would know.

Interesting how white space/line feeds cause so many problems all around.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10654054
Now it just clicked in on the CSS Q with the row colors as well.  Funny how things run in cycles sometimes.

Cd&
0
SuperAntiSpyware Licenses Discounted by 25% !

Exclusive offer to Experts Exchange Members!
Buy SuperAntiSpyware License(s) from us and save 25% on the regular purchase price.
- Includes Full SuperAntiSpyware Vendor Support Entitlements
- Your Subscription does not begin until you activate your license
- Buy for your friends

 
LVL 31

Expert Comment

by:seanpowell
ID: 10654155
0
 
LVL 27

Expert Comment

by:Asta Cu
ID: 10654292
The "white space" issue is problematic here as well.  http://www.experts-exchange.com/Web/Browser_Issues/Q_20925992.html
Listening to learn.
Asta
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10654296
A different face of the same thing.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10654310
lol... looks like an invasion of white space problems this week.

Cd&
0
 
LVL 1

Author Comment

by:2perplexed
ID: 10657056
If you say that white space, or line feeds, etc. show up as extra child nodes, then why, when I add code to prompt me as to the number of child nodes, do I get "2" as the child node count?  I should get "3", right?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10658821
actually when I name the form "theform", theform.childNodes.length returns 4 which is correct because there is also whispace after the span

Cd&
0
 
LVL 1

Author Comment

by:2perplexed
ID: 10658928
COBOLdinosaur,

That worked great when I got rid of the white space.  Only one more question.  Is there a good way to test to see if the node in question is in fact a white space node?  I tried the .type attribute you mentioned in your first answer but only got that to work on the INPUT tag, eg. <INPUT type='text> gave me "text" as the type.  When I tried it on the white space node, I got "undefined".

Thanks...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10659848
The actual name of the property is nodeType
The types are:


ELEMENT_NODE                   = 1;
ATTRIBUTE_NODE                 = 2;
TEXT_NODE                      = 3;
CDATA_SECTION_NODE             = 4;
ENTITY_REFERENCE_NODE          = 5;
ENTITY_NODE                    = 6;
PROCESSING_INSTRUCTION_NODE    = 7;
COMMENT_NODE                   = 8;
DOCUMENT_NODE                  = 9;
DOCUMENT_TYPE_NODE             = 10;
DOCUMENT_FRAGMENT_NODE         = 11;
NOTATION_NODE                  = 12;
 
The only ones you really have to worry about are 1 an 3
3 can be white space, or actual text.  1 is a tag.

The nodes look like this:

http://www.mozilla.org/quality/browser/standards/dom1/tcmatrix/node.html

Thanks for the A. :^)

Cd&
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question