Search code examples
javascriptgreasemonkeytampermonkey

How do I extract array data from the object <div class="gwt-Label">Some Data</div>?


How do I extract array data from the object <div class="gwt-Label">Some Data</div>?

Since @BrockAdams provided an excellent answer and solution for the general problem of data extraction from a DIV object, described by class name only (no id) and since the web page is made of 100+ DIV objects, described by the same class name, mainly "gwt-Label"

How do I extract the text from a (dynamic) div, by class name, using a userscript?

I am looking for a solution to limit the output to the console from 100+ lines to just few by modifying the code by @BrockAdams below

waitForKeyElements (".gwt-Label", printNodeText);

function printNodeText (jNode) {
    console.log("gwt-Label value: ", jNode.text().trim());
}

Since the output I read in the console is 100+ lines long, but all I need is just a few selected lines by array index.

Do you know how to manipulate jNode to save output to an array first and have only the selected array elements to be reread and send to the console?

I would prefer pseudocode like this:

jNode.text().trim()[0]
jNode.text().trim()[5]

Run as a script in Greasemonkey or Tampermonkey.

And what's more, I need to loop the script over a numerical query string setting dynamic @match URL in the script.


Solution

  • it took me days to understand the problem

    // ==UserScript==
    // @name        Important test1
    // @namespace   bbb
    
    // @include     http://srv1.yogh.io/#mine:height:0
    
    // @version     1
    
    // ==/UserScript==
    console.log("sdfasg");
    
    window.setTimeout(function() {
      
      var HTMLCollection = document.getElementsByClassName("gwt-Label");
    console.log(HTMLCollection);
    var elements = HTMLCollection.length;
    console.log(elements);
      element = HTMLCollection[6];
      console.log(element);
      text = element.innerHTML;
      console.log(text);
      textclass= text.innerHTML;
     // console.log(textclass);
    
    console.log("15minutes");
    }, 15000);
    
    
      
     var HTMLCollection = document.getElementsByClassName();
    console.log(HTMLCollection);

    @BrockAdams was very helpful. Since the above site loaded at random time duration so GM script one day worked fine, generating HTMLCollection in full but another time generated it empty, making innerHTML to generate undefined value. Great success came with "353 more… ]" HTMLCollection link to Open In Variables View, generating exactly what I tried to accomplish via XPath, generating indexed (numered) list of all DIV objects in my HTMLCollection, to let me select DIV object of interest by known number.

    I am still looking for alike solution provided by DOM Parsing and Serialization

      [https://w3c.github.io/DOM-Parsing/#][1] 
    

    to work for me to append natural number, index to every DOM object of HTML document to let me use it in parallel with XPath generated by Firebug

    example

    html/body/div[3]/div[3]/div/div[6]/div[2]/div/div/div
    

    followed by

    html1/body2/div[3]5or-higher/div[3]/div/div[6]/div[2]/div/div/div
    

    just serializing HTML DOM object, appending unique index to each object to let me call it via HTMLCollection[index] or better HTMLDOMCollection[index]

    I am sure such approach has been known and adopted by HTML DOM serializer parser but I don't know how to access it.

    thank you all