trouble using .nextSibling

[2obvious]

During the window.onload event, I set the .onclick event of an element
to turn off the display of the first two elements in a <div> called
"content":

var objNode = getElementById("content").getElementsByTagName("h1")[0];
objNode.style.display = "none";
objNode.nextSibling.style.display = "none";

Unfortunately, this (and several other slight variations on this) was
unable to recognize "nextSibling" as a function. What is it I'm not
understanding here?

(On a related note, I probably would have used the .firstChild()
function to grab that header, but I had no luck with that either, and
..nextSibling is the more serious problem.)

 

[Martin Honnen]

During the window.onload event, I set the .onclick event of an element
to turn off the display of the first two elements in a <div> called
"content":

var objNode = getElementById("content").getElementsByTagName("h1")[0];
objNode.style.display = "none";
objNode.nextSibling.style.display = "none";

(Ignoring that it should be document.getElementById and not
getElementById) I do not see where you turn off the display "of the
first two elements in a <div called 'content'", you are trying to access
the first <h1> element and its next sibling. Several things can fail, it
is possible there is no <h1> element, then you already get an error with
objNode.style. Or the next sibling node is not an element node but a
text node or comment node for instance which does not have a style
property. Or there is no next sibling meaning nextSibling gives null. If
you want to write code that works generally without throwing errors then
you need to use checks like
if (objNode && objNode.style) {
objNode.style.display = 'none';
}

 

[Lasse Reichstein Nielsen]

var objNode = getElementById("content").getElementsByTagName("h1")[0];

I assume that objNode is not null (i.e., the page contains what you
expect).

objNode.style.display = "none";

Try adding
alert(objNode.nextSibling.nodeType);
(explanation later)

objNode.nextSibling.style.display = "none";

Unfortunately, this (and several other slight variations on this) was
unable to recognize "nextSibling" as a function.

Good, because "nextSibling" is not a function, but a property (as you
are using it).

What is it I'm not understanding here?

(On a related note, I probably would have used the .firstChild()
function to grab that header, but I had no luck with that either, and
.nextSibling is the more serious problem.)

I will wager a guess: You are using a Gecko based browser (e.g.,
Mozilla or Firefox).

If you add the alert from above, it will tell you what kind of DOM
node the nextSibling node is. To be an element node (and have a style
property), the value of nodeType must be 3. I'm guessing that it will
alert "7", the type of a text node. It is the text node that contains
the whitespace (probably a newline and some spaces) between the "h1"
element and the following element.

You can't just use .nextSibling.nextSibling to step over the text node,
because IE, in it's infinite wisdom, does not include text nodes that
only contain whitespace in its document model. You need to find the
next element. You can use a function like this;
---
function nextSiblingElement(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 3);
return elem;
}

 

[Jim Ley]

You can't just use .nextSibling.nextSibling to step over the text node,
because IE, in it's infinite wisdom, does not include text nodes that
only contain whitespace in its document model.

Which isn't actually non-standard behaviour for even an XML DOM it's
as if a normalizeDocument() has been called with an appropriate
DOMConfiguration. Applications are free to do this.

Jim.

 

[2obvious]

Thanks for all the input, guys.

My previous code was obviously not lifted from the original source;
here is the actual code:

var topNode =
document.getElementById("content").getElementsByTagName("h1")[0];

if ( topNode.style.display != "none" )
{
topNode.style.display = "none";
topNode =
document.getElementById("content").getElementsByTagName("p")[0];
topNode.style.display = "none";
}

I use IE6 for most tasks, but I test under six different
browsers/versions. Yes, I use a Gecko browser for javascript
testing--Netscape 7. Explorer isn't too helpful when it comes to
debugging errors.

The code in content looks like this:

<div id="content">
<h1></h1>
<p></p>
<div>
...
</div>
</div>

When I use this line:

alert(topNode.nextSibling.node­Type);

The response I get is "undefined."

My understanding of the node object is clearly lacking, which is the
crux of my question. White space gets considered when working with
nodes? That's total news to me. I think of nodes the way I think of
elements. Apparently I'm wrong?

 

[2obvious]

On a related note: I could easily solve this problem if I wrapped the
top few elements in a <div>. I haven't done that because I want as
little nonstructural HTML as possible. Do you think I've made a wise
choice, or is easy way out a better way out?