Manipulando o DOM: como selecionar elementos HTML usando JavaScript

Por: Angelo Luis Ferreira | 13/04/2023 Acessos: 3.044

Objetivo

Neste tutorial, você aprenderá as principais formas de selecionar elementos do DOM usando JavaScript. Esses elementos podem incluir elementos HTML, atributos HTML e textos inseridos em um documento HTML.

Para modificar dinamicamente esses elementos, atributos ou textos de um documento HTML, é essencial selecioná-los previamente. A seguir, apresentamos as principais maneiras de fazer isso em JavaScript:

1. Usando o método document.getElementById()

2. Usando o método document.getElementsByClassName()

3. Usando o método document.getElementsByTagName()

4. Usando o método document.querySelector()

5. Usando o método document.querySelectorAll()

6. Acessando elementos filhos, usando a propriedade children.

Definições

O que é DOM?

O DOM (Document Object Model) é o modelo estrutural de um documento HTML gerado pelo navegador. Ele foi definido e padronizado pelo W3C ( World Wide Web Consortium) para representar e interagir com qualquer documento HTML.

O DOM é uma representação orientada a objetos de uma página da web, que pode ser modificada dinamicamente por meio de uma linguagem de script, como o JavaScript. Quando a página é carregada, o navegador cria o documento e a interface DOM, que o JavaScript usa para se conectar ao HTML.

Podemos pensar no DOM como uma árvore de nós, onde cada nó representa uma parte do documento, ou seja, um elemento HTML. Cada elemento pode ter atributos, estilos, textos ou ainda outros elementos.

O primeiro elemento na estrutura do DOM é o objeto window, que representa a janela do navegador. O document é o objeto global no topo da estrutura do DOM e tem como elemento raiz a tag html. Todos os outros elementos descendem dela através das suas ramificações (branches), seguindo a estrutura HTML da página web.

1. Selecionar elementos HTML usando o objeto document.getElementById()

1.1. O método getElementById() retorna um elemento DOM cujo valor do seletor "id" foi especificado.

1.1.1. Não deve existir dois ou mais elementos em uma página com o mesmo valor de um seletor "id". Mas, caso exista, o método getElementById () retorna o primeiro elemento do código-fonte.

1.1.2. Este método é um dos métodos mais comuns no HTML DOM, e é usado quase que toda vez que você deseja manipular, ou obter informações a partir de um elemento HTML.

1.2. Sintaxe:

document.getElementById(elementID)

1.2.1. Onde:

elementId = O valor do seletor id especificado para um elemento DOM.

1.3. Exemplos de utilização:

1.3.1. Acessa e retorna o elemento DOM cujo o valor do seletor "id" foi especificado.

let elemento = document.getElementById("idElemento")

1.3.1.1. Caso o seletor "id" especificado não exista, o retorno do método será null.

1.3.2. Retorna o conteúdo HTML do elemento DOM selecionado pelo seletor "id".

let conteudo = document.getElementById("idElemento").innerHTML

1.3.2.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

1.4. Exemplo prático:

1.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do elemento DOM, cujo valor do seletor id = "demo":

HTML

<p id="demo">Sou o conteúdo do elemento DOM selecionado</p>

JavaScript

const content = document.getElementById("demo").innerHTML

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (291).

1.4.3. Explicando o código JavaScript:

a. Quando acessamos o elemento DOM pelo método getElementById(), retornamos o valor o elemento DOM especificado.

const element = document.getElementById("demo")

b. No exemplo acima a variável element receberá o elemento DOM especificado pelo seletor id = "demo".

b.1. Portanto, element = [object HTMLParagraphElement]

c. Quando usamos a propriedade innerHTML retornamos o valor do conteúdo HTML do elemento DOM especificado:

const content = document.getElementById("demo").innerHTML

d. O valor retornado para a variável content = "Sou o conteúdo do elemento DOM selecionado".

2. Selecionar elementos HTML usando o objeto document.getElementsByClassName()

2.1. O método getElementsByClassName() retorna uma lista de elementos DOM que possuem o mesmo valor especificado para o seletor "class".

2.1.1. Essa lista de elementos DOM também é chamada de HTML Collection.

