Jump to content

Question about a function (fnGetSibling)


Recommended Posts

Hello,

I found a function called fnGetSibling

on

https://msdn.microsoft.com/en-us/library/ms533043(v=vs.85).aspx#navigate

and I was hoping to understand what it does return and why.

var oPrevious = fnGetSibling();
function fnGetSibling(){
   var oParent=oNode.parentElement;
   var iLength=oParent.children.length;
   for(var i=0;i < iLength;i++){
      if(oParent.children[i]==oNode){
         return oParent.children[i - 1];
         break;
      }
   }
}

I have three possible options:

 1. Finds and returns a reference to all childs of a node of DOM Tree.
 2. Finds and returns a reference to one of the children of a node of DOM Tree.
 3. Finds and returns a reference to a father of a node of DOM Tree.

You are not solving any homework (it's summer), it's just from a quiz. :)

  • Like 1
Link to post
Share on other sites

In the piece of code you provided oNode is not defined, so this code doesn't actually do anything.

 

Assuming that oNode is actually a reference to a DOM node, I'll break it down for you:

// Get a reference to the parent of the node
var oParent=oNode.parentElement;

// Find out how many nodes are children of that parent
var iLength=oParent.children.length;

// The variable i starts at zero and increases by one each time the code loops
// The loop ends when i is equal to the number of children in the parent of oNode
for(var i=0;i < iLength;i++){

  // If the node with index "i" is oNode then run the code between the braces
  if(oParent.children[i]==oNode) {

    // Return the element node with an index of one less than the oNode's index
    return oParent.children[i - 1];
    
    // Exit the loop
     break;
  }

}

The function could be further improved if you could actually pass oNode as a parameter to the function, and it doesn't account for oNode being the first child in its parent.

  • Like 2
Link to post
Share on other sites

In the piece of code you provided oNode is not defined, so this code doesn't actually do anything.

 

Assuming that oNode is actually a reference to a DOM node, I'll break it down for you:

// Get a reference to the parent of the node
var oParent=oNode.parentElement;

// Find out how many nodes are children of that parent
var iLength=oParent.children.length;

// The variable i starts at zero and increases by one each time the code loops
// The loop ends when i is equal to the number of children in the parent of oNode
for(var i=0;i < iLength;i++){

  // If the node with index "i" is oNode then run the code between the braces
  if(oParent.children[i]==oNode) {

    // Return the element node with an index of one less than the oNode's index
    return oParent.children[i - 1];
    
    // Exit the loop
     break;
  }

}

The function could be further improved if you could actually pass oNode as a parameter to the function, and it doesn't account for oNode being the first child in its parent.

 

Hello Ingolme and thank you for your answer, It helped me alot understanding this code.

oNode should be a reference in DOM tree as you said.

I have imagined it like this post-201361-0-16521700-1471899074_thumb.png. So in return statement do we actually get a reference to Parent? What do you mean and it doesn't account for oNode being the first child in its parent?

Edited by nikos
  • Like 1
Link to post
Share on other sites

The return statement says this:

return oParent.children[i - 1];

oParent is the parent node, children is a list of child nodes, [i-1] is an index in the children list.

 

It's not hard to figure out what is being returned. Have you looked at the objects and arrays tutorial pages?

  • Like 2
Link to post
Share on other sites

The return statement says this:

return oParent.children[i - 1];

oParent is the parent node, children is a list of child nodes, [i-1] is an index in the children list.

 

It's not hard to figure out what is being returned. Have you looked at the objects and arrays tutorial pages?

 

I have read these tutorials, I also have tried myself their examples which were very helpful. :)

I just read the DOM Navigation tutorial and I think it will return the previous brother of oNode and not the Parent, which is called previousSibling if I'm not mistaken.

If this is correct, if oNode is number 1 child as you said in a previous post (like i imagined it in the picture), this means that there will be an error, right?

  • Like 1
Link to post
Share on other sites

If oNode is the first child, that means it has index 0, the function would try to return an element with index [0 - 1]. There's nothing in the list at index -1, so it would throw an error.

 

The result of this function is different from previousSibling, because the node is always an element node. The previousSibling property may point to a text node or a comment node.

  • Like 1
Link to post
Share on other sites

I mean that if we have this code below, and oNode points to <p> element

Using fnGetSibling it will return a reference to <h1>.

What previousSibling would do in this case?

<html>

  <head>
      <title>DOM Tutorial</title>
  </head>

  <body>
      <h1>DOM Lesson one</h1>
      <p>Hello world!</p>
  </body>

</html>

  • Like 1
Link to post
Share on other sites

It would do the same thing.

 

However, in this case previousSibling would reference a text node with a node value of "Some text"

<html>

  <head>
      <title>DOM Tutorial</title>
  </head>

  <body>
      <h1>DOM Lesson one</h1>
      Some text
      <p>Hello world!</p>
  </body>

</html>
  • Like 2
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...