javascript - 使用 CasperJS 提取文本列表

Question

我想从此列表中提取文本值:

<ul class="standardSuggestions">
    <li class="">

        <div id="idac">
            <span class="email" id="idb7"><span>mail-fuer-chrisko</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:1:suggestion:subForm:select-email" id="idae" value="Übernehmen" type="submit"></span></span>
        </div>

    </li><li class="">

        <div id="idaf">
            <span class="email" id="idb8"><span>post-fuer-chrisko</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:2:suggestion:subForm:select-email" id="idb0" value="Übernehmen" type="submit"></span></span>
        </div>

    </li><li class="">

        <div id="idb1">
            <span class="email" id="idb9"><span>chrisko1</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:3:suggestion:subForm:select-email" id="idb2" value="Übernehmen" type="submit"></span></span>
        </div>

    </li><li class="">

        <div id="idb3">
            <span class="email" id="idba"><span>chrisko.1</span>@<span>web.de</span></span>
            <span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:4:suggestion:subForm:select-email" id="idb4" value="Übernehmen" type="submit"></span></span>
        </div>

    </li>
</ul>

问题是 div id = ""在每次重新加载时都会发生变化。所以我不确定如何选择正确的元素。我尝试使用以下功能:

casper.then(function(){
    var listItems = this.evaluate(function () {
        var nodes = document.querySelectorAll('ul > li');
        return [].map.call(nodes, function(node) {
            return {
                text: node.querySelector("span").textContent
            };
        });
    });
    this.echo(JSON.stringify(listItems, undefined, 4)); 
});

回显为“空”:-(

Answer 1

您对元素的迭代是正确的。获得 null 的唯一方法页面上下文之外的值是是否存在错误。代码中唯一可能产生错误的部分是 node.querySelector("span").textContent ，因为 node不一定必须有 <span>后裔。如果没有，则会失败并出现 TypeError，并且您会得到 null .

您显示的有限标记始终包含 <span>在每个 <li> ，所以一定还有另一个<ul>在页面上，没有 <span>后人。你必须找到一个不包含其他 <ul> 的 CSS 选择器元素。

我提议

var nodes = document.querySelectorAll('ul.standardSuggestions > li');