querySelectorAllは空のノードリストを返します

Question

3つのテキストボックスと1つのradiobuttonlistを持つ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> 

ページの下部にあるjavascript関数のMoveNextメソッドを呼び出しtxtclnumテキストボックス（これはthe first answer to this questionから取られる）（ちょうどために必ずすべての負荷を作るための）：ここでは、完全なマークアップです。 MoveNextには、tabbables.lengthが何であるかを知らせるためのアラートがあります。 .NetコントロールのCssClassがHTMLのclass = "tabbable"を上書きするため、アラートは0を返します。私は、正しい制御に私を取得しますが、フォーカスがそのコントロールに滞在していません

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

を試してみました。どうすればコントロールに焦点を当てることができますか？あなたは「tabbable」クラスを持つ要素を探しているので、もし

Answer 1

その関数がtabbableがクラスであるので、あなたは目の前に期間を置く必要があるあなたがdocument.querySelectorAll(".tabbable")

Answer 2

を使用することになり、その引数としてCSSセレクタを取りますあなたのqueryselectorでそれ、それは次のようになります。

document.querySelectorAll(".tabbable") 

編集：「」だけで、さらに明確化、なしqueryselector <tabbable>のようなhtmlタグを探しています。それは存在しないので、返される長さは0です。

Answer 3

あなたがそれを使用している方法では、document.querySelectorAll("tabbable")はタグ<tabbable>の要素を探しています。あなたがクラスによって照会しようとしているように見えるので、それを示す期間を追加します。

document.querySelectorAll(".tabbable")

あなたがdocument.getElementsByClassName("tabbable")を使用するとき、それは仕事ができるので、あなたが過去にそのメソッドを使用している場合、あなたが混乱して得ることができるどこで見ることができました。

Answer 4

OK、私はばかだと感じます。他の人の将来の参照のために、問題は1）HTMLマークアップで私のtabbableクラスをオーバーライドするコントロールに割り当てられたCsclassがあることです。 2）各コントローラーにAutoPostBack = true（サーバー側のコードが添付されていました）があったため（まだ下のコードを参照してください）、それを処理した後もまだ動作していませんでした。 AutoPostBackがfalseになったので、私のコードは正常に動作します。ここでは、次のとおりです。彼らの助けのためのみんなに

<script type="text/javascript" lang="javascript"> 
function MoveNext(currentElement, btnID) { 
    $(document).ready(function() { 
     var saveButton = document.getElementById(btnID); 
     saveButton.disabled = false; 
     var lastTabIndex = 4; 
     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.getElementsByTagName("*"); //get all tabbable elements 
     for (var i = 0; i < tabbables.length; i++) { //loop through each element 
      if (tabbables[i].tabIndex != null & 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; 
      } 
     } 
    }); 
} 

感謝。