title: Get only visible text within an html element and child elements
body: <p>I have the following html:</p>
  
  <pre><code>&lt;td&gt;
    &lt;strong&gt;CLERK SHALL ISSUE THE CERTIFICATE OF TITLE&lt;/strong&gt;
    &lt;!-- DUE DATE &amp; COMPLETED DATE --&gt;
    &lt;div class="SmallNotes" hidden="hidden"&gt;
      &lt;i&gt;Due Date:&amp;nbsp;&lt;/i&gt;&lt;br&gt;
      &lt;i&gt;Complete Date:&amp;nbsp;&lt;/i&gt;&lt;br&gt;
    &lt;/div&gt;
    &lt;!-- PARTY NAME --&gt;
    &lt;div class="SmallNotes" hidden="hidden"&gt;
      &lt;i&gt;&lt;/i&gt;&lt;br&gt;
    &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I just want to get the text that is visible in the browser, which in this case is:</p>
  
  <pre><code>CLERK SHALL ISSUE THE CERTIFICATE OF TITLE
  </code></pre>
  
  <p>Now sometimes the divs will not have hidden attributes and will therefore be visible on screen.</p>
  
  <p>My immediate solution is innerText:</p>
  
  <pre><code>cells[6].innerText
  &gt; "CLERK SHALL ISSUE THE CERTIFICATE OF TITLE"
  </code></pre>
  
  <p>However, I run this in a casperjs script and sometimes it picks up the  <code>Due Date:</code> text as well, which should have been hidden. As a result, innerText is not reliable when running inside casperjs. Is there another method to get only the visible text? The jQuery text() method produces all text, including hidden text. innerHTML produces html elements. textContent() works the same way as jQuery's text(). Also, note that sometimes the text will appear directly within the td tags. </p>