2.1.2. A lista de objetos do HTML Collection retornada se apresensta na forma de um array somente para leitura, pois não pode ser alterado. Portanto, é possível selecionar o elemento do array que se deseje manipular, utilizando apenas o seu índice numérico. Lembrando que o índice numérico de um array inicia em zero.

2.1.3. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

2.2. Sintaxe:

document.getElementsByClassName(elementClass)

2.2.1. Onde:

elementClass = O valor do seletor "class" especificado para cada elemento DOM.

2.3. Exemplos de utilização:

2.3.1. Seleciona e retorna todos elementos DOM selecionados pelo seletor "class" (HTML Collection - lista na forma de um array somente para leitura).

let elementos = document.getElementsByClassName("elementClass")

2.3.2. Acessa e retorna o primeiro elemento DOM de uma lista de elementos (Class Collection), cujo o valor do seletor "class" foi especificado.

let elemento = document.getElementsByClassName("elementClass")[0]

2.3.3. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection), cujo o valor do seletor "class" foi especificado.

let numb = document.getElementsByClassName("elementClass").length

2.3.3.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

2.3.4. Retorna o conteúdo HTML do primeiro elemento DOM de uma lista selecionada, cujo o valor do seletor "class" foi especificado.

let conteudo = document.getElementsByClassName("elementClass")[0].innerHTML

2.3.4.1. Observe que o índice do primeiro elemento da lista (HTML Collection) começa em zero.

2.3.4.1.1. Portanto, i = n - 1, onde:  i = índice e n = elemento que se quer selecionar: Ex.: O índice do segundo elemento será igual a 1, pois i = 2 - 1.

2.3.4.2. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

2.4. Exemplo prático:

2.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos, cujo o valor do seletor class = "demo". Vamos retornar também o número de elementos (HTML Collection) selecionados mediante seletor "class", usando a propriedade length.

HTML

<ul>
    <li class="demo">Termo 1</li>
    <li class="demo">Termo 2</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM selecionados (HTML Colection)
const elements = document.getElementsByClassName("demo"); 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (292).

2.4.3. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pelo método getElementsByClassName, retornamos uma lista de elementos DOM identificados pelo seletor "class" (classe).

const elements = document.getElementsByClassName("demo")

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo seletor "class".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

3. Selecionar elementos HTML usando o objeto document.getElementsByTagName()

3.1. O método getElementsByTagName() retorna uma lista de elementos DOM que possuem o mesmo valor especificado para o nome do elemento HTML (tag name).

3.1.1. Essa lista de elementos DOM também é chamada de HTML Collection.

3.1.2. A lista de objetos do HTML Collection retornada se apresenta na forma de um array somente para leitura, pois não pode ser alterado. Portanto, é possível selecionar o elemento do array que se deseje manipular, utilizando apenas o seu índice numérico. Lembrando que o índice numérico de um array inicia em zero.

3.1.3. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

3.2. Sintaxe:

document.getElementsByTagName(tagName)

3.2.1. Onde:

tagName = O nome do elemento DOM.

3.3. Exemplos de utilização:

3.3.1. Seleciona e retorna todos elementos DOM selecionados pelo nome do elemento (HTML Collection).

let elementos = document.getElementsByTagName("tagName")

3.3.2. Acessa e retorna o primeiro elemento DOM de uma lista de elementos (Class Collection), cujo o nome do elemento foi especificado.

let elemento = document.getElementsByTagName("tagName")[0]

3.3.3. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection), cujo o nome do elemento foi especificado.

let numb = document.getElementsByTagName("tagName").length

3.3.3.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

3.3.4. Retorna o conteúdo HTML do primeiro elemento DOM de uma lista selecionada, cujo o elemento HTML foi especificado.

let conteudo = document.getElementsByTagName("tagName")[0].innerHTML

3.3.4.1. Observe que o índice do primeiro elemento da lista (HTML Collection) começa em zero.

3.3.4.1.1. Portanto, i = n - 1, onde:  i = índice e n = elemento que se quer selecionar: Ex.: O índice do segundo elemento será igual a 1, pois i = 2 - 1.

3.3.4.2. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

