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

**TheJokeR34** · 12/05/2017, 16h07

Bonjour,

alors j'ai ce code :

Code :

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

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 :

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

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.

**SpaceFrog** · 12/05/2017, 16h48

essaye

Code :

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

.name

**TheJokeR34** · 12/05/2017, 16h52

ça ne marche pas :/

**SpaceFrog** · 12/05/2017, 17h06

Code :

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

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);
  }
}

**Beginner.** · 12/05/2017, 17h10

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()...

**Beginner.** · 12/05/2017, 18h22

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 javascript :

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

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...

**danielhagnoul** · 12/05/2017, 23h45

@Beginner. : il peut y avoir plusieurs images.

Exemple :

Code HTML :

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

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>

**NoSmoking** · 13/05/2017, 11h42

Bonjour,
juste pour dire que

Code html :

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

<div name="dh15">

n'est pas conforme HTML5

**danielhagnoul** · 13/05/2017, 11h59

Envoyé par NoSmoking

Bonjour,
juste pour dire que

Code html :

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

<div name="dh15">

n'est pas conforme HTML5

Bien vu !

**Beginner.** · 13/05/2017, 17h50

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 :

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

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");
}

**TheJokeR34** · 15/05/2017, 09h38

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

Code :

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

 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é

**TheJokeR34** · 15/05/2017, 10h33

En fait j'aurais une autre question à vous poser x) quand je fais ça du coup :

Code :

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

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

**TheJokeR34** · 15/05/2017, 11h12

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

Code :

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

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;
    }

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

JavaScript

Discussions similaires

Partager

Partager