Trouver une balise div en javascript grâce à son name

Version imprimable

Bonjour,

alors j'ai ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div name="dh15"> <div class="sst"> <table style="font-size: 12px"> <tbody> <tr> <td> <img src="Images/Atcd/stethoscope-icon.png" alt="Planche"> Planche </td> </tr> </tbody> </table> </div> <div class="stx"> <div id="multicouche"> [CONTENU] </div> </div> </div>
Ce que je veux faire :
Détecter en JS si à l'intérieur de la div <div name="dh15"> il y a bien " <img src="Images/Atcd/stethoscope-icon.png" alt="Planche"> Planche " avec ce code :
Code:

1 2 3 4 5 6 7 8 9 10 function traitePlanche(){ var divs = document.getElementsByTagName('div'); for(var i = 0; i < divs.length; i++) { var div = divs[i]; if () { } } }
Donc je ne sais pas quoi mettre dans min if car d'habitude j'utiliserais div.className == " " mais là il n'y a pas de class juste un name.
1) Comment puis-je sélectionner/trouver cette div juste grâce à son name ?
J'ai cherché sur internet mais je ne trouve pas de réponses adapter à ma situation.

contraintes :
- Je ne veux pas modifier le code html il faut qu'il reste tel quel
- Seulement utiliser du html / css / javascript rien d'autre

Merci de vos réponses futures.

12/05/2017, 16h48
SpaceFrog

essaye

Code:

.name
12/05/2017, 16h52
TheJokeR34

ça ne marche pas :/

Code:

1
2
3
4
5
6
7
function traitePlanche(){
  var divs = document.getElementsByTagName('div');
  for(var i = 0; i < divs.length; i++) { 
    var div = divs[i];
    alert( div.name);
  }
}

12/05/2017, 17h10
Beginner.

Salut,

Ben là dans ton code tu fais une partie de la recherche par toi-même : tu listes toutes les div et tu cherches ensuite dans cette liste celle qui tu veux, ici celle que tu veux c'est celle dont l'attribut "name" vaut "dh15" tu pourrais faire ton if comme ça : if (div.getAttribute("name") === "dh15")mais on peut aussi directement (plus besoin de la boucle for) cibler l’élément voulue avec document.querySelector()...

Citation:

Envoyé par Beginner.

... mais on peut aussi directement (plus besoin de la boucle for) cibler l’élément voulu avec document.querySelector()...

J'ai testé et apparement ça marche on peut obtenir directement l’élément voulu comme ça var elm = document.querySelector("div[name=dh15]");...

Après peux-tu nous dire comment tu comptes faire pour savoir si il y a une image ? Parce que j'ai testé cela (ici) :
Code:

1 2 3 4 5 6 7 function traitePlanche() { var elm = document.querySelector("div[name=dh15] img "); if (elm) console.log("Il y a une image et sa source est :", elm.src ); else console.log(elm,"Il n'y a pas d'image"); }
C'est plus concis...

:salut:

@Beginner. : il peut y avoir plusieurs images.

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
  </style>
  <script>
    'use strict';
    
    document.addEventListener( "DOMContentLoaded", ev => {
      
    }, false );
    
    window.addEventListener( "load", ev => {
      
      document.querySelector( "#btnImgPlanche" ).addEventListener( "click", ev => {
        
        let
          elemImgs = document.querySelectorAll( "div[name='dh15'] img" );
          
        for ( const item of Array.from( elemImgs ) ){
          if( item.getAttribute( "alt" ) === "Planche" ){
            document.querySelector( "#multicouche" ).textContent = item.src;
          }
        }
        
      }, false );
        
    }, false );
  </script>
</head>
<body>
  <main>
 
    <div name="dh15">
 
      <div class="sst">
        <table style="font-size: 12px">
          <tbody>
            <tr>
              <td>
                <img src="http://danielhagnoul.developpez.com/images/adoptez-le.png" alt="adoptez-le">
              </td>
            </tr>
            <tr>
              <td>
                <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="Planche">
              </td>
            </tr>
            <tr>
              <td>
                <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="avatar">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
 
      <div class="stx">
        <div id="multicouche">
        [CONTENU]
        </div>
      </div>
 
    </div>
 
    <button id="btnImgPlanche">Cherche Image Planche</button>
 
  </main>
</body>
</html>

13/05/2017, 11h42
NoSmoking

Bonjour,
juste pour dire que

Code:

<div name="dh15">

n'est pas conforme HTML5 ;)
13/05/2017, 11h59
danielhagnoul

Citation:

Envoyé par NoSmoking

Bonjour,
juste pour dire que

Code:

<div name="dh15">

n'est pas conforme HTML5 ;)

:king: Bien vu !

Salut,

Ah ok merci, je pensais que dans son cas il y avait soit aucune image soit une seule image... Le principe reste le même, dans le cas où il y a plusieurs images il faut juste remplacer querySelector par querySelectorAll (Comme tu l'as fait d'ailleurs)...
Code:

1 2 3 4 5 6 7 function traitePlanche() { var elm = document.querySelectorAll("div[name=dh15] img "); if (elm.length) console.log("Il y a " + elm.length + " image(s)"); else console.log("Il n'y a pas d'image"); }

15/05/2017, 09h38
TheJokeR34

Merci beaucoup pour vos réponses ! ça marche avec

Code:

div.getAttribute("name") === "dh15"

Finalement je fais autrement je traite toute la balise qu'il y ait des images ou non mais encore merci quand même d'avoir pris le temps de répondre.
Désolé d'avoir répondu si tard je bosse pas le weekend héhé :D
15/05/2017, 10h33
TheJokeR34
En fait j'aurais une autre question à vous poser x) quand je fais ça du coup :
Code:

1 2 3 4 5 6 7 8 if (div.getAttribute("name") === "dh15") { document.getElementById('Planches2').innerHTML += div; var Text = 'BLABLABLABLA' ; div.innerHTML = Text; }
vous voyez ce que je veux faire ? Envoyer le contenu de div dans la div Planches2 mvoyez ?
sauf qu'en faisant ça j'ai ce foutu résultat : [object HTMLDivElement]
Auriez vous un autre moyen pour que j'arrive à mes fins ? Merci

Bon j'ai trouvé tout seul en fait désolé du dérangement x)

Code:

1
2
3
4
5
6
7
8
9
 
if (div.getAttribute("name") === "dh15") {
 
		var Texte = div.innerText || div.textContent;
		document.getElementById('Planches2').innerHTML += Texte;
 
		var Text = 'BLABLABLA' ;
		div.innerHTML = Text;
    }