3.4. Exemplo prático:

3.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos, cujo o nome do elemento tagName = "li". Vamos retornar também o número de elementos (HTML Collection) selecionados mediante seletor "class", usando a propriedade length.

HTML

<ul>
    <li>Termo 1</li>
    <li>Termo 2</li>
    <li>Termo 3</li>
    <li>Termo 3</li>
    <li>Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM selecionados (HTML Colection)
const elements = document.getElementsByTagName("li"); 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

 Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (293).

3.4.3. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pelo método getElementsByTagName, retornamos uma lista de elementos DOM identificados pelo nome do elemento  tag name = "li".

const elements = document.getElementsByTagName("li")

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo tag name "li".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

4. Selecionar elementos HTML usando o objeto document.querySelector()

4.1. O método querySelector() retorna o primeiro elemento DOM correspondente à um seletor CSS que pode ser: id, classe, atributo, valor do atributo, estilo CSS, tag name, conteúdo de texto, etc.

1.1.1. Para múltiplos seletores CSS, utilize vírgula para separá-los.

1.1.2. Caso não encontre nenhum seletor CSS especificado, o retorno do método será null.

1.1.3. Este método é o mais versátil para manipular ou obter informações a partir de um elemento DOM, pois pode ser utilizado em qualquer elemento: id, classe, tag name, estilo CSS, atributo ou conteúdo de texto.

4.2. Sintaxe:

document.querySelector(seletorCSS)

4.2.1. Onde:

seletorCSS = Qualquer elemento seletor.

4.3. Exemplos de utilização:

4.3.1. Acessa e retorna o elemento DOM cujo seletor "id" foi especificado. (Seletor id)

let elemento = document.querySelector("#id")

