Why doesn't "return" stop the function completely inside the "if" statement?
I am currently doing this little DOM access tutorial . There is a little excersise at the bottom of the page for creating a function to go through all the nodes in the DOM and get the next node. The code works for me, but I'm not sure HOW it works. It's less DOM related and more related to while / while loops.
This is the code:
nextNode = function(node) {
if (node.firstChild) {
return node.firstChild;
}
while (node) {
if (node.nextSibling) {
return node.nextSibling;
}
node=node.parentNode;
};
return node;
};
My questions:
-
What is the first step this feature will take? For example, it first checks if there is a child node for the selected node. If there is, it will "return" it. Shouldn't this goal function? I thought returning is the way to break out of the function? Why is this going on?
-
As it continues the while loop, it checks for the next sibling. He also "returns". What does he return it to? Then it goes to the parent node and then checks again.
Hope my question makes sense. I am just trying to understand the steps that are taken during this function.
return
works as you expect, it terminates the function call completely. What your function does is basically one step in deep traversing the DOM tree:
- checks if node has a child and returns it if it does. If not,
- checks if node has a next sibling and returns it if it does. If not,
- checks if the parent node has a next sibling and returns that if it is (recursively). If in fact no next node exists,
- returns
null
(because it only breaks out of the loopwhile
whennode
undefined).
source to share
This code defines the function to be called at a later point. This function returns a value.
These if and while conditions determine what is returned.
The first one if
checks for the existence of a child node. If so, it returns it, ending the function there.
If it is not, the script continues to loop while
.
Again, if node has a sibling, it returns it, ending the function. Only if there is no sibling will he continue parenting.
When it traverses, it returns whatever is in the final value node
.
source to share
The main thing you need to understand is that this function is meant to be called multiple times in a loop. Each time the function is called, it will return exactly one time with one node value. For each call, it can follow a different path through the function.
For example, it first checks if a child node exists for the selected node. If there is, it will "return" it. Shouldn't this goal function?
It ends the function if there is a child node, because the statement return
is inside if
. Otherwise, it will continue with the rest of the function. In any case, it will jump to the next nodes on subsequent function calls.
As it continues the while loop, it checks for the next sibling. He also "returns". What does he return?
The caller, as usual, assuming that it has not finished the call yet, returning a value from if
the top of the function or from a previous iteration of this loop while
.
Then it goes to the parent node and then checks again.
Only if he hasn't returned yet.
source to share