为什么 document.querySelectorAll() 返回除第一个元素之外的空元素？

Question

我需要选择两个元素（网络中的两个标签页，每页五个标签页）以单击它们并废弃返回的表格。 每个选项卡都是一个“li”，其子项是一个包含 onclick 事件的“span”。我总是得到正确数量的选项卡列表，但只有第一个元素不为空，即使在第一个元素中，我也无法调用 onclick 事件来显示它的表。包含 onclick 事件的“id”也是随机的。

我使用phantomjs 2.1.1 和casperjs 1.1.4

JS代码：

//Wait to be redirected to the Home page, and then make a screenshot
casper.then(function(){
    casper.wait(5000, function(){
        this.capture('home.png');
        var tabs = casper.evaluate(function() {
            //return document.querySelectorAll('[id^="dbTabLabel_"]'); //Another selector option
            return document.querySelectorAll('span.dashTitle');
        }
        console.log('Num Tabs: ' + tabs.length););

        for(i = 0; i < tabs.length; i++) {
            if(tabs[i]) {
                console.log('Form exists');
                console.log('form id: ' + tabs[i].id);
                // create a mouse click event
                var event = document.createEvent( 'MouseEvents' );
                event.initMouseEvent( 'click', true, true, window, 1, 0, 0 );        
                // send click to element
                tabs[i].dispatchEvent( event );
                var name = tabs[i].innerText + '.png'
                casper.wait(2000, function(){ // Wait to load completely
                    this.capture(name); //Make a screenshot for each tab
                });
            } else {
                console.log("Null Tab");
            }
        }
    })    
});

输出：

Num Tabs: 5
Form exists
form id: dbTabLabel_820718256523832
Null Tab
Null Tab
Null Tab
Null Tab

我想报废this web（我登录时的html代码并使用getHTML casper函数保存网络）。网页截图here。这是标签对应的片段：

<!--TEMPLATES-->
    <ul id="tabul">
        <li id="litab" class="ntabs add"><a href="" id="addtab" class="osx">+</a></li>
        <li id="litab" class="add rightAlign setting-item">
            <img src="/Content/images/icons/expand-24x24.png" class="out-triggerer gray" onclick="fullScreen()">            
        </li>        
        <li id="default-report-export" class="rightAlign">
            <a href="/report/defaultExport" download="">
                <input type="image" src="/Content/images/icons/excel.gif" value="Excel" title="Export default report">
            </a>
        </li>
        <li id="default-report-export" class="rightAlign">
            <a href="/report/defaultExport?isPdf=true" download="">
                <input type="image" src="/Content/images/export-pdf-24x24.png" value="Excel" title="Export default report">
            </a>
        </li>
        <li id="dbTab_889113733777776" class="ntabs addedTab activeTab">
            <span id="dbTabLabel_889113733777776" class="dashTitle" onclick="clickDashboard('889113733777776')">Dashboard EUR</span>
            <span id="dbTabSettings_889113733777776" class="settingsContainer dashSettings" style="">
                <div id="topnav" class="topnav">
                    <a href="javascript:void(0)" class="signin" onclick="toggleTabSettingsMenu('889113733777776',true);">
                        <span><img src="/Content/Images/icon_gear.png" alt="Edit"></span>
                    </a>
                </div>
                <fieldset id="dbTabSettingsMenu_889113733777776" class="dashSettings-menu">
                    <ul class="dashboardEditMenu">
                        <img src="/Content/images/close.png" onclick="toggleTabSettingsMenu('889113733777776',false);" alt="tooltip" style="position:absolute;right:2px;top:2px;border:0;">
                        <li class="dashboardEditMenuList">
                            <a href="javascript:void(0)" class="addWidget" onclick="toggleLeftUpdatePanelMenu(true);"> Añadir widgets</a>
                        </li>
                        <li class="dashboardEditMenuList">
                             <a href="javascript:void(0)" class="closeDash" onclick="deleteDashboard('889113733777776')"> Borrar este dashboard</a>
                        </li>
                    </ul>
                </fieldset>
            </span>
        </li>
        <li id="dbTab_894967889413237" class="ntabs addedTab">
            <span id="dbTabLabel_894967889413237" class="dashTitle" onclick="clickDashboard('894967889413237')">Dashboard USD</span>
            <span id="dbTabSettings_894967889413237" class="settingsContainer dashSettings" style="display:none;">
                <div id="topnav" class="topnav">
                    <a href="javascript:void(0)" class="signin" onclick="toggleTabSettingsMenu('894967889413237',true);">
                        <span><img src="/Content/Images/icon_gear.png" alt="Edit"></span>
                    </a>
                </div>
                <fieldset id="dbTabSettingsMenu_894967889413237" class="dashSettings-menu"> 
                    <ul class="dashboardEditMenu">
                        <img src="/Content/images/close.png" onclick="toggleTabSettingsMenu('894967889413237',false);" alt="tooltip" style="position:absolute;right:2px;top:2px;border:0;">
                        ...
                   </ul>
            </fieldset>
        </span>
    </li>
</ul>

我不知道我的问题是否与我读过的post 有关。但是建议的解决方案我做不到，因为我的“id”是随机的，我无法制作“静态”选择器来获取它们。

Answer 1

document.querySelectorAll() 不是问题，因为您在 console.log('Num Tabs: ' + tabs.length); 中拥有正确数量的标签

这是因为异步 casper.wait() 这里是关于 asynchronous process in a loop 的答案

for 循环会立即运行到完成，而您的所有 异步操作开始。当他们完成一段时间 未来并调用他们的回调，循环索引的值 对于所有回调，变量 i 将处于其最后一个值。

解决这个问题的一种方法是使用es6 的let 而不是var 之类的

for(let i = 0; i < tabs.length; i++) { ...ES6 var vs let

或使用.forEach，因为它会创建自己的函数闭包

for vs .forEach()

将您的 for(i = 0; i < tabs.length; i++) { 替换为 tabs.forEach(function(tab)) { .. 并使用tab 而不是tabs[i] 访问tab

这里有一个 sn-p 来演示它：

var tabs = ['tab1', 'tab2', 'tab3', 'tab4']

for(var i = 0; i < tabs.length; i++){
    if(tabs[i]){
    	setTimeout(function(){ // simulating casper.wait
            console.log('in the for loop with var : ' , tabs[i]);
        }, 1000);
    }
    else{
    	console.log('none');
    }
}

for(let i = 0; i < tabs.length; i++){
    if(tabs[i]){
    	setTimeout(function(){ // simulating casper.wait
            console.log('in the for loop with let : ' , tabs[i]);
        }, 1000);
    }
    else{
    	console.log('none');
    }
}

tabs.forEach(function(e){
     if(e){
        setTimeout(function(){  // simulating casper.wait
            console.log('in the forEach loop : ' , e);
        }, 1000);
     }
     else{
     	console.log('none');
     }
})