title: Puppeteer: manipulating page's DIV's/html elements in order?
body: <p>Learning how to scrape websites with <code>Puppeteer</code>, it occurred to me, as javascript newbie, that the simplest way to work with certain dynamically generated sites would be to create a loop to cycle through some <code>Div</code>'s one by one, and to trigger actions based on their specific attributes (e.g., click all Div's in loop with `class=Clickable)</p>
  
  <p>Most of the <code>Puppeteer</code> examples online go through how to select page elements by certain names/classes, like in <a href="https://stackoverflow.com/questions/48673906/collect-elements-by-class-name-and-then-click-each-one-puppeteer">here</a>, but not how to create such a loop that goes through a subportion of <code>Div</code>'s, and perform actions based on them.</p>
  
  <p>Since I am new to Javascript, if someone would give me advice or pointers on how to do this, I would be extremely grateful.</p>
  
  <p>Example: I want to scrape data from the bottom most layers of certain <code>Div</code>'s, in this case those with <code>section=</code> some variant of the letter C, so I open the following slice of <code>Div</code>'s in the following way, with the plan to extract some data at the end,</p>
  
  <pre><code>&lt;div class="Table" section="A"&gt;
  &lt;div class="Columns" id style="display: none;"&gt;
  &lt;div class="Table" section="B"&gt;
  &lt;div class="Columns" id style="display: none;"&gt;
  
  ## section "C" has been clicked by Puppeteer, 
  ## and so indented part is what is expanded from class=Columns
  &lt;div class="Table" section="C"&gt;
  &lt;div class="Columns" id style&gt;
  
      ## Next sub-section that needs to be gone through
      &lt;div class="Column" section="a"&gt;
      &lt;div class="Rows" id style="display: none;"&gt;
      &lt;div class="Column" section="b"&gt;
      &lt;div class="Rows" id style="display: none;"&gt;
  
      ## Repeating same process one layer deeper now
      &lt;div class="Column" section="c"&gt;
      &lt;div class="Rows" id style&gt;
  
          &lt;div class="Subsection" section="i"&gt;
          &lt;div class="data" id style&gt;
          ............
          ............
          *loop keeps going*
  </code></pre>
  
  <p>I hope my use case is clearer now.</p>