How to get innerText of each element deep inside multiple tables?(chrome extension)

Question

I have been trying this for hours(I am new to web development). I need to access a table which contains many columns one of which contains rows of people's names, and put them in a data structure. In each row the id for the text which holds the person's name is setup like this:

<span class="myClass" id = "first"> JOHN DOE </span> == $0

<span class="myClass" id = "second"> BOB DAVID </span> == $0

These rows are very, very deep inside of a table of tables of tables, etc...

I tried

var n = document.getElementsByClassName(".myClass");

and

var n = document.querySelectorAll(".myClass");

and

n = $(".myClass");

but have not had any luck.

Is there a different way to access certain classes/ids deep inside this structure?

EDIT: There were multiple close answers, but I accepted the one by the user most willing to help, and tailored mostly for my particular circumstance.

Answer 1

This

n = $(".PSLONGEDITBOX");

should work. but it won't return the text, it returns the SPAN element as an object. to get the text you need

n = $(".PSLONGEDITBOX").text();

Answer 2

Update

There's a possibility that .PSLONGEDITBOX is created dynamically and that it doesn't exist in the DOM when script is invoked. The updated demo will invoke the script onDOMReady and then a second time at onload which is the latest load event possible.

Details are commented in demo

---

Demo

// This loads dataArray() when DOM is ready
$(function() {
  var onDOM = dataArray();
  console.log('onDOMReady: ' + onDOM);
});


function dataArray() {

  // Declare empty array
  var boxArray = [];

  /* .each() .PSLONGEDITBOX extract it's text
  || with .text() method then 
  || .push() extracted text into the empty array
  */
  $('.PSLONGEDITBOX').each(function(idx, box) {
    let content = $(this).text();
    boxArray.push(content);
  });
  return boxArray;
}

function onLoadEvent(fnc) {
  // assign any functions on 'window.onload' to a var
  var onLoad = window.onload;
  // if there isn't any function on 'window.onload'...
  if (typeof window.onload != 'function') {

    // Assign fnc to it...
    window.onload = fnc;
    let F = fnc();
    console.log('onLoad: ' + F);
    // Otherwise...
  } else {

    window.onload = function() {
      // Call the function that's there already...
      onLoad();
      console.log('Original function loaded...');
      // ...then call fnc
      fnc();
      let F = fnc();
      console.log('onLoad: ' + F);
    }
  }
}
/* Both expressions will run dataArray after everything
|| else has loaded. This is the onload event, which is
|| the most thorough of loading events and the slowest.
|| Besides being the last event, it's other major con
|| is that only one function can be called, any others
|| called before the last function called is overridden.
|| The function onLoadEvent() is designed to find any 
|| previously assigned function or method to the onload 
|| event and then invoke it first, then invoke any
|| given function afterwards.
*/

/* add a '/' to enable expression below.

var onLoad = dataArray();
window.onload = console.log('onLoad Event: ' + onLoad);

/*/
//* Remove a '/' to disable function below

onLoadEvent(dataArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id='A'>
  <tr>
    <tr>
      <td>
        <td>
          <td>
            <td>
              <td>
                <td>
                  <td>&nbsp;

                    <td>&nbsp;
                      <tr>
                        <td>&nbsp;
                          <tr>
                            <td>&nbsp;
                              <tr>
                                <td>

                                  <table id='B'>
                                    <table id='C'>
                                      <tr>
                                        <td><span class='PSLONGEDITBOX'>ABC</span>
                                          <tr>
                                            <td><span class='PSLONGEDITBOX'>DEF</span>
                                              <tr>
                                                <td><span class='PSLONGEDITBOX'>GHI</span>
                                                  <tr>
                                                    <td><span class='PSLONGEDITBOX'>JKL</span>
                                                      <tr>
                                                        <td><span class='PSLONGEDITBOX'>MNO</span>


                                                        </td>
                                                    </td>
                                                </td>
                                                </tr>
                                            </td>
                                        </td>
                                        </tr>
                                    </table>
                                  </table>
                                </td>
                                </tr>

---

Old

Try .each() jQuery method on the .PSLONGEDITBOX class and extract the text with the .text() method.

Answer 3

I don't think it depends on the structure of your HTML. Do you use $(document).ready? Or maybe you should include your js file near closing body on your page.