11550 sujets

JavaScript, DOM et API Web HTML5

[résolu] Récupérer le code HTML intégral d'un élément

Bonjour à tous !

Mon problème me déroute, car la question est extrêmement bête, mais je ne trouve strictement rien pour y répondre... C'est tout simple, je veux récupérer en Javascript le code HTML intégral d'un élément, i.e. son innerHTML mais également le code des balises mêmes.

Par exemple,
<div id="monDiv" class="maClasseCSS">
lorem ipsum dolor sit amet...
</div>

// en javascript:
maFonctionDesiree("monDiv");

maFonctioneDesiree devrait me retourner le lorem ipsum, mais aussi la balise <div>, soit :
<div id="monDiv" class="maClasseCSS">
lorem ipsum dolor sit amet...
</div>


Je ne trouve aucun attribut ou fonction DOM qui m'autorise à récupérer le code HTML d'un élément même, en plus de son code HTML interne.
Or, j'en ai besoin pour faire de la copie intégrale (et intelligente) d'élements.

Avis aux éclairés, car là je sèche complétement. Smiley sweatdrop
Modifié par xportebois (05 Dec 2006 - 21:50)
bonsoir

le langage (puisque c'est un langage) html est un langage fait de balise
(markup) et interprété par un analyseur (parseur ) .

Ces balises ont une fonction d'indication de données ou d'informations.
On parle de structure d'informations

Une balise est un signe particulier qui permet de récupérer une position dans un document.

Le document rendu au format html n'est pas le meme que le document source (puisque qu'interprété) ....
Le seul moyen est que cette section ne soit pas analysée par le parseur et
traitée comme simple texte en le mettant entre "<![CDATA[ texte non parsé ]] ....et les balises mises dans cette 'section' n'ont plus le role de balise ...

++
Modifié par kzone (05 Dec 2006 - 00:33)
Merci pour vos réponses.

kzone :
J'avais pensé justement à mettre le code HTML dans des quotes ("), afin qu'il s'agisse d'une chaîne de caractères toute simple et non interprétée. Mais j'aurais préféré pour des raisons de convenance pour l'intégration multimédia pouvoir récupérer le code HTML d'un "véritable" élément HTML.

Quant à la source de récupération, je sais que le code HTML fourni est toujours réinterprété par le parser pour construire un bel arbre DOM conforme.
Dans ce cas, la question peut devenir : comment récupérer le code HTML correspondant à la génération d'un noeud DOM, le noeud inclus (et pas seulement ses enfants) ?

QuentinC :
outerHTML me parait aussi uniquement pour IE... du moins sous Firefox il me retourne une valeur indéfinie. Et parentNode.innerHTML exige que le noeud DOM désiré soit "fils unique".

Bon, pour mon problème, je vais donc très probablement stocker la syntaxe HTML de l'élément dans une string.
Mais dans une optique plus large, cela m'étonne vraiment que cela ne soit pas faisable. Comment se fait-il que personne n'ait jamais eu besoin de connaître le code HTML intégral du rendu d'un élément DOM ? Y'aurait-il une astuce pour éviter cela ?
Modérateur
Salut,

Si j'ai bien compris ta question, il te faut passer par document.createDocumentFragment()... Smiley cligne

exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
					  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

div { background-color: red; color: black; }

		/*]]>*/</style>
		<script type="text/javascript">//<![CDATA[
function Init()
{
	var oFrag = document.createDocumentFragment();
	var oP = document.getElementsByTagName('p')[0];
	var oDiv = document.getElementsByTagName('div')[0];
	oFrag.appendChild(oP);
	oDiv.appendChild(oFrag);
}
window.onload = Init;

		//]]></script>
	</head>
	<body>
		<p><strong>lorem ipsum</strong> dolor sit amet...</p>
		<div></div>
	</body>
</html>
Cette fonction extrait un élément, le traite et ici le renvoie au sein de la div. Tu peux aussi y insérer l'arbre que tu veux...
Modifié par koala64 (05 Dec 2006 - 09:13)
J'ai testé et un peu modifié le code (pour mieux me rendre compte) que tu viens de fournir, koala64, et ça m'a l'air d'être une très bonne piste Smiley smile

J'avais parfaitement perdu de vue les méthodes de manipulation d'objets de l'objet document.

Bon, je n'ai pas le temps de voir ça dans la journée (je suis payé à autre chose Smiley rolleyes ), mais je regarde ça plus en détails par la suite.

Merci bien en tout cas, je pense que ça va beaucoup m'aider.
a écrit :

Et parentNode.innerHTML exige que le noeud DOM désiré soit "fils unique".

Ahem effectivement, j'ai pas pensé à ça.
a écrit :

Le seul moyen est que cette section ne soit pas analysée par le parseur


...et le seul moyen est que je sois moins catégorique dans mes réponses Smiley confused Smiley confused

M'enfin je vais également testé le code que tu proposes koala64 ...toujours mes applications SVG ..

PS: Dans les références DocumentFragment il parle aussi de créer un noeud
avec donc 'Document.createDocumentFragment()' et d'uitliser les méthodes
Range.extractContent() ou Range.cloneContents() pour obtenir un
noeud DocumentFragment contenant un fragment d'un document existant ...??
Vous connaissez ces méthodes !?
++
Modérateur
Salut kzone, Smiley smile

Je ne connaissais pas non... Dans le cas, d'éléments multiples, ça semble intéressant en effet. Smiley smile Jusqu'à aujourd'hui, je récupérais tout "à la main".

Ce qui serait intéressant de voir, c'est le support de ces méthodes par les navigateurs...
Bon, petit retour.

La méthode document.createFragment est sympa, de même que document.createElement. Je retiens, ça peut vraiment servir, en combinaison avec appendChild.

Par contre, ça me crée de nouvelles contraintes. Par exemple, si je veux faire un appendChild de <tr> sur un <table>, le navigateur m'a entretemps généré (HTML > DOM > HTML) un <tbody> fiston, et mes nouvelles lignes sont en dehors de ce dernier, donc ça m'oblige à faire l'appendChild sur le <tbody>, etc.

Bref, vu que je cherchais une solution pour ne pas surcharger l'intégration multimédia, s'ils doivent désormais faire gaffe à ce genre de détails, ça ne va pas les aider.

Je vais donc opter pour la méthode de mettre mes éléments dans des string qui seront insérées les unes après les autres (en ne perdant pas de vue qu'elles doivent à chaque fois représenter un code HTML complet et valide).

Merci à tous en tout cas.

(bon, voyons comment changer le sujet en résolu...)
Sujet clos
Aller à