DOM manipulation

Example

This is an h5 element with no class

This is an h5 element with the class "red"

This is an h4 element with the class "red" and the id "highlight"

This is an h4 element with no class, the second clause is a span element

This is an h5 element with no class, the second clause is a span element

This is another h5 element with class "red", the second clause is a span element

Source code

window.onload = function() {
    "use strict";

    // Put a border around all h5 elements
    let elems = document.getElementsByTagName('h5');
    let elem;
    let i;
    for (i=0; i<elems.length; i++) elems[i].style.border = "1px solid black";

    // Make the font red for all elements with a class of "red"
    elems = document.getElementsByClassName('red');
    for (i=0; i<elems.length; i++) elems[i].style.color = "#ff0000";

    // Make the background yellow for the one element with an id of "highlight"
    elem = document.getElementById('highlight');
    elem.style.backgroundColor = "#ffff00";

    // Make the font italicized and bold for all span elements inside h5 elements
    elems = document.querySelectorAll('h5 span');
    for (i=0; i<elems.length; i++) {
        elems[i].style.fontWeight = "bold";
        elems[i].style.fontStyle = "italic";
    }
};