Como obter a tag <html> HTML com JavaScript / jQuery?

161

Usando $('html').html()posso obter o HTML dentro da <html>tag ( <head>, <body>, etc.). Mas como posso obter o HTML real da <html>tag (com atributos)?

Como alternativa, é possível obter todo o HTML da página (incluindo doctype <html>, etc.) com jQuery (ou JavaScript antigo simples)?

javascript jquery Justin Stayton
fonte

Respostas:

305

A maneira mais simples de obter o htmlelemento nativamente é:

document.documentElement

Aqui está a referência: https://developer.mozilla.org/en-US/docs/Web/API/Document.documentElement .

UPDATE: Para então pegar o htmlelemento como uma string, você faria:

document.documentElement.outerHTML
Michael
fonte
1
Consulte também esta pergunta para obter mais informações sobre documentElementcompatibilidade do navegador: stackoverflow.com/q/11391827/177710 .
23414 Oliver
Quantas vezes você está se referindo ao elemento html !? Eu não acho que o desempenho deva ser uma preocupação, geralmente. De qualquer forma, esta é realmente a melhor resposta, mas veio MUITO depois do prêmio.
Labs posit
42

Veja como obter o elemento DOM html apenas com JS:

var htmlElement = document.getElementsByTagName("html")[0];

ou

var htmlElement = document.querySelector("html");

E se você quiser usar o jQuery para obter atributos dele ...

$(htmlElement).attr(INSERT-ATTRIBUTE-NAME);
laboratórios positivos
fonte
Sua resposta seria consideravelmente melhor se você pudesse explicar por que isso respondeu à pergunta. Além disso, destaque o código e clique no {}botão ou pressione ctrl + k para marcá-lo como código.
Ben
18

Além de algumas das outras respostas, você também pode acessar o elemento HTML via:

var htmlEl = document.body.parentNode;

Então você pode obter o conteúdo HTML interno:

var inner = htmlEl.innerHTML;

Fazer isso dessa maneira parece ser um pouco mais rápido . Se você está apenas obtendo o elemento HTML, no entanto, document.body.parentNodeparece ser um pouco mais rápido .

Depois de ter o elemento HTML, você pode mexer nos atributos com os métodos getAttributee setAttribute.

Para o DOCTYPE, você pode usar o document.doctypeque foi elaborado nesta pergunta .

doubleswirve
fonte
4
Apenas como uma observação: isso falhará se o corpo ainda não estiver disponível no documento.
DataDink
3
Nesse caso, document.head.parentNodeainda funcionará se houver um elemento principal.
Mahemoff 15/05
15

No jQuery:

var html_string = $('html').outerHTML()

Javascript simples:

var html_string = document.documentElement.outerHTML
berkeleybross
fonte
4

Se você deseja obter um atributo de um elemento HTML com o jQuery, pode usar .attr();

então $('html').attr('someAttribute');lhe dará o valor do someAttributeelementohtml

http://api.jquery.com/attr/

Além disso:

existe um plug-in jQuery aqui: http://plugins.jquery.com/project/getAttributes

que permite obter todos os atributos de um elemento HTML

jordanstephens
fonte
1
O projeto getAttributes () está um pouco antigo agora (fevereiro de 2009).
gligoran