26.03.2025

Obtendo um Documento HTML como uma String com JavaScript

Resposta Rápida

Quer dominar o poder do JavaScript? Se você precisa converter uma página HTML inteira em uma única string, use document.documentElement.outerHTML:

// Simples e direto!
let htmlString = document.documentElement.outerHTML;

Se você também precisar incluir a declaração DOCTYPE nessa string, o seguinte código vai te ajudar a conseguir isso:

// Combinando com a declaração DOCTYPE!
let doctype = new XMLSerializer().serializeToString(document.doctype);
let completeHTML = doctype + "\n" + document.documentElement.outerHTML;

E aí está—aí está um documento HTML completo.

Buscando Significado na String HTML

O HTML é percebido pelo navegador como uma árvore DOM dinâmica e cheia de vida. No entanto, quando usamos document.documentElement.outerHTML, o documento vivo se transforma em texto estático.

const htmlCongeladoNoTempo = document.documentElement.outerHTML;

Explorando XMLSerializer

Vamos dar uma olhada mais de perto no XMLSerializer. É uma ferramenta poderosa capaz de converter o DOM em uma string, sem ignorar elementos exóticos como SVG ou MathML.

let serializer = new XMLSerializer();
let htmlStringEmTechnicolor = serializer.serializeToString(document);

Preservando o DOCTYPE

É crucial preservar a declaração DOCTYPE para o correto renderização da página no modo desejado—modo padrão ou modo quirks.

// DOCTYPE, fique comigo!
let doctypeStr = document.doctype ? new XMLSerializer().serializeToString(document.doctype) : '';
let htmlPreservandoSuasRaizes = doctypeStr + document.documentElement.outerHTML;

Agora sua string contém um documento HTML completo com o DOCTYPE.

Confira Seu Navegador

A tecnologia nunca para; certifique-se de que outerHTML e XMLSerializer funcionem no seu navegador. Recursos como MDN ou CanIUse podem ser úteis para isso.

Visualização

Pegue, por exemplo, o jogo "HTML Completo no Seu Bolso". Capturar toda a marcação de uma página como uma string é como congelar um momento no tempo em uma fotografia.

// Diga "cheese"! 📸
const htmlSnapshot = document.documentElement.outerHTML;

Pense assim:

🏗️ Construção: [Fundação, Paredes, Janelas, Telhado]
📸 Instantâneo: "A construção é capturada em uma string"

Pronto! Você agora tem um projeto em preto e branco do seu site.

Erros Comuns

HTML congelado é apenas um momento no tempo e não mostra o dinamismo da página. Aqui está o que pode escapar:

• Scripts: Não deixe que eles passem despercebidos, pois não são visíveis na versão em string do HTML.

• Entrada do Usuário: Se o usuário digitou algo, esses dados não aparecerão na string congelada.

Web Scraping: Siga com Cuidado

Você pode usar a string HTML para web scraping. Mas lembre-se de respeitar as leis e as políticas de privacidade dos sites.

Depuração com Alerts

Se você precisar verificar algo rapidamente, pode usar alert:

// Vamos lá, navegador!
alert(document.documentElement.outerHTML);

É como se você estivesse fazendo seu JavaScript revelar todos os segredos da página HTML.

Recursos Úteis

1. Document: documentElement property – Web API | MDN — informações do MDN sobre documentElement.
2. JavaScript DOM Document — tudo sobre a API DOM Document da W3Schools.
3. Como obter o HTML do documento inteiro como uma string? - Stack Overflow — discussão no Stack Overflow.
4. XMLSerializer - Web API | MDN — guia sobre como usar o XMLSerializer do MDN.
5. Padrão HTML — documentação HTML pelo WHATWG.
6. Serialização JSON entre navegadores em JavaScript – SitePoint — guia sobre como trabalhar com serialização JSON em JavaScript.
7. .html() | Documentação da API jQuery — a função .html() para entusiastas do jQuery.

Video

Navigation