Access the inner DIV with JavaScript

Question

If I have the following HTML:

<tr class="class">
    <td>
       <div>
       </div>
    </td>
</tr>

How can I access the div with JavaScript knowing that all the styles on the div are applied like this: .class td div { ... } ?

Answer 1

For modern browsers querySelector() is the way to go:

var html = document.querySelector(".class td div").innerHTML;

For accessing multiple elements you can use querySelectorAll():

var elements = document.querySelectorAll(".class td div");
for (var i = 0, len = elements.length; i < len; i++) {
    // elements[i]. ...
}