<

SurveyHouse.com Research IT Application Development

 

Document Object Model (DOM) Navigation

One difference between IE and Mozilla is how node.nextSibling is interepreted, where node is an object in the DOM. For example, suppose you want to change the style of a node, given that its preceding node has been clicked. You might have code like the following:

<html>
<head><script>
function styleChangeNextSibling(node) {

 if (node.nextSibling.style.display == 'none')
 {   node.nextSibling.style.display = ''; }
 else
 {   node.nextSibling.style.display = 'none';  }

}
</script></head>
<body>
<div onClick="styleChangeNextSibling(this)">Click Here to show and hide the following line.</div>
<div>Stuff whose style I want to change.  This only works on Microsoft Internet Explorer.<div>
</body>
</html>

Click Here to show and hide the following line.
Stuff whose style I want to change.  This only works on Microsoft Internet Explorer.

This will work for IE but not work for Mozilla because of differences in interpretation of nextSibling. One way around this problem is to add an id attribute to the node to be changed, and reference that node with getElementById, as follows:

<html>
<head><script>
function styleChangeById(idref) {

var changenode = document.getElementById(idref);
 if (changenode.style.display == 'none')
 {   changenode.style.display = 'block'; }
 else
 {   changenode.style.display = 'none'; }
}

</script></head>
<body>
<div onClick="styleChangeById('change1')">Click Here to show and hide the following line.</div>
<div id="change1">Stuff whose style I want to change.  This works on IE, Netscape, and Firefox.<div>
</body>
</html>

Click Here to show and hide the following line.
Stuff whose style I want to change. This works on all major browsers.

Each node whose style you want to change must have a unique id. As a practical matter you would likely be changing the class rather than the style directly, but that would have made the examples longer.

Return to previous page