4.3.1.1. Utilize hashtag (#) antes do nome do seletor "id".

4.3.2. Acessa e retorna o primeiro elemento DOM cujo seletor "classe" foi especificado. (Seletor classe)

let elemento = document.querySelector(".classe")

4.3.2.1. Utilize ponto (.) antes do nome do seletor "classe".

4.3.3. Acessa e retorna o primeiro elemento DOM cujo o seletor tag name foi especificado. (Seletor tag name HTML)

let elemento = document.querySelector("tagName")

4.3.3.1. Exemplos: tagName = "p" (parágrafo)

                              tagName = "p.demo" (parágrafo que contem a classe demo).                          

4.3.4. Acessa e retorna o primeiro elemento DOM cujo seletor atributo de um elemento HTML foi especificado. (Seletor atributo)

let elemento = document.querySelector("[atributoName]")

4.3.4.1. Utilize chaves ([]) antes e depois do nome do atributo.

4.3.3.1. Exemplos: seletor = "[target]" (atributos denominados target)

                            seletor = "a[tartet]" (atributos target específicos para a tagname a).

                           seletor = "a.demo[target]" (atributos targets específicos para a tagname a que foi definida pela classe demo).

4.3.5. Retorna o conteúdo HTML do elemento DOM selecionado pelo método querySelector().

let conteudo = document.querySelector("seletor").innerHTML

4.3.5.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

4.4. Exemplo prático:

4.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do elemento DOM, cujo valor do seletor id = "demo", usando o método querySelector():

HTML

<p id="demo">Sou o conteúdo do elemento DOM selecionado</p>

JavaScript

const content = document.querySelector("#demo").innerHTML

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (294).

4.4.2. Explicando o código JavaScript:

a. Selecionamos o elemento DOM pelo método querySelector(), cujo valor do seletor id = "demo".

b. Observe que para especificar um determinado seletor id pelo método querySelector(), precisamos acrescentar o hashtag (#) antes do nome do seletor.

c. Usando a propriedade innerHTML retornamos o valor do conteúdo HTML do elemento DOM especificado.

d. O valor retornado para a variável content = "Sou o conteúdo do elemento DOM selecionado".

5. Selecionar elementos HTML usando o objeto document.querySelectorAll()

 5.1. O método querySelectorAll() retorna uma lista de elementos DOM que correspondente à um ou mais seletores CSS.

5.1.1. Seletores CSS selecionam elementos HTML com base em id, classes, tipos, atributos, valores de atributos, estilos CSS, tag name, conteúdo de texto, etc.

5.1.2. Essa lista de elementos DOM também é chamada de HTML Collection.

5.1.3. A lista de objetos do HTML Collection retornada se apresenta como um array somente para leitura, pois não pode ser alterado. Portanto, é possível selecionar o elemento do array que se deseje manipular, utilizando apenas o seu índice numérico. Lembrando que o índice numérico de um array inicia em zero.

5.1.4. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

5.1.5. Para múltiplos seletores, separe cada seletor com uma vírgula.

5.2. Sintaxe:

5.2.1. Seleciona e retorna todos elementos DOM selecionados pelo seletor CSSS (HTML Collection).

document.querySelectorAll(seletorCSS)

5.2.1. Onde:

seletorCSS = Qualquer elemento seletor.

5.3. Exemplos de utilização:

5.3.2. Acessa e retorna o primeiro elemento DOM cujo seletor "classe" foi especificado. (Seletor classe)

let elemento = document.querySelectorAll(".classe")[0]

5.3.2.1. Utilize ponto (.) antes do nome do seletor "classe".

5.3.3. Acessa e retorna o primeiro elemento DOM cujo o seletor tag name foi especificado. (Seletor tag name HTML)

let elemento = document.querySelectorAll("tagName")[0]

5.3.3.1. Exemplos: tagName = "p" (parágrafo)

                              tagName = "p.demo" (parágrafo que contem a classe demo).                          

5.3.4. Acessa e retorna o primeiro elemento DOM cujo seletor atributo de um elemento HTML foi especificado. (Seletor atributo)

let elemento = document.querySelectorAll("[atributoName]")[0]

5.3.4.1. Utilize chaves ([]) antes e depois do nome do atributo.

5.3.3.1. Exemplos: seletor = "[target]" (atributos denominados target)

                             seletor = "a[tartet]" (atributos target específicos para a tagname a).

                            seletor = "a.demo[target]" (atributos targets específicos para a tagname a que foi definida pela classe demo).

5.3.5. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection), cujo o nome do seletor foi especificado.

let numb = document.querySelectorAll("seletor").length

5.3.5.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

5.3.6. Retorna o conteúdo HTML do primeiro elemento DOM selecionado pelo método querySelectorAll().

let conteudo = document.querySelectorAll("seletor")[0].innerHTML

5.3.6.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

5.4. Exemplo prático:

5.4.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos, cujo o valor do seletor class = "demo". Vamos retornar também o número de elementos (HTML Collection) selecionados mediante seletor "class", usando a propriedade length.

HTML

<ul>
    <li class="demo">Termo 1</li>
    <li class="demo">Termo 2</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM selecionados (HTML Colection)
const elements = document.getElementsByClassName("demo"); 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (295).

5.4.2. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pelo método getElementsByClassName, retornamos uma lista de elementos DOM identificados pelo seletor "class" (classe).

const elements = document.getElementsByClassName("demo")

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo seletor "class".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

6. Acessando elementos filhos, usando a propriedade children

 6.1. A propriedade children retorna uma lista de elementos DOM que que contém todos os elementos filhos (child) do elemento HTML no qual foi identificado.

6.1.1. Essa lista de elementos DOM também pode ser chamada de HTML Collection.

6.1.2. A lista de objetos do HTML Collection se apresenta como um array somente para leitura de elementos filhos (child). Podemos selecionar o elemento que se deseja manipular utilizando o seu índice numérico. Lembramos que o índice numérico de um array inicia sempre em zero. Obs.: Uma HTMLCollection é sempre atualizada quando o documento HTML for modificado.

6.1.3. Os elementos da lista de objetos do HTM Collection são classificados pela ordem em que aparecem no documento HTML.

6.1.4. Para saber mais como usar a propriedade children, leia o artigo: Usando a propriedade children no JavaScript - Manipulação de elementos HTML

 6.2. Exemplos de utilização:

6.2.1. Seleciona e retorna a lista de todos elementos filhos a partir de um elemento pai

let elementoFilho = document.getElementById("elementoPai").children

 6.2.1.1. Observe que para obtermos os elementos filhos precisamos primeiro selecionar o elemento pai. Para isso, podemos utilizar qualquer método que mostramos neste artigo, sendo os mais indicados:

- document.getElementById("elementoPai")

- document.querySelector("#elementoPai")

6.2.2. Retorna o número de elementos DOM de uma lista de elementos (HTML Collection) de elementos filhos a partir de um elemento pai

let numb = document.getElementById("elementoPai").children.length

6.2.2.1. A propriedade length retorna o número de elementos da lista selecionada (HTML Collection).

6.2.3. Retorna o conteúdo HTML do primeiro elemento DOM acessado pelo elemento filho a partir de um elemento pai

let conteudo = document.getElementById("elementoPai").children[0].innerHTML

6.2.3.1. A propriedade innerHTML define ou retorna o conteúdo HTML de um elemento DOM selecionado.

6.3. Exemplo prático:

6.3.1. Como exemplo, vamos acessar e retornar o conteúdo HTML do primeiro elemento DOM de uma lista de elementos de uma lista de elementos filhos da tag <ul> definida pela id = "elementoPai". Vamos retornar também o número de elementos (HTML Collection) selecionados, usando a propriedade length.

HTML

<ul id="elementoPai">
    <li class="demo">Termo 1</li>
    <li class="demo">Termo 2</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 3</li>
    <li class="demo">Termo 4</li>
</ul>

JavaScript

// seleciona e retorna os elementos DOM filhos a partir do elemento pai (HTML Colection)
const elements = document.querySelector("#elementoPai").children; 
    
// calcula o número de elemntos DOM selecionados
const number = elements.length
    
// retorna o conteúdo HTML do elemento selecionado (primeiro elemento)
const content = elements[0].innerHTML

Veja o resultado do exemplo no Squids Editor: Abrir Squids Editor (296).

6.3.2. Explicando o código JavaScript:

a. Quando acessamos os elementos DOM pela propriedade children, retornamos uma lista de elementos DOM filhos a partir de um elemento pai, que no exemplo é a tag <ul> identificada pelo id = "elementoPai".

a.1. Para selecionarmos o elemento DOM pai, utilizamos o método querySelector("#elementoPai").

const elements = document.querySelector("#elementoPai").children; 

b. Usamos a propriedade lenght para retornar o número de elementos da lista elements determinada acima:

const number = elements.length

c. Retornamos o conteúdo do primeiro elemento da lista de elementos identificados pelo seletor "class".

c1. Observe que utilizamos o índice "0" do HTM Collection para retornar o primeiro elemento da lista. Da mesma forma, o índice "1" retorna o segundo elemento da lista, e assim sucessivamente.

const content = elements[0].innerHTML

d. Usamos a função alert() para exibir os valores retornados e atribuídos na variável results na forma de string.

d1. Observe que utilizamos Template String concatenar a string com as variáveis number e content (leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno).

const results = `  
    Nº de elementos DOM com a classe demo: ${number}
    
    Conteúdo HTML do elemento DOM selecionado: ${content}    
    `            
alert(results)

e. Veja abaixo a imagem com os resultados:

REFERÊNCIA JAVASCRIPT

1. [getElementById()] >> Sintaxe e exemplos - MDN Web Docs.

2. [getElementsByClassName()] >> Sintaxe e exemplos - MDN Web Docs.

3. [getElementsByTagName()] >> Sintaxe e exemplos - MDN Web Docs.

4. [querySelector()] >> Sintaxe e exemplos - MDN Web Docs.

5. [querySelectorAll()] >> Sintaxe e exemplos - MDN Web Docs.

6. [element.children] » Sobre a propriedade children - MDN Web Docs.

7. [element.innerHTML] » Sobre a propriedade innerHTML - MDN Web Docs.

8. [string.length] >> Sintaxe e exemplos - MDN Web Docs.

9. [HTMLCollection] » Sobre a interface HTMLCollection - MDN Web Docs.

10. [HTMLCollection.length] » Sobre a propriedade HTMLCollection.lenght - MDN Web Docs.

11. [element.tagName] » Sobre a propriedade tagName - MDN Web Docs.