appended如何使用用户脚本按类名从（动态）div 中提取文本？

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

以上例子来自：Accessing Div, by class name, with javascript。

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

附加：

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

如果上述情况可能会失败

elements.length = 0

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

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

为 timeout 设置更大的值可能会让 HTML 文档被完全加载，以使您的脚本通过 Greasemonkey 或类似的插件运行，从而通过以下方式给出正确的结果

console.log(HTMLCollection.length) 

见上文。

Answer 1

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 或类似工具安装它，然后运行这个 sn-p：

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-标签值：2083236893 gwt-标签值：新标签：1 gwt-标签值：新标签：2 ETC...

在浏览器控制台中。

Answer 2

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

查看此链接：http://api.jquery.com/text/

这应该选择你的文本：

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