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.

What is higher level objective? – charlietfl May 21 '17 at 23:48 — charlietfl, May 21 '17 at 23:48
I want to put these names in an array/ data structure – defoification May 22 '17 at 00:02 — defoification, May 22 '17 at 00:02

score 0 · Answer 1 · answered May 21 '17 at 23:11

0

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();

answered May 21 '17 at 23:11

garek007

395
4
15

are the spans there when the page loads or are they added by ajax? – garek007 May 21 '17 at 23:26
will get text of the whole collection doing this...doubt that is what is wanted – charlietfl May 21 '17 at 23:50
Well @charliefl since he didn't specify I offered what I could – garek007 May 22 '17 at 04:16
@defoification you didn't mention that you were making a chrome extension in the original post. I am not sure how chrome extensions work. The JQuery I posted is valid, but there must be something else going on. For example, if the spans are not part of the page when it first loads, meaning they get added via AJAX, that code won't work – garek007 May 22 '17 at 04:18

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

I got an array of size 0 containing: `Array(0) length : 0 __proto__ : Array(0) concat : function concat() arguments : null caller : null length : 1 name : "concat" __proto__ : function () constructor : function Array() copyWithin : function copyWithin() entries : function entries()` and it goes on what looks like forever. — defoification, May 22 '17 at 00:20
Do you have a website where this monstrosity dwells? There is more going on than what you have covered in question. In my demo, the ``s are about 8 nested levels (although it doesn't really matter that much) — zer00ne, May 22 '17 at 00:26
It is a school website and you need to be a student to log in. — defoification, May 22 '17 at 00:31
If `.PSLONGEDITBOX` exists, my code as well as some of the other answers, would've returned an array. Off the top of my head I can think of two different reasons why you're not getting anything. 1. You misspelled `.PSLONGEDITBOX` or 2. At that moment when the script is ran, `.PSLONGEDITBOX` doesn't exist yet because it's dynamically created. To see if 2. is a possibility, look at the webpage's source code by right clicking it then choose `View page source` and if it's available `View frame source`. If you don't see those `` in the source, then we'll load the script when they're created. — zer00ne, May 22 '17 at 01:33
Works in chrome console. Doesn't work through my extension. I get an empty array. If you know why, I would greatly appreciate any input. — defoification, May 22 '17 at 15:57

score -1 · Answer 3 · answered May 21 '17 at 23:13

-1

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.

answered May 21 '17 at 23:13

Sergey Glebko

11
1
4

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

3 Answers3

Update

Demo

Old

Linked