Jump to content

nextSibling in Firefox


tinfanide
 Share

Recommended Posts

<script>window.onload = function(){	if(document.getElementById("menu").nextSibling.nodeType !=1){		document.getElementById("menu").nextSibling = document.getElementById("menu").nextSibling.nextSibling;		}	document.getElementById("menu").onclick = change;	}function change(){	document.getElementById("menu").nextSibling.style.backgroundColor = "#FC0";	}</script>

My question is:Why I must use variables (see below) to replace document.getElementById("menu").nextSibling?Can't I do things like above?When I do things like above, FF console reports "document.getElementById("menu").nextSibling.style" is undefined and IE8 cannot work it out (Error page).

<script>window.onload = function(){	e = document.getElementById("menu").nextSibling;	if(e.nodeType !=1){		e = e.nextSibling;		}	document.getElementById("menu").onclick = change;	}function change(){	e.style.backgroundColor = "#FC0";	}</script>

<div id="menu" style="width: 300px; background-color: yellow">Menu<div>SubMenu</div></div><div style="width: 300px; background-color: #6FF">Content</div>

Link to comment
Share on other sites

You can't just assign nodes like that. There are other ways to move the nodes. The second piece of code doesn't replace anything, you're just assigning different nodes to the variable e.http://www.w3schools.com/dom/dom_nodes_replace.asphttp://www.w3schools.com/dom/dom_nodes_add.asp

Link to comment
Share on other sites

You can't just assign nodes like that. There are other ways to move the nodes. The second piece of code doesn't replace anything, you're just assigning different nodes to the variable e.http://www.w3schools.com/dom/dom_nodes_replace.asphttp://www.w3schools.com/dom/dom_nodes_add.asp
For the second piece, I just wanted to use nextSibling to refer to the neighbouring element.It does change the background colour as expected. Then, what do you mean by "just assigning different nodes to the variable e"?
Link to comment
Share on other sites

When you do this:

e = document.getElementById("menu").nextSibling;	if(e.nodeType !=1){		e = e.nextSibling;		}

You are not changing the nodes. You are changing the variable e to point to different nodes. Your other code looks like you're actually trying to move or change nodes with this:document.getElementById("menu").nextSibling = document.getElementById("menu").nextSibling.nextSibling;That looks like you're trying to move or copy one node to another one. That's not how DOM nodes work. The other piece of code is just changing which node the variable e points to, but assigning things to e doesn't change the DOM nodes.

Link to comment
Share on other sites

When you do this:
e = document.getElementById("menu").nextSibling;	if(e.nodeType !=1){		e = e.nextSibling;		}

You are not changing the nodes. You are changing the variable e to point to different nodes. Your other code looks like you're actually trying to move or change nodes with this:document.getElementById("menu").nextSibling = document.getElementById("menu").nextSibling.nextSibling;That looks like you're trying to move or copy one node to another one. That's not how DOM nodes work. The other piece of code is just changing which node the variable e points to, but assigning things to e doesn't change the DOM nodes.

So according to the DOM nodes, how can I change the nodes? Ya mean that is the way in the XML tutorial where appendChild, replaceChind all of that stuff is used?
Link to comment
Share on other sites

Yes, you can use insertBefore to move a node. If the node you're inserting already exists it will be moved.
Okay. I'll have a go-through on the XML tutorial which is brand new to me first. Thanks.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...