Manipulação do HTML DOM

O HTML DOM (Document Object Model) é um modelo de objetos de um documento HTML. O DOM de um documento consiste em uma hierarquia de nós, onde cada nó pode ter, opcionalmente, um nó pai (parent) e nós filhos (children).

Um elemento do DOM é um nó que representa uma tag HTML. No DOM, todo elemento (objeto do tipo HTMLElement) é um nó (objeto do tipo Node), mas nem todo nó é um elemento, pois existem outros tipos de nós na hierarquia de um documento DOM, como comentários, blocos de texto, a tag especial <!DOCTYPE>, entre outros.

<!DOCTYPE html>
<html>

<head>
  <style>
    .conteiner {
      /* definir tamanho e deixar no formato de círculo */
      position: absolute;
      font-size: 80pt;
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 100px;
      /* centralizar o conteiner */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      /* centralizar o conteúdo interno */
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
  <script>
    // definir função autoexecutável para não sujar o escopo global
    (() => {
      let contador = 0;

      const mostrar = () => {
        const p = document.querySelector("#contador");
        p.innerText = contador;
        p.style.color = contador >= 0 ? "blue" : "red";
      };

      // iniciar o código somente após o conteúdo ser carregado
      document.addEventListener("DOMContentLoaded", () => {

        const btnAumentar = document.getElementById("btnAumentar");
        const btnDiminuir = document.getElementById("btnDiminuir")

        // criar funções dos botões
        btnAumentar.addEventListener("click", () => {
          contador++;
          mostrar();
        });
        btnDiminuir.addEventListener("click", () => {
          contador--;
          mostrar();
        });

        // disparar o evento click dos botões caso as teclas + ou - sejam usadas
        document.addEventListener("keypress", event => {
          if (event.key === "+") {
            btnAumentar.dispatchEvent(new Event("click"));
          } else if (event.key === "-") {
            btnDiminuir.dispatchEvent(new Event("click"));
          }
        });

        // criar um elemento onde o contador será exibido
        const div = document.createElement("div");
        const p = document.createElement("p");
        div.className = "conteiner";
        p.id = "contador";
        div.appendChild(p);
        document.body.appendChild(div);

        mostrar();
      });
    })();
  </script>
</head>

<body>
  <button type="button" id="btnDiminuir">Diminuir</button>
  <button type="button" id="btnAumentar">Aumentar</button>
</body>

</html>