title: jquery find() equivalent for javascript
body: <p>I have three tables and i want to check wheter they contain a specific element, e.g. a button with the value 'Previous'. I solved it by using the jquery function <code>find</code> and writing a function, but i need to solve this problem without jquery. Is this possible?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var t1 = document.getElementById("table_one");
  var t2 = document.getElementById("table_two");
  var t3 = document.getElementById("table_three");
  
  has_prev_button(t1);
  has_prev_button(t2);
  has_prev_button(t3);
  
  function has_prev_button(element)
  {
    var has_prev_button = false;
    var check = $(element).find("input[type=button]");
    
    for (i=0; i&lt;=check.length-1; i++) {
      if (check[i].getAttribute("value") == "Previous") {
        has_prev_button = true;
      }
    }
  
    if (has_prev_button) {
      document.write("&lt;p&gt;The selected table has a Previous button&lt;/p&gt;");
    } else {
      document.write("&lt;strong&gt;&lt;p style='color:red'&gt;The selected table has NO Previous button&lt;/p&gt;&lt;/strong&gt;");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    margin-bottom:40px;
    border: 1px solid black;
  }
  
  td {
    border: 2px solid #D8D8D8;
    width: 70px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table id="table_one"&gt;
    &lt;tr&gt;
      &lt;td&gt;Foo&lt;/td&gt;
      &lt;td&gt;Bar&lt;/td&gt;
    &lt;tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table id="table_two"&gt;
    &lt;tr&gt;
      &lt;td&gt;Foo&lt;/td&gt;
      &lt;td&gt;Bar&lt;/td&gt;
    &lt;tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table id="table_three"&gt;
    &lt;tr&gt;
      &lt;td&gt;Foo&lt;/td&gt;
      &lt;td&gt;Bar&lt;/td&gt;
    &lt;tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Previous"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="Next"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>