asked on

IE Question: element.previousSibling returns phantom object

<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".

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

seanpowell

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.

COBOLdinosaur

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

Cd&

seanpowell

You can say that again :-)
https://www.experts-exchange.com/questions/20927759/Spacing-Issuses-with-XHTML-HTML.html

Asta Cu

The "white space" issue is problematic here as well. https://www.experts-exchange.com/questions/20925992/Certain-sites-giving-404-errors-but-are-actualy-there.html
Listening to learn.
Asta

COBOLdinosaur

A different face of the same thing.

Cd&

COBOLdinosaur

lol... looks like an invasion of white space problems this week.

Cd&

2perplexed

ASKER

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?

COBOLdinosaur

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

Cd&

2perplexed

ASKER

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...

COBOLdinosaur

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&