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

问题

How do I extract the value 2083236893 from the following object using JavaScript?

<div class="gwt-Label">2083236893</div>

I installed Greasemonkey 3.17 for Firefox 52.2.1 (32-bit) and tested every code example provided and failed.

var html = document.getElementsByClassName("gwt-Label")[0];
alert(html.innerHTML);

The above example comes from: Accessing Div, by class name, with javascript.

Should the code be run on full download of the web page?

Appended:

var elements = document.getElementsByClassName("gwt-Label")[0];
alert(elements.innerHTML);

the above may fail if

elements.length = 0

It may be the case the document has not been loaded in full or query result = 0 - no DIV object contains class name from query string

Firebug can generate XPath to the selected object (innerHTML or innerTEXT) in the document (HTML version in your browser) to let you verify if the class name from the query is correct and exists.

Setting greater value for timeout may let HTML document to be loaded fully to make your script run via Greasemonkey or alike add-on to give correct results via

console.log(HTMLCollection.length)

see above.

回答1:

class="gwt-Label" in the HTML, strongly implies that the page is driven by Google Web Toolkit -- which means the page is AJAX driven and static techniques, like in some other answers, will not work.

Use AJAX aware techniques, like waitForKeyElements(). Here's a complete script that will print gwt-Label values to the browser console. (Ctrl Shift I opens said console.) :

// ==UserScript==
// @name     _Print gwt-Label text
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @match    https://stacksnippets.net/js*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

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

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

This will print each label, if there is more than one.

Note that waitForKeyElements takes jQuery selectors.

You can test the above script by installing it using Greasemonkey, Tampermonkey, Violentmonkey, or similar, then running this snippet:

var lblbNum = 0;
function addLableLine () {
    lblbNum++;
    $("body").append(`<div class="gwt-Label">New label: ${lblbNum}</div>`);
}
setInterval (addLableLine, 1333);  // New line every 1.3 seconds.

.gwt-Label {display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gwt-Label">2083236893</div>

You will then see:

gwt-Label value:  2083236893
gwt-Label value:  New label: 1
gwt-Label value:  New label: 2
etc...

in the browser console.

回答2:

If you wish to use .text() in jQuery that may be easier!

Check out this link: http://api.jquery.com/text/

This should select your text:

$(window).load(function(){
    $(".gwt-Label").text();
});

来源：https://stackoverflow.com/questions/47973438/appendedhow-do-i-extract-the-text-from-a-dynamic-div-by-class-name-using-a-u

标签

javascript

class

greasemonkey

userscripts

tampermonkey