javascript - 从reactjs构建的网页上的span标签中获取值(value)

Question

我对网页设计和开发非常陌生，因此我的请求中的某些内容可能是错误的。基本上，我有一个带有一堆这样的 span 标签的网页例如:

这些span标签是相对较大的DOM树的一部分，并且有很多祖先。

据我了解，该网页是由reactjs构建的。现在我的问题是如何以有效的方式仅使用 JavaScript 获取这些值？

如果您需要更多信息，请随时询问

Answer 1

首先全选<span>具有 data-reactid 属性的元素。然后你可以使用.getAttribute("data-reactid")获取reactid并通过抓取跨度childNode 来获取值:

示例代码

var elements = document.querySelectorAll("span[data-reactid]");
elements.forEach(function(entry) {
    console.log(entry.getAttribute("data-reactid")+ ": " + entry.childNodes[0].nodeValue);
});

PhantomJS 示例

var page = require('webpage').create();
var fs = require('fs');

var url = "http://learngitbranching.js.org/?demo";
var fileName = "output";

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
page.settings.loadImages = false; 

page.open(url, function(status) {
    console.log("Status: " + status);
    if(status === "success") {

        var values = page.evaluate(function () {
                var array = [].map.call( document.querySelectorAll('span[data-reactid]:not(:empty)'), function(value, index) {return value;});
                return [].map.call(array.filter(function (value) {return (value.childNodes != undefined && value.childNodes[0].nodeType == Node.TEXT_NODE);}), 
                    function (data) { return {reactid : data.getAttribute("data-reactid"), value : data.childNodes[0].nodeValue}; }); 
            });

        var string = "";

        values.forEach(function(entry) {
            string = string + entry.reactid+ ": " + entry.value + "\n";
        });

        var path = fileName+'.txt';
        fs.write(path, string, 'w');
    }
    phantom.exit();
});