附加如何使用用户脚本从（动态）div、class 名称中提取文本？

Question

如何使用 JavaScript 从以下对象中提取值 2083236893？

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

我为 Firefox 52.2.1（32 位）安装了 Greasemonkey 3.17，并测试了提供的每个代码示例，但都失败了。

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

以上例子来自：.

完整下载网页时代码是否应该运行？

附加：

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

如果

以上可能会失败

elements.length = 0

可能是文档未完全加载或查询结果 = 0 - 没有 DIV 对象包含来自查询字符串的 class 名称

Firebug 可以生成文档中所选对象（innerHTML 或 innerTEXT）的 XPath（HTML 版本在您的浏览器中）让您验证 class 查询中的名称正确且存在。

设置更大的超时值可能会让 HTML 文档被完全加载，使您的脚本运行通过 Greasemonkey 或类似的附加组件通过

给出正确的结果

console.log(HTMLCollection.length)

见上文。

Answer 1

如果你想在 jQuery 中使用 .text() 可能会更容易！

看看这个 link：http://api.jquery.com/text/

这应该 select 你的文本：

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

Answer 2

class="gwt-Label" 在 HTML 中强烈暗示该页面由 Google Web Toolkit 驱动——这意味着该页面是 AJAX 驱动和静态技术，如其他一些答案，将不起作用。

使用 AJAX 感知技术，例如 waitForKeyElements()。这是一个 完整的脚本 ，它将向浏览器控制台打印 gwt-Label 值。（Ctrl Shift I 打开所述控制台。）:

// ==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 () );
}

如果有多个标签，这将打印每个标签。

请注意 waitForKeyElements 使用 jQuery 个选择器。

您可以通过使用 Greasemonkey、Tampermonkey、Violentmonkey 或类似工具安装上面的脚本来测试，然后运行这个片段：

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>

您将看到：

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

在浏览器控制台中。

附加如何使用用户脚本从（动态）div、class 名称中提取文本？

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

javascript

class

greasemonkey

userscripts

tampermonkey