Entender el DOM y el BOM

El dom es interactuar con el HTML con JS, básicamente

El BOM es el Browser Object Model.

Propiedades y métodos del DOM

var todoslosParrafos = document.getElementsByTagName("p");
//Selecciona todos los elementos con la etiqueta p

var parrafoPorClase = document.getElementByClassName("principal");
//Selecciona los elementos del HTML con la clase principal
var parrafoPorClase = document.getElementByClassName("principal")[0].textContent;

//Para acceder a los estilos de este

todosLosParrafos.style.backgroundColor = "green";
 //podemos generar todos los stiles

//PARA CREAR ETIQUETAS HTML
var foto = document.createElement("img");
foto.src = "foto1.jpg";
foto.name = "foto1";
foto.width = 400px;

//Para agregarlo al HTML
document.body.appendChild(foto);

Propiedades y métodos del BOM

//Usaremos las propiedades el objeto window
<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <h1 class="title">Lorem ipsum</h1>
    <button id="boton">¡Púlsame!</button>
    <div id="container">
        <p class="principal">
            Parrafo 1 <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sapien nulla, tincidunt nec ante
            ut, porta tempus dui. Integer consequat rhoncus tempus. Etiam nulla nisl, mattis a nisl pulvinar, tempor elementum
            lectus. Morbi sed tortor luctus, faucibus dolor eu, ullamcorper arcu. Aenean condimentum quis nisi et malesuada.
            Morbi nec mi et turpis condimentum suscipit quis vel arcu. Vestibulum at mi vitae urna gravida consectetur. Nam
            suscipit ac purus a bibendum.
        </p>

    </div>

    <script>
        //********************************
        //*** Propiedades y métodos del BOM
        var boton = document.getElementById('boton');
        var principal = document.getElementsByClassName('principal')[0];

        console.log('innerHeight: ', window.innerHeight);
        console.log('innerWidth: ', window.innerWidth);

        localStorage.setItem('contenido', 'Código y café es una gran combinación')

        boton.addEventListener('click', function () {
            var contenido = localStorage.getItem('contenido');
            principal.innerHTML = contenido;

            window.history.forward();
             window.history.back();
            window.history.go(3);
        })
    </script>

</body>

</html>