Como obter o documento todo como string em JavaScript
Neste artigo você vai aprender a como pegar o documento todo como string em JavaScript, ou seja, transformar o site em string
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
Às vezes, pode ser útil obter o documento inteiro em uma string com JavaScript, seja para salvar o conteúdo em um arquivo ou para enviá-lo para um servidor.
Neste artigo, vamos explorar algumas maneiras de fazer isso.
Usando o método outerHTML
Uma maneira de obter o documento inteiro em uma string é usar o método outerHTML do elemento raiz (document.documentElement).
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 114 aulas
- 4 projetos
- 9h 18min
Ele retorna a marcação HTML completa do elemento, incluindo todos os seus descendentes.
Por exemplo:
let documentoString = document.documentElement.outerHTML;
Neste exemplo, estamos obtendo a marcação HTML completa do elemento raiz e armazenando em uma variável chamada documentoString.
Isso incluirá todo o conteúdo da página, incluindo o elemento html, head e body.
Usando o método innerHTML
Outra opção é usar o método innerHTML do elemento body (document.body).
Ele retorna a marcação HTML do elemento e de todos os seus descendentes, mas não inclui a marcação do elemento body em si.
Por exemplo:
let documentoString = '<body>' + document.body.innerHTML + '</body>';
Neste exemplo, estamos usando o método innerHTML para obter a marcação HTML do elemento body e de todos os seus descendentes.
Em seguida, estamos concatenando isso com tags body aberta e fechada para obter a marcação completa do documento.
Usando o método cloneNode
Se você deseja obter a marcação HTML completa do documento, incluindo todos os atributos e estilos, pode usar o método cloneNode() para criar uma cópia do elemento raiz e, em seguida, usar o método outerHTML para obter a marcação HTML da cópia.
Por exemplo:
let documentoString = document.documentElement.cloneNode(true).outerHTML;
Neste exemplo, estamos criando uma cópia do elemento raiz com o método cloneNode(), passando true como parâmetro para incluir todos os descendentes também.
Em seguida, estamos usando o outerHTML para obter a marcação HTML da cópia. Isso incluirá todos os atributos e estilos do documento original.
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Em resumo, existem várias maneiras de obter o documento inteiro em uma string com JavaScript.
Você pode usar o método outerHTML do elemento raiz para obter a marcação HTML completa da página, o método innerHTML do elemento body para obter a marcação HTML sem a tag body em si, ou o método cloneNode() se desejar incluir todos os atributos e estilos do documento original.
Qual dessas opções é a mais adequada depende das suas necessidades específicas.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
As diferenças de var, let e const
Como redirecionar para outra página com JavaScript
Exercícios de lógica de programação JavaScript com gabarito
Quais são os melhores exercícios lógica de programação JavaScript? Colocar em prática os exercícios de lógica de programação em JavaScript é de extrema importância para […]
