How to get a collection of all child elements that have parents with ID attributes? [duplicate]

Question

I have a situation where I need to collect a collection of elements that have parents with IDs. So if

My scenario

<table>
 <thead></tead>
 <tbody>
   <tr id="row1"><td><div class="pro_fname">name</div></td></tr>
   <tr id="row2"><td><div class="pro_fname">name</div></td></tr>
   <tr id="row3"><td><div class="pro_fname">name</div></td></tr>
   <tr><td><div class="pro_fname">name</div></td></tr>
   <tr><td><div class="pro_fname">name</div></td></tr>
   <tr><td><div class="pro_fname">name</div></td></tr>
  </tbody>
</table>

From JavaScript, how can I guarantee to store the first three fname class elements into a list, but disregard the other fname class elements, all because the first 3 have parent ID's on elements?

Below is my initial attempt...

//collect all desired elements
var objFirstNames = document.getElementsByClassName("pro_fname");
...
...

//call function to check against the array type objects collected. arguments will grow...
//lets just focus on first names
checkInputValuesObjects(objFirstNames, objLastNames, objAttEmails, ...);

//filter values where parent ID's exist
function checkInputValuesObjects() {
  for (var i = 0; i < arguments.length; i++) {
     if (arguments[i][0].parentNode.parentNode.id.length) {
       //then I can do something with these specific elements...
       console.log(arguments[i]);
    }
  }
}

...but I'm having a hard time, specifically through Firefox Console, if I am truly capturing only 3 objects, and not all 6....