jquery find() equivalent for javascript

Question

I have three tables and i want to check wheter they contain a specific element, eg a button with the value 'Previous'. I solved it by using the jquery function find and writing a function, but i need to solve this problem without jquery. Is this possible?

 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<=check.length-1; i++) { if (check[i].getAttribute("value") == "Previous") { has_prev_button = true; } } if (has_prev_button) { document.write("<p>The selected table has a Previous button</p>"); } else { document.write("<strong><p style='color:red'>The selected table has NO Previous button</p></strong>"); } }

 table { margin-bottom:40px; border: 1px solid black; } td { border: 2px solid #D8D8D8; width: 70px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table_one"> <tr> <td>Foo</td> <td>Bar</td> <tr> <tr> <td><input type="button" value="Previous"></td> <td><input type="button" value="Next"></td> </tr> </table> <table id="table_two"> <tr> <td>Foo</td> <td>Bar</td> <tr> <tr> <td></td> <td><input type="button" value="Next"></td> </tr> </table> <table id="table_three"> <tr> <td>Foo</td> <td>Bar</td> <tr> <tr> <td><input type="button" value="Previous"></td> <td><input type="button" value="Next"></td> </tr> </table>

Answer 1

Use element.querySelectorAll :

 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.querySelectorAll("input[type=button]"); for (i=0; i<=check.length-1; i++) { if (check[i].value == "Previous") { has_prev_button = true; } } if (has_prev_button) { document.write("<p>The selected table has a Previous button</p>"); } else { document.write("<strong><p style='color:red'>The selected table has NO Previous button</p></strong>"); } }

 table { margin-bottom:40px; border: 1px solid black; } td { border: 2px solid #D8D8D8; width: 70px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table_one"> <tr> <td>Foo</td> <td>Bar</td> <tr> <tr> <td><input type="button" value="Previous"></td> <td><input type="button" value="Next"></td> </tr> </table> <table id="table_two"> <tr> <td>Foo</td> <td>Bar</td> <tr> <tr> <td></td> <td><input type="button" value="Next"></td> </tr> </table> <table id="table_three"> <tr> <td>Foo</td> <td>Bar</td> <tr> <tr> <td><input type="button" value="Previous"></td> <td><input type="button" value="Next"></td> </tr> </table>

Answer 2

Simply use document.querySelectorAll along with the classes spaced apart .

For example, if I want to find the button in the 3rd section and change its background color :

jQuery

$('.my_sections').eq(2).find('.my_button').css('background', 'pink')

Vanilla JS

document.querySelectorAll('.my_sections .my_button')[2].style.background = 'pink'

Similarly, If I wanted to check how many buttons I had of the my_button class:

document.querySelectorAll('.my_sections .my_button').length