Como pegar o title de uma página com JavaScript

Neste artigo você vai aprender a como pegar o title de uma página com JavaScript, vem conferir como é simples!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Em desenvolvimento web, muitas vezes precisamos acessar o título de uma página para realizar alguma manipulação em seu conteúdo.

Isso pode ser necessário para exibir o título em um elemento HTML, ou para realizar alguma operação com o texto.

Neste artigo, vamos mostrar como pegar o title de uma página com JavaScript.

Com algumas técnicas simples, você será capaz de acessar o título de uma página de forma fácil e eficiente.

Utilizando a propriedade document.title

Uma das maneiras mais simples de pegar o title de uma página com JavaScript é utilizando a propriedade document.title.

Essa propriedade retorna o título da página atual.

Por exemplo, imagine que você deseja exibir o título da página em um elemento HTML com o ID “titulo-pagina”.

Para fazer isso, você pode fazer o seguinte:

const tituloPagina = document.title;
const elementoTitulo = document.querySelector('#titulo-pagina');
elementoTitulo.textContent = tituloPagina;

Nesse exemplo, a propriedade document.title é usada para pegar o título da página atual, que é armazenado na variável “tituloPagina”.

Em seguida, o método querySelector() é utilizado para selecionar o elemento com o ID “titulo-pagina”. O resultado dessa operação é armazenado na variável “elementoTitulo”.

Por fim, o título da página é atribuído à propriedade textContent do elemento selecionado.

Utilizando o método getElementsByTagName()

Outra maneira de pegar o title de uma página com JavaScript é utilizando o método getElementsByTagName().

Esse método retorna uma lista de elementos com o nome da tag especificada.

Por exemplo, imagine que você deseja pegar o título da página e exibi-lo em um elemento HTML com o ID “titulo-pagina”.

Para fazer isso, você pode fazer o seguinte:

const tituloPagina = document.getElementsByTagName('title')[0].textContent;
const elementoTitulo = document.querySelector('#titulo-pagina');
elementoTitulo.textContent = tituloPagina;

Nesse exemplo, o método getElementsByTagName() é usado para selecionar o elemento “title” da página.

O resultado dessa operação é armazenado em uma lista, e o título da página é obtido a partir do primeiro elemento dessa lista.

Em seguida, o método querySelector() é utilizado para selecionar o elemento com o ID “titulo-pagina”.

Por fim, o título da página é atribuído à propriedade textContent do elemento selecionado.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Pegar o title de uma página com JavaScript é uma tarefa simples no desenvolvimento web, e existem diversas maneiras de fazer isso.

Neste artigo, mostramos duas das técnicas mais comuns: utilizando a propriedade document.title e o método getElementsByTagName().

Com essas técnicas em mãos, você será capaz de acessar facilmente o título da página para realizar as manipulações que desejar.

Lembre-se de sempre utilizar as melhores práticas de programação para manter seu código organizado e eficiente.

Esperamos que este artigo tenha sido útil para você aprender a pegar o title de uma página com JavaScript.

Se tiver alguma dúvida ou sugestão de tema para os próximos artigos, fique à vontade para nos enviar uma mensagem.

Não se esqueça de compartilhar esse conhecimento com seus amigos e colegas de trabalho que também possam se beneficiar dessas técnicas.

Por fim, não deixe de conferir outros artigos e tutoriais em nosso site, que têm como objetivo ajudar a aprimorar suas habilidades em desenvolvimento web e programação em geral.

Agradecemos por ter lido este artigo e esperamos ter contribuído para o seu aprendizado em pegar o title de uma página com JavaScript.

Até a próxima!

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Como trocar o title da página com JavaScript:

Já que você chegou aqui pra LER o título, vale saber que a mesma propriedade escreve também

Se liga:

document.title = 'Novo título da aba';

Assim que essa linha roda, o texto que aparece na aba do navegador muda

Isso é MUITO usado em tela de chat, carrinho e notificação, quando você quer chamar o usuário que está com a aba em segundo plano

Um exemplo bem comum, juntando ler e escrever:

const original = document.title;
document.title = '(3) ' + original;

Guardou o título antigo numa variável e agora pode devolver ele quando quiser voltar ao normal 🙂

document.title ou getElementsByTagName(‘title’)? Qual usar:

Pergunta justa, já que as duas formas devolvem o mesmo texto

O document.title é o caminho curto: propriedade direta do documento, sem índice, sem textContent, e de quebra ele também escreve

Veredito pro dia a dia: usa document.title

O getElementsByTagName fica como plano B, pra caso específico…

Pegou uma string vazia ou deu erro? Olha o momento em que o script roda:

Tome cuidado com ONDE você colocou esse código, beleza?

Se o script roda lá dentro do head, antes do navegador ter lido a tag title, tem chance real de você pegar uma string vazia e ficar horas achando que o código está errado

Já me ferrei com isso mais de uma vez haha

O jeito simples de evitar: colocar o script no fim do body, ou esperar o documento carregar

document.addEventListener('DOMContentLoaded', () => {
console.log(document.title);
});

Roda assim e o título já está lá, garantido

E em site feito com React, Vue ou outro SPA? (o title muda de rota em rota):

Essa é a parte que envelheceu desde que esse código virou padrão

Quando o post foi escrito, ler o título uma vez no carregamento resolvia quase tudo

Hoje boa parte das telas é single page application: a página não recarrega quando você troca de rota, quem troca o conteúdo é o próprio JavaScript

Ou seja, o título pode ser um na hora que a aplicação sobe e outro logo depois, quando o roteador terminou de montar a tela

Se você ler o document.title cedo demais e guardar numa variável, fica com o título da rota anterior na mão

O que resolve: leia o título no momento em que você precisa dele (dentro do clique, dentro do evento, depois da navegação concluída), não uma vez só no boot da aplicação

A boa notícia é que o document.title continua valendo em qualquer stack, porque é exatamente ele que o navegador mostra na aba 😀

Dá pra pegar o title de outra página, tipo de um link?

Essa é a dúvida que sempre aparece depois, então já respondo

Direto do navegador, em uma página de OUTRO domínio, não dá

O navegador bloqueia a leitura do conteúdo de uma origem diferente por segurança, e isso não é bug, é proteção mesmo

Tanto o document.title quanto o getElementsByTagName só enxergam o documento em que o seu script está rodando

Se a página é do seu próprio domínio e está carregada em um iframe, aí a conversa já é outra, porque a origem é a mesma…