Cibler un élément enfant depuis son élément parent

Bonjour,

Rifton007 a écrit :
En récuperant l'ID parent, comment ciblé la div enfant approprié.

Aucune idée, tu ne donnes même pas un aperçu du DOM sur lequel tu travailles.

Mais de manière générale avec des méthodes DOM natives, tu peux par exemple faire:

// Récupère le premier élément DIV enfant ou descendant de
// l'élément qui porte l'identifiant 'something'
var child = document.getElementById('something').getElementsByTagName('div')[0];

// Équivalent stricte avec un sélecteur CSS (compatible IE8+)
var child = document.querySelector('#something div');

// Même chose mais en restreignant à un DIV enfant (pas descendant)
var child = document.querySelector('#something > div');

Si tu utilises une lib JS qui fournit des fonctions de DOM Traversing, tu peux aussi utiliser des sélecteurs CSS pour accéder à des éléments comme avec document.querySelector et document.querySelectorAll, tout en gardant la compatibilité IE7.

Aucune idée, tu ne donnes même pas un aperçu du DOM sur lequel tu travailles.

Je n'ai pas souhaité vous encombrer avec tout mon code.
Si non en bref ça donne cela:

<form method="get" action="index_temp.php" name="send_reservation" id="send_reservation" onSubmit="return checkmail(this);" onReset="return resetmail(this);">
...<div id="msg_error">...</div>

function checkmail(form_name){...}

Ceci dit, cela a fonctionné avec

var child = document.getElementById(form_name.id).getElementsByTagName('div')[1];

Mais étant donné que le nombre de div varie en fonction des form. Pourquoi ainsi ça ne fonctionnerais pas ??

var child = document.getElementById(form_name.id).getElementById('msg_error');

Merci à vous,

À partir du moment où tu as un identifiant "msg_error" sur un élément, celui-ci est censé être unique dans la page (c'est le principe des id), et donc tu peux faire:

document.getElementById('msg_error')

Si tu as plusieurs éléments de même type, il faut utiliser une classe plutôt qu'un id, ou alors chaque élément doit avoir un id spécifique (peut-être en plus d'une classe commune).

Ensuite, pour atteindre tes éléments en JavaScript, tu as deux mécanismes principaux:

1. Utiliser des sélecteurs CSS. Tu peux le faire nativement en JavaScript avec querySelector et querySelectorAll (je te laisse te documenter sur ces derniers), et c'est compatible IE8+ mais donc pas compatible IE7 (tableau de compatibilité). À défaut, toute les libs JavaScript généralistes (jQuery, MooTools, YUI, etc.) fournissent quelque chose d'équivalent; voir la documentations de ces libs si tu en utilise une dans ton projet.

2. Si tu souhaites être compatible IE7 et ne pas utiliser de librairie JS, tu peux utiliser des méthodes DOM moins polyvalentes telles que getElementById et getElementsByTagName (pas de getElementsByClassName avant IE9). J'ai déjà donné un exemple de ça.

Dans le deuxième cas, le plus simple est parfois d'avoir un code HTML avec des id bien précis pour les différents éléments sur lesquels on souhaite agir. Par exemple:

<form id="send_reservation">
  <div class="msg_error" id="send_reservation_msg_error">…</div>
</form>
<form id="something_else">
  <div class="msg_error" id="something_else_msg_error">…</div>
</form>

Et là si tu as un évènement déclenché sur un des formulaires, tu peux récupérer l'id du formulaire et rajouter "_msg_error" pour avoir l'id de ton DIV. Et donc tu peux simplement utiliser document.getElementById. Par contre, il faut être rigoureux dans tes conventions de nommage pour les identifiants...

Et bien à tout grand merci fvsch.
J'ai pris le temps de suivre les différentes pistes que tu ma offerte.
J'ai finalement opté pour une compatibilité IE7+

A savoir:

var child = document.getElementById(form_name.id).getElementsByTagName('div')[0];

Encore merci,