the dom 2

by Breathe Code

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body onload="onloadFunction();">
        <div id="myDIV">
            <h3>A h3 element</h3>
            <h2>A h2 element</h2>
            <h4 class="random">A h4 element</h4>
        </div>
        <table id="people" class="table">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>July</td>
                    <td>Dooley</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>Molly</td>
                    <td>Bradley</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Dickends</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

JavaScript

var x = document.getElementById("myDIV");
x.querySelector(".random").style.background = "green";
x.querySelector("h3,h2").style.background = "blue";

var tableElm = document.getElementById("people");
var trArray = tableElm.querySelectorAll("tr");
trArray[3].style.background = "red";