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).
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!