Discussion :

[grafik.muzik]

Bonjour à tous!
Mon problème est davantage d'ordre théorique donc peut-être que la réponse est sous mon nez dans un tutoriel

J'aimerai manipuler les enfants d'un nœud existant à l'aide d'une méthode que j'aurai défini moi-même.

Par exemple, j'aimerai créer un méthode qui pourrait retirer l'énième enfant (s'il existe) d'un élément HTML.

On pourrait facilement faire cette opération par exemple avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function enleverEnfant(elementParent, noElement) {
	var enfant = elementParent.childNodes[noElement];
 
	//si le noeud enfant existe
	if(enfant) {
		//suppression du noeud l'enfant
		elementParent.removeChild(enfant);
	}
}
 
enleverEnfant(objetHTML, 2);

mais à la place de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

enleverEnfant(objetHTML, 2)

j'aimerai pouvoir utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

objetHTML.enleverEnfant(2)

J'imagine donc qu'il me faut définir un nouvelle méthode mais j'ignore comment faire.

Merci à l'avance de votre aide!

[marcha]

Salut,

Pour cela il te faut étendre le DOM, tu peux le faire ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
HTMLElement.prototype.enleverEnfant = function(index) {
  this.removeChild(this.childNodes[index]);
};
 
document.getElementById('id').enleverEnfant(2);

Attention, tous les navigateurs ne supportent pas d'étendre le DOM,
je pense à IE6, mais c'est à vérifier.

Fais attention au fait que childNodes renvoie une liste de tous les
nœuds DOM enfants direct de l'élément. Cela comprends des noeuds
textes 'parasites' qui sont les espaces entre les balises, par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<tr>
  <td>
  </td>
</tr>

les enfants de <tr> sont:

0: un textNode (le passage à la ligne et les espaces avant <td>
1: un élément (le td)
2: un textNode (le passage à la ligne après </td>)

[SpaceFrog]

oui et j'ajouterais que ces noeuds parasites sont présents ou non en fonction du navigateur.
Donc a moins d'utiliser un NodeCleaner qui supprime les noeuds parasites cette methode ne sera pas crossBrowser

[javatwister]

effectivement, c'est "d'ordre théorique", et concrètement, peu efficace pour manipuler les divers enfants d'un noeud donné;
il te faudrait en particulier tester les nodeType, nodeName... les petits-enfants...;

éventuellement, si tu couples ça avec un treeview réactif, c'est néanmoins sympa;

[grafik.muzik]

Attention, tous les navigateurs ne supportent pas d'étendre le DOM,
je pense à IE6, mais c'est à vérifier.

Effectivement, la méthode avec prototype fonctionne à merveille avec Firefox, toutefois du côté d'IE ça déraille encore.

Si je pouvais faire fonctionner le script dans IE7, ça me satisferait déjà. HTMLElement n'étant apparemment pas reconnu par IE, y a-t-il un moyen d'accéder à tout les éléments HTML autrement selon vous?

J'ai trouvé ce commentaire dans un blogue :

Apparament sous IE il faut utiliser quelque chose comme ça :
[OBJET].prototype.mamethode = function () {};
Le seul probléme c'est qu'il faut connaitre l'objet que l'on surcharge ! Ca fonctionne très bien avec les objets String, Date, … mais pour ce qui est des objets Dom !!! Normalement il s'agit de l'Objet Node … sauf que l'objet Node … n'existe pas sous IE … quelle poisse …

Je ne sais pas si ça peut aider à faire avancer la discussion?

Enfin, merci pour vos réponse, j'ai hâte de pouvoir faire fonctionner tout ça!

[marcha]

Salut,

le framework prototype.js traite de ce problème ici

Pour IE, l'idée c'est d'étendre un élément au moment ou on y fait référence.
par la fonction $() dans ce cas là.

[grafik.muzik]

Malheureusement je ne comprends pas comment utiliser cette fonction, pourriez-vous s.v.p. me donner davantage de détails? Un exemple en français serait super

[marcha]

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function $(id) {
  var e = document.getElementById(id);
  // étendre e ici
  return e;
}

Mais si tu cherche à te simplifier la vie pour produire du code
plus clair et compact, je te recommande vivement d'étudier
quelques framework comme JQuery, Prototype, Mootools par ex.