querySelectorAll 返回空节点列表

Question

我有一个带有 3 个文本框和 1 个单选按钮列表的 ASP.Net 页面。4 个控件中的每一个都有

class="tabbable"

在其定义中。这是完整的标记：

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="approvalacctprocess.ascx.cs" Inherits="cmc.workflow.ui.ApprovalAcctProcess" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Register tagprefix="CMC" Tagname="ApprovalComments" src="~/workflow\ui\ApprovalComments.ascx" %>
<script src="../../Scripts/jquery-1.4.1.js"></script>
<asp:Panel ID="pnlApprovalAC" CssClass="STDPANEL" HorizontalAlign="Center" Runat="server" Width="550">
    <TABLE cols="2" width="520">
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Client Number</TD>
            <TD>
                <asp:TextBox id=txtclnum style="VERTICAL-ALIGN: top" Width="300" Runat="server" CssClass="FLDVALUE" TabIndex="0" onchange="MoveNext(this);" Text='<%# Property["clnum"] %>' MaxLength="14" AutoPostBack="True" class="tabbable"></asp:TextBox>&nbsp;
                <asp:RegularExpressionValidator id="rxClNum" ValidationExpression="^[0-9]+[&#9;]*$|Clt Number TBD" ErrorMessage="Client Number consists of up to 14 numbers"
                    ControlToValidate="txtclnum" runat="Server"></asp:RegularExpressionValidator></TD>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Matter Number (5-6 digit)</TD>
            <TD>
                <asp:Label id=lbclnum style="TEXT-ALIGN: right" Width="140" Runat="server" Text='<%# Property["clnum"] %>' Font-Name="verdana" Font-Size="x-small">
                </asp:Label>-
                <asp:TextBox id=txtmmatter Width="150" Runat="server" CssClass="FLDVALUE" TabIndex="1" Text='<%# Property["mmatter"] %>' MaxLength="6" AutoPostBack="True" class="tabbable"></asp:TextBox>&nbsp;
            </TD>
        <TR>
            <TD colSpan="2">
                <HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
            </TD>
        </TR>
        <tr>
            <td class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colspan="2"><asp:Label runat="server" ID="lbExistingClientQuestion" Text="Is there an Engagement Letter on file for this client?" Visible="false" />&nbsp;&nbsp;
        <asp:Label runat="server" ID="lbUDFRetainerLetter" Text='<%# Property["RetainerLetter"] %>' Visible="false" /></td>
        </tr>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colSpan="2">Has a
                retainer/engagement letter been submitted and approved by Charlotte Fischman?</TD>
        </TR>
        <TR>
            <TD colSpan="2">
                <asp:RadioButtonList id="rblRetLtrReturned" TabIndex="2" Runat="server" CssClass="RADIOBUTTONLIST" RepeatDirection="Horizontal" class="tabbable"
                    RepeatLayout="Table" RepeatColumns="1" width="300" AutoPostBack="True">
                    <asp:ListItem Value="0">No</asp:ListItem>
                    <asp:ListItem Value="1">Yes</asp:ListItem>
                </asp:RadioButtonList>
                <asp:Label id="lblnoretainerltrneeded" Runat="server" CssClass="SMALLNOTE" Text="(This is an existing client and the matter is in an existing area of law.&#13;&#10;&#9;&#9;&#9;&#9;&nbsp;&nbsp; A retainer letter may not be needed.)"
                    Font-Size="xx-small" Visible="False" ForeColor="red"></asp:Label></TD>
        </TR>
        <TR>
            <TD colSpan="2">
            </TD>
        </TR>
        <TR>
            <td class="FLDLABEL" style="VERTICAL-ALIGN: top" colSpan="2" width="500">Reason for Not Submitting an Retainer/Engagement Letter for Approval<SPAN style="FONT-WEIGHT: bold; COLOR: red">
                                *</SPAN>&nbsp;
            <asp:Label runat="server" CssClass="SMALLNOTE" Text="(Required if no retainer letter submitted and not an existing client)" Font-Size="XX-Small" ForeColor="Red" /></td>
        </TR>
        <TR>
            <td colspan="2">
                <asp:TextBox Width="500" runat="server" TextMode="MultiLine" TabIndex="3" CssClass="FLDVALUE" ID="txtReason" MaxLength="500" Text='<%# Property["Reason"] %>' AutoPostBack="True" class="tabbable" />

            </td>
        </TR>
        <TR>
            <TD colSpan="2">
                <HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
            </TD>
        </TR>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Comments</TD>
            <TD>
                <asp:TextBox id="txtComments" style="VERTICAL-ALIGN: top" Width="300" TabIndex="4" Runat="server" CssClass="FLDVALUE"
                    MaxLength="450" Rows="5" TextMode="MultiLine" Text='<%# Property["AcctgComment"] %>' AutoPostBack="True" class="tabbable"></asp:TextBox></TD>
        </TR>
    </TABLE>
    <TABLE class="STDPANEL" style="VERTICAL-ALIGN: middle" height="50" width="550">
        <TR>
            <td align="center">
                <input id="btnSaveACProperty" runat="server" name="btnSaveACProperty" 
                    onserverclick="OnSave_Click" type="submit" value="Save Status and Comment">
                    &nbsp;&nbsp;
                    <input id="btnResetACProperty" runat="server" name="btnResetACProperty" 
                        type="reset" value="Cancel">
                    </input>
                </input>
            </td>
        <tr>
            <td align="left">
                <asp:ValidationSummary ID="valsum" runat="server" BorderColor="" 
                    BorderStyle="Solid" BorderWidth="2" CssClass="VALIDATORSUM" DisplayMode="List" 
                    Font-Bold="True" ForeColor="red" 
                    HeaderText="  Some errors occurred in your input.  Please correct them:&lt;br&gt; " 
                    ShowMessageBox="True" ShowSummary="True" Width="500" />
            </td>
        </tr>
    </TABLE>
</asp:Panel>
<script type="text/vbscript">

</script>
<script type="text/javascript" lang="javascript">
    function MoveNext(ele) {
        $(document).ready(function () {
            var lastTabIndex = 4;
            var currentElementID = ele.id; // ID set by OnFocusIn
            var currentElement = document.getElementById(currentElementID);
            var curIndex = currentElement.tabIndex; //get current elements tab index
            if (curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
                curIndex = 0;
            }
            var tabbables = document.querySelectorAll("tabbable"); //get all tabbable elements
            alert(tabbables.length);
            for (var i = 0; i < tabbables.length; i++) { //loop through each element
                if (tabbables[i].tabIndex == (curIndex + 1)) { //check the tabindex to see if it's the element we want
                    tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
                    break;
                }
            }
        });
    }
</script>

文本框 txtclnum 调用页面底部的 javascript 函数 MoveNext（只是为了确保所有内容以正确的顺序加载）（这是从这个问题的第一个答案中获取的）。MoveNext 中有一个警告，告诉我 tabbables.length 是什么。警报返回 0，因为 .Net 控件中的 CssClass 覆盖了 HTML 中的 class="tabbable"。我试过了

var tabbables = document.getElementsByTagName("*");

这让我得到了正确的控制，但重点并不停留在那个控制上。如何将注意力集中在控件上？

Answer 1

该函数将 CSS 选择器作为其参数，因此如果您正在寻找具有“tabbable”类的元素，您将使用 document.querySelectorAll(".tabbable")