¿Cómo obtener la etiqueta HTML <html> con JavaScript / jQuery?

161

El uso $('html').html()que puedo conseguir el código HTML dentro de la <html>etiqueta ( <head>, <body>, etc.). Pero, ¿cómo puedo obtener el HTML real de la <html>etiqueta (con atributos)?

Alternativamente, ¿es posible obtener todo el HTML de la página (incluido doctype <html>, etc.) con jQuery (o JavaScript antiguo)?

javascript jquery Justin Stayton
fuente

Respuestas:

305

La forma más sencilla de obtener el htmlelemento de forma nativa es:

document.documentElement

Aquí está la referencia: https://developer.mozilla.org/en-US/docs/Web/API/Document.documentElement .

ACTUALIZACIÓN: para agarrar el htmlelemento como una cadena que haría:

document.documentElement.outerHTML
Miguel
fuente
1
Consulte también esta pregunta para obtener más información sobre la documentElementcompatibilidad del navegador: stackoverflow.com/q/11391827/177710 .
Oliver
¿Con qué frecuencia te refieres al elemento html? No creo que el rendimiento deba ser una preocupación, en general. De todos modos, esta es la mejor respuesta, pero llegó MUCHO después del premio.
laboratorios
42

Así es como obtener el elemento DOM HTML simplemente con JS:

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

o

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

Y si quieres usar jQuery para obtener atributos de él ...

$(htmlElement).attr(INSERT-ATTRIBUTE-NAME);
laboratorios positivos
fuente
Su respuesta sería considerablemente mejor si pudiera explicar por qué esto respondió la pregunta. Además, resalte el código y haga clic en el {}botón o presione ctrl + k para marcarlo como código.
Ben
18

Además de algunas de las otras respuestas, también puede acceder al elemento HTML a través de:

var htmlEl = document.body.parentNode;

Entonces podría obtener el contenido HTML interno:

var inner = htmlEl.innerHTML;

Hacerlo de esta manera parece ser marginalmente más rápido . Sin embargo, si solo está obteniendo el elemento HTML, document.body.parentNodeparece ser un poco más rápido .

Después de tener el elemento HTML, puede meterse con los atributos con los métodos getAttributey setAttribute.

Para el DOCTYPE, puede usarlo document.doctype, que fue elaborado en esta pregunta .

Dobleswirve
fuente
44
Solo como una nota: esto fallará si el cuerpo aún no está disponible en el documento.
DataDink
3
En cuyo caso, document.head.parentNodeseguirá funcionando si hay un elemento principal.
mahemoff
15

En jQuery:

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

En Javascript simple:

var html_string = document.documentElement.outerHTML
berkeleybross
fuente
4

si desea obtener un atributo de un elemento HTML con jQuery, puede usar .attr();

entonces $('html').attr('someAttribute');le dará el valor del someAttributeelementohtml

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

Adicionalmente:

Hay un complemento jQuery aquí: http://plugins.jquery.com/project/getAttributes

que le permite obtener todos los atributos de un elemento HTML

jordanstephens
fuente
1
El proyecto getAttributes () es un poco viejo ahora (febrero de 2009).
gligoran