querySelectorAll未定义类

Question

我有这个：

let a1 = document.querySelectorAll('.MapComponent > .card-infowindow > #mapLegendInside')
console.log('a1: ')
console.log(a1)

let a2 = document.querySelectorAll('.MapComponent > .card-infowindow > #mapLegendInside > .esriLegendService')
console.log('a2: ')
console.log(a2)

对于a1控制台，我得到了：

但是对于a2控制台，我得到了一个空数组：

我想选择childrenNode [0]中的内容<-该节点具有类esriLegendService

我该怎么办？为什么我作为选择器放错了？

编辑：

我必须选择内部<td align="left">dato</td>：

<div class="MapComponent">
   <div id="mapLegend" class="card-infowindow">
      <ul>
      </ul>
      <div id="mapLegendInside">
         <div id="mapLegendInside_HeatmapLayer-Comercios-1JI6b" class="esriLegendService">
            <table>
            </table>
            <div id="mapLegendInside_HeatmapLayer-Comercios-1JI6b_fc_HeatmapLayer-Comercios-1JI6b" class="">
               <table class="esriLegendLayerLabel">
               </table>
               <table class="esriLegendLayer">
                  <tbody>
                     <tr>
                        <td>
                           <table>
                              <tbody>
                                 <tr>
                                    <td align="left">dato</td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
               <table class="esriLegendLayer">
               </table>
            </div>
         </div>
         <div id="mapLegendInside_msg" class="esriLegendMsg">
         </div>
      </div>
   </div>
   <div class="mapToolBar mapSlider">
   </div>
</div>

我的起点是.MapComponent

编辑2：我在这里做了一个小提琴：

https://jsfiddle.net/3j5oa8Ls/

我不明白，它在那儿工作，但在我的真实应用中却没有。它是由React制成的...我认为在esriLegendService之后，在console.log（）

之后添加了类