Trabalhando com Elementos do DOM em JavaScript

Ao trabalhar com elementos em uma página web, podemos utilizar tanto a funcionalidade do tipo Node, que representa qualquer nó da página, quanto a funcionalidade do tipo HTMLElement, que representa especificamente os elementos. Ou seja, os objetos HTMLElement são essencialmente os mesmos nós, sendo objetos Node cujo tipo de nó (nodeType) é igual a 1.

Cada elemento em uma página web corresponde a um tipo específico em JavaScript. Estes tipos são subtipos de HTMLElement, que define a funcionalidade básica dos elementos. Vamos listar brevemente os tipos de elementos mais relevantes:

HTMLAnchorElement: <a>
HTMLButtonElement: <button>
HTMLDivElement: <div>
HTMLFormElement: <form>
HTMLHeadingElement: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
HTMLIFrameElement: <iframe>
HTMLImageElement: <img>
HTMLInputElement: <input>
HTMLLIElement: <li>
HTMLOListElement: <ol>
HTMLParagraphElement: <p>
HTMLScriptElement: <script>
HTMLSelectElement: <select>
HTMLSpanElement: <span>
HTMLTableElement: <table>
HTMLTableCellElement: <td>
HTMLTextAreaElement: <textarea>
HTMLUListElement: <ul>

Podemos identificar o tipo de um elemento usando o método Object.getPrototypeOf():

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1 id="header">Home Page</h1>
    <script>
      const header = document.getElementById("header");
      console.log(Object.getPrototypeOf(header)); // HTMLHeadingElement
    </script>
  </body>
</html>

Propriedades de Elementos

O tipo Element fornece uma série de propriedades que armazenam informações sobre o elemento, facilitando a interação e manipulação de conteúdo dinâmico em uma página web.

tagName: retorna a tag do elemento em maiúsculas. Por exemplo, para um elemento <h1>, tagName retornará "H1".
textContent e innerText: são usadas para acessar ou modificar o conteúdo de texto de um elemento. A diferença entre elas é que textContent retorna o texto de todos os elementos, <script>, <style> e textos ocultos, enquanto innerText retorna somente o texto visível.
innerHTML: retorna ou define o conteúdo HTML de um elemento.

Uma das propriedades mais importantes é a propriedade tagName, que retorna o nome da tag do elemento em maiúsculas. Por exemplo, no exmplo anterior, header.tagName retornará "H1".

Gerenciando o Conteúdo HTML

A propriedade innerHTML permite acessar ou modificar o HTML interno de um elemento. Isso inclui as tags, permitindo a inserção de novos elementos HTML dinamicamente.

Por exemplo, se quisermos inserir um <span> com texto colorido dentro de um cabeçalho, podemos usar innerHTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1 id="header">Home Page</h1>
    <script>
      const header = document.getElementById("header");
      // obtendo o HTML do elemento
      console.log(header.innerHTML); // Home Page
      // modificando o HTML do elemento
      header.innerHTML = "<span style='color:navy;'>Hello World</span>";
    </script>
  </body>
</html>

Gerenciando o Conteúdo de Texto

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1 id="header">Home Page</h1>
    <script>
      const header = document.getElementById("header");

      console.log(header.textContent); // Home Page
      header.textContent = "Hello World";
      console.log(header.textContent); // Hello World

      console.log(header.innerText); // Hello World
      header.innerText = "Hello World2";
      console.log(header.innerText); // Hello World2
    </script>
  </body>
</html>

É importante notar que nem textContent nem innerText conseguem mudar ou acessar o código HTML. Por exemplo, essa atribuição mudaria apenas o texto do elemento, mas não alteraria o HTML interno do elemento:

header.innerText = "<span style='color: navy'>Hello World</span>";