[Résolu] Récupérer le contenu d'un élément sans innerHTML

Bonjour,

J'aimerais savoir comment récupérer le contenu d'un élément quelconque :

<p id="para">
bal bla bla
</p>

Il s'agit bien simplement de texte et pas de html.

Merci
Modifié par clb56 (23 Aug 2006 - 07:34)

Les textes sont toujours des noeuds fils de leurs contenaires (je suis clair ?)
Tu peux aller le chercher par exemple (sachant que elm reprensente ton noeud <p>) comme ca :

elm.firstChild.nodeValue

nORKy a écrit :
Les textes sont toujours des noeuds fils de leurs contenaires (je suis clair ?)

Hélas oui

je viens encore de me prendre un zéro pointé en pré initiation javascript...

... Je suis vraiment une quiche... Je n'arrêtais pas de me dire mais pourquoi

elm.nodeValue

ça marche pas

Donc mille fois merci

Bonjour,

Juste une précision,

a écrit :
Tu peux aller le chercher par exemple (sachant que elm reprensente ton noeud <p>) comme ca :

elm.firstChild.nodeValue

cela est vrai seulement si tu n'as pas d'élément dans ton p, par exemple un lien.
par exemple:

<p>bla bla du texte <a>oh un lien</a> et le texte continue</p>

Dans ce cas, le texte du lien est dans le noeud text de l'élément a.

Sinon, tu peux utiliser l'attribut textContent qui lui te renverra tout le texte mais qui n'est pas implémenté dans tous les navigateurs (Gecko oui, IE non, les autres à tester)

ou bien créer une petite fonction pour vérifier la présence d'éléments dans ton p et parcourir sa branche pour récupérer les node text

a+
Modifié par dunjl (22 Aug 2006 - 22:59)

oui oui dunjl, mais comme je l'indiquais il ne s'agissait bien que de texte.

Bon je me sens mieux, cela reste à finaliser mais je crois bien que je viens de résoudre ce souci qui me prenait vraiment la tête.

Pour faire court il s'agit par rapport au tuto d'Olivier de
1. Associer à chaque vignette le commentaire placé en dur dans un <p>
2. Récupérer en javascript ce commentaire et en faire le title du lien par

liens[ i ].title=liens[ i ].parentNode.lastChild.firstChild.nodeValue;

3. Supprimer le paragraphe commentaire par

var para=liens[ i ].parentNode.lastChild;
liens[ i ].parentNode.removeChild(para);

puis on laisse dérouler le script d'origine.

PS :
j'ai mis des espaces autour du i de liens[ i ] pour éviter un italique intempestif dans le message du forum.

l'équivalent IE de textContent sous firefox s'appelle innerText.
Au cas où, tu peux toujours prendre le innerHTML auquel tu enlèves les balises en appliquant une expression régulière...

QuentinC a écrit :
l'équivalent IE de textContent sous firefox s'appelle innerText.
Au cas où, tu peux toujours prendre le innerHTML auquel tu enlèves les balises en appliquant une expression régulière...

hé ben ça en fait des possibilités !

Mais de fait la réponse de nORKy a bien résolu mon problème.

Merci à tous

Tien finalement j'ai un peu avancé dans la modification que je voulais faire du script d'olivier.

c'est ici :
http://clb56.freezee.org/test_upload/galerie_resultat_quat.php

L'intérêt c'est de regarder cela sans javascript, sans image, au clavier et tout ça.

A priori quel que soit le cas de figure le commentaire des photos est accessible en dur.
. Soit généré par js (<dt> de la liste de définition)
. Soit non généré (<p> associé à chaque vignette)

Je trouve que c'est mieux pour l'accessibilité.

Salut,

Puisqu'on parle d'accessibilité, il faut aussi prévoir les navigateurs qui ne comprennent que partiellement DOM car sinon, le risque est de voir ton script buguer sous ces derniers. Tu dois donc, avant même d'appliquer tes méthodes, tester chacune d'entre elle.
Par exemple, dans ta fonction displayPics() les premières lignes devraient être:

if( !document.getElementById ||
!document.getElementsByTagName ||
!document.createElement ||
!document.createTextNode ) return false;

Ainsi, si l'une de ces méthodes n'est pas interprétée, tu balances la version sans JS.

Pour les méthodes attachées à différents objets, tu crées ton objet puis tu testes la méthode que tu souhaites employer :

var new_dt = document.createElement('dt');
var content_dt=document.createTextNode("blablabla");
if( !new_dt.appendChild ) return false;
new_dt.appendChild(content_dt);

Attention à bien ajouter le var avant chaque variable de manière à éviter les variables globales (sources d'interactions avec d'autres scripts).

Pour finir, tu rajoutes, à la fin de la fonction displayPics(), la ligne "return true;" de manière à éviter un avertissement javascript te disant que la fonction ne renvoie pas toujours une valeur.

Merci, merci...

J'ai vraiment pas le temps aujourd'hui... Concert Prettys n Co répé in situ balance du son sur un matériel que je ne connais pas et tout le toutim...

Mais je regarde ça de près dès demain je pense.

atchao tt le monde

Salut

à koala64,

bon j'ai rajouté ce que tu as indiqué. Pour le test de la méthode appendChild je me suis dit que le test sur sa première occurrence suffisait, soit

var referent = document.getElementById('global_galerie') ;
var new_dl = document.createElement('dl');
new_dl.id="photo";
if( !referent.appendChild ) return false;
referent.appendChild(new_dl);

Donc du coup le javascript complet c'est :

function displayPics()
             {
             if( !document.getElementById || !document.getElementsByTagName || !document.createElement || !document.createTextNode ) return false;
             
             var referent = document.getElementById('global_galerie') ;
             var new_dl = document.createElement('dl');
             new_dl.id="photo";
             if( !referent.appendChild ) return false;
             referent.appendChild(new_dl);
             var new_dt = document.createElement('dt');
             content_dt=document.createTextNode("blablabla");
             new_dt.appendChild(content_dt);
             new_dl.appendChild(new_dt);
             var new_dd = document.createElement('dd');
             new_dl.appendChild(new_dd);
             var new_img = document.createElement('img');
             new_img.id='big_pict';
             new_dd.appendChild(new_img);
             
             
             var photos = document.getElementById('galerie_mini') ;
             var liens = photos.getElementsByTagName('a') ;
             var big_photo = document.getElementById('big_pict') ;
             var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;

             for (var i = 0 ; i < liens.length ; ++i)
                 {
                 liens[ i ].title=liens[ i ].parentNode.lastChild.firstChild.nodeValue;
                 liens[ i ].parentNode.setAttribute("style","float:left; margin-right:3px;");
                 liens[ i ].parentNode.parentNode.setAttribute("style","list-style-type:none; margin-left:0; padding-left:0;");
                 if (document.all) { liens[ i ].parentNode.style.setAttribute("cssText","float:left; margin-right:3px; margin-top:3px;"); liens[ i ].parentNode.parentNode.style.setAttribute("cssText","list-style-type:none; margin-left:0; padding-left:0;"); }
	             var para=liens[ i ].parentNode.lastChild;
	             liens[ i ].parentNode.removeChild(para);
                 lien1=liens[0];
                 big_photo.src=lien1.href;
                 titre_photo.firstChild.nodeValue = lien1.title;
             liens[ i ].onclick = function()
                       {
             big_photo.src = this.href;
             big_photo.alt = this.title;
             titre_photo.firstChild.nodeValue = this.title;
             return false;
                       }
                       
                 }
                 return true;
             }
             
            addToStart(displayPics);

C'est bon là comme ça ?

salut,

oui oui, c'est tout bon.