javascript - 如何获取CSS网格中的所有元素(包括隐藏元素)

Question

我想使用 Javascript 一次获取所有“可用元素”(检查下面的屏幕截图)，但我无法一次获取所有这些，因为我必须使用滚动条使其余可用服务显示在CSS 网格。

<div class="gridWrapper" data-dojo-attach-point="fromGridWrapper">
   <!-- 
      By default, hidden because the same template file is used whether the "from"
      node supports filtering or not - really no reason for 2 files. 
      => The Filtering sub-class will remove the hidden class and attach functionality.
      -->
   <div class="dijit dijitReset dijitInline dijitLeft dijitTextBox filterAvailableItems" id="widget_dijit_form_TextBox_0" role="presentation" widgetid="dijit_form_TextBox_0">
      <div class="dijitReset dijitInputField dijitInputContainer"><input class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" type="text" tabindex="0" id="dijit_form_TextBox_0" size="20" value=""><span class="dijitPlaceHolder dijitInputField">Filter Available Items</span></div>
   </div>
   <div data-dojo-attach-point="fromNode" id="from_serviceSelect" class="dgrid dgrid-list ui-widget" role="grid" widgetid="from_serviceSelect">
      <div class="dgrid-header dgrid-header-row ui-widget-header">
         <div class="title">Available Items</div>
      </div>
      <div class="dgrid-scroller" style="user-select: none; margin-top: 35px; margin-bottom: 0px;">
         <div class="dgrid-content ui-widget-content">
            <div class="dgrid-preload" style="height: 0px;"></div>
            <div class=" dgrid-row dgrid-row-even ui-state-default dgrid-selected ui-state-active dgrid-focus" id="from_serviceSelect-row-34707" tabindex="0">A Guest is running on Snapshot</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-37729">Active Directory</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-31076">Active Directory 2012 - DRA</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-36616">Active Directory Critical</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-38883">Active DSOs (Cisco)</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-32796">Active Queue Length </div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-31583">AD</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-35072">ADTRAN - Device Health</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-35420">ADTRAN - Memory</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-37393">Agent Status</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-36194">APC PDU</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-31250">APC UPS</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" id="from_serviceSelect-row-35131">APC UPS - Humidity</div>
            <div class=" dgrid-row dgrid-row-odd ui-state-default" id="from_serviceSelect-row-32621">APC UPS - Temperature</div>
            <div class=" dgrid-row dgrid-row-even ui-state-default" 
        <div class="dgrid-preload" style="height: 7315px;"></div>
     </div>
  </div>
  <div class="dgrid-header dgrid-header-scroll dgrid-scrollbar-width ui-widget-header" style="height: 35px;"></div>
  <div class="dgrid-footer dgrid-footer-hidden"></div>

通过更改 CSS 网格属性，我能够多次一次获得所有它们(包括隐藏的)，但它们只是反复试验。谁能帮帮我？

Answer 1

虽然我只看到 HTML 结构，但小部件很可能以异步方式工作，其中仅为当前可见的元素/行生成 div。

如果你真的想模拟用户操作或者你需要测试小部件是否正常工作那么你真的需要这样做，也就是:

1. 发送 Scroll Up/Down 事件，直到没有内容更改(或者如果滚动条属性更改为某些值表示)
2. 收集中间的所有元素
3. 过滤不合格的。

如果这不是必须的(您不进行小部件验证，而是进行 E2E 测试)，那么您可以深入挖掘小部件的内部结构，并且:

1. 如果源代码可用，请更改它以允许一次查询所有值，将它们存储在隐藏的 div 等中
2. 自己向服务器发送 HTTP 请求(这就像是最深刻的见解)

我会继续更改小部件 - 也就是为其实现测试/e2e 模式。这在许多现代软件元素中是必须的