[résolu] Supprimer le contenu textuel d'une balise sans innerHTML

Salut,
est-il possible de supprimer le contenu textuel d'une balise sans utiliser innerHTML, en n'utilisant que DOM ?
Modifié par Olivier (21 Apr 2006 - 15:16)

Bonjour Olivier,

La question m'étonne venant de toi mais bon...

J'ai testé ceci et ça marche

<div id="toto">blablabla</div>

<a href="#" onclick="document.getElementById('toto').firstChild.nodeValue='';">go</a>

Mais peut être que je n'ai pas compris la question

le plus simple est de faire:

noeud.firstChild.data='';

Arf, j'avais oublié un firstChild, c'est pour ça...

Mais pour mon truc, ça ne marche pas quand même Je ne comprend pas pourquoi là...

function starRate()
{
	var myUl = document.getElementById('rate');
	if (myUl) {
		var lis = myUl.getElementsByTagName('li');
		for (var i = 0; i < lis.length; ++i) {
			lis[ i].firstChild.innerHTML = ''; // fonctionne
			//lis[ i].firstChild.firstChild.nodeValue = ''; // ne fonctionne pas
			//lis[ i].firstChild.firstChild.data = ''; // ne fonctionne pas
			lis[ i].style.margin = '0';
			var img = document.createElement('img');
			img.setAttribute('src', 'img/ico-unrate.png');
			img.setAttribute('alt', i+1);
			img.setAttribute('title', 'Mettre '+(i+1)+' sur '+lis.length);
			lis[ i].firstChild.appendChild(img);
			
			img.onmouseover = function()
			{
				for (var j = 0; j < this.getAttribute('alt'); ++j) {
					lis[j].firstChild.firstChild.setAttribute('src', 'img/ico-rate.png');
				}
			};
								
			img.onmouseout = function()
			{
				for (var j = 0; j < this.getAttribute('alt'); ++j) {
					lis[j].firstChild.firstChild.setAttribute('src', 'img/ico-unrate.png');
				}
			};
		}
	}
}

window.onload = function()
{
	starRate();
};

<ul id="rate">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
...
</ul>

avec les 2 versions que vous me donnez, j'obtient l'erreur :

a écrit :

lis[j].firstChild.firstChild.setAttribute is not a function

Que je n'ai pas avec la version innerHTML

Le code avec nodeValue fonctionnera tant que l'élément ne contient pas de sous-éléments ... par contre dans ce dernier cas, ça se corse sérieusement : il faut supprimer tous les sous-éléemnts et ensuite seulement supprimer le texte.

Je préfère vérifier avant de me lancer

au final ce que tu veux c'est un rollover simple sur chaque lien image ?

Olivier a écrit :


Il n'y a que du texte là
Par la suite, je crée une balise <img /> mais au moment de la suppr, il n'y a que du texte.

Bonjour, tu souhaites remplacer le contenu du lien de chaque item par une image ? Dans ce cas, c'est replaceChild qui convient:

...
		for (var i = 0; i < lis.length; ++i) {
			lis[ i].style.margin = 0;
			var img = document.createElement('img');
			img.setAttribute('src', 'img/ico-unrate.png');
			img.setAttribute('alt', i+1);
			img.setAttribute('title', 'Mettre '+(i+1)+' sur '+lis.length);
			lis[ i].firstChild.replaceChild(img,lis[ i].firstChild.firstChild);
...

en tout cas, j'aimerais bien voir le html de la liste, ce serait beaucoup plus parlant;

chmel a écrit :

Bonjour, tu souhaites remplacer le contenu du lien de chaque item par une image ? Dans ce cas, c'est replaceChild qui convient:

...
		for (var i = 0; i < lis.length; ++i) {
			lis[ i].style.margin = 0;
			var img = document.createElement('img');
			img.setAttribute('src', 'img/ico-unrate.png');
			img.setAttribute('alt', i+1);
			img.setAttribute('title', 'Mettre '+(i+1)+' sur '+lis.length);
			lis[ i].firstChild.replaceChild(img,lis[ i].firstChild.firstChild);
...

Ahh wé ! Je n'y pensait plus à celle-ci, je testerais.

Javatwister a écrit :
en tout cas, j'aimerais bien voir le html de la liste, ce serait beaucoup plus parlant;

Avant :

<li><a href="?give-note=2">2</a></li>

Après :

<li><a href="?give-note=2"><img title="Mettre 2 sur 10" alt="2" src="img/ico-unrate.png"></a></li>

chmel a écrit :

Bonjour, tu souhaites remplacer le contenu du lien de chaque item par une image ? Dans ce cas, c'est replaceChild qui convient:

Impec' ! c'est bien plus propre ainsi
Merci

Ben voila ce que j'avais réusii à boutiquer :

http://clb56.freezee.org/test_js/

aucun problème en testant le même modèle de liste et l'appel du texte du lien;

Javatwister a écrit :
aucun problème en testant le même modèle de liste et l'appel du texte du lien;

? pas compris

je veux dire que ceci:

lis[ i].firstChild.firstChild.nodeValue 

ne doit poser aucun problème, si la liste est bien présentée comme tu le dis;
Modifié par Olivier (21 Apr 2006 - 15:50)

Javatwister a écrit :
je veux dire que ceci:

lis[ i].firstChild.firstChild.nodeValue 

ne doit poser aucun problème, si la liste est bien présentée comme tu le dis;

Oui, ça fonctionne en effet, cf mon post précédent.

La liste existe bel et bien puisque je teste :

	var myUl = document.getElementById('rate');

	if (myUl) {

Tiens, cet article pourrait être intéressant, non ?

Raphael a écrit :
Tiens, cet article pourrait être intéressant, non ?

Merki, je garde ça sous le coude