Comment obtenir la balise HTML <html> avec JavaScript / jQuery?

161

L' utilisation $('html').html()je peux obtenir le code HTML dans le <html>tag ( <head>, <body>, etc.). Mais comment puis-je obtenir le HTML réel de la <html>balise (avec les attributs)?

Alternativement, est-il possible d'obtenir l'intégralité du HTML de la page (y compris le doctype <html>, etc.) avec jQuery (ou un ancien JavaScript)?

javascript jquery Justin Stayton
la source

Réponses:

306

Le moyen le plus simple d'obtenir l' htmlélément de manière native est:

document.documentElement

Voici la référence: https://developer.mozilla.org/en-US/docs/Web/API/Document.documentElement .

MISE À JOUR: Pour ensuite saisir l' htmlélément sous forme de chaîne, vous feriez:

document.documentElement.outerHTML
Michael
la source
1
Voir également cette question pour plus d'informations sur la documentElementcompatibilité des navigateurs: stackoverflow.com/q/11391827/177710 .
Oliver
À quelle fréquence obtenez-vous des références à l'élément html !? Je ne pense pas que la performance devrait être un problème, en général. Quoi qu'il en soit, c'est en fait la meilleure réponse, mais elle est intervenue après le prix.
posit labs
42

Voici comment obtenir l'élément DOM html uniquement avec JS:

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

ou

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

Et si vous voulez utiliser jQuery pour en obtenir des attributs ...

$(htmlElement).attr(INSERT-ATTRIBUTE-NAME);
posit labs
la source
Votre réponse serait considérablement meilleure si vous pouviez expliquer pourquoi cela répond à la question. Veuillez également mettre le code en surbrillance et cliquer sur le {}bouton ou appuyer sur ctrl + k pour le marquer comme code.
Ben
18

En plus de certaines des autres réponses, vous pouvez également accéder à l'élément HTML via:

var htmlEl = document.body.parentNode;

Ensuite, vous pouvez obtenir le contenu HTML interne:

var inner = htmlEl.innerHTML;

Le faire de cette façon semble être légèrement plus rapide . Si vous n'obtenez que l'élément HTML, cependant, cela document.body.parentNodesemble être un peu plus rapide .

Une fois que vous avez l'élément HTML, vous pouvez jouer avec les attributs avec les méthodes getAttributeet setAttribute.

Pour le DOCTYPE, vous pouvez utiliser document.doctype, qui a été développé dans cette question .

doubleswirve
la source
4
Juste une note: cela échouera si le corps n'est pas encore disponible sur le document.
DataDink
3
Dans ce cas, document.head.parentNodefonctionnera toujours s'il y a un élément de tête.
mahemoff
15

Dans jQuery:

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

En Javascript clair:

var html_string = document.documentElement.outerHTML
Berkeleybross
la source
4

si vous souhaitez obtenir un attribut d'un élément HTML avec jQuery, vous pouvez utiliser .attr();

donc $('html').attr('someAttribute');vous donnera la valeur someAttributede l'élémenthtml

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

Aditionellement:

il y a un plugin jQuery ici: http://plugins.jquery.com/project/getAttributes

qui vous permet d'obtenir tous les attributs d'un élément HTML

Jordanstephens
la source
1
Le projet getAttributes () est un peu vieux maintenant (février 2009).
gligoran