Sélectionner un nœud avec childNodes

**Andrea_Pesaro** · 29/04/2021, 18h24

Bonjour, quelqu'un pourra m'expliquer pourquoi je n'arrives pas changer couleur au nœud "childP1[1]".
Merci

Code html :

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

1
2
3
4
5
6
7
8
<body>
    <h1 >Titre principal</h1>
    <p id='p1'><span>Un paragraphe</span> avec un <span>span</span></p>
    <div>
        <p id='p2'>Un paragraphe dans le div</p>
        <p >Un autre paragraphe dans le div</p>
    </div>
    <p>Un autre paragraphe</p>

et

Code :

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

1
2
3
4
5
6
lp1 = document.getElementById('p1')
let childP1 = p1.childNodes
 
childP1[0].style.color = 'blue'      //Fonctionne
childP1[1].style.color = 'red'       //Ne fonctionne pas
childP1[2].style.color = 'green'   //Fonctionne

**NoSmoking** · 29/04/2021, 19h14

Bonjour,
ton childP1[1] est en fait " avec un".

Utilise childP1 = p1.children de la sorte tu auras, dans ton cas, les <span> et non pas les éléments de type #text.

**CosmoKnacki** · 29/04/2021, 19h22

Parce que le deuxième nœud est un nœud de type Text qui n'a pas d'attribut style, contrairement au premier et au troisième nœuds qui eux sont de type Element.

https://developer.mozilla.org/fr/doc.../Node/nodeType

https://developer.mozilla.org/fr/docs/Web/API/Text

https://developer.mozilla.org/fr/docs/Web/API/Element

Donc si tu veux appliquer un style à ce deuxième nœud, tu dois le faire sur son parent (l'élément p avec l'id p1).

**Andrea_Pesaro** · 30/04/2021, 10h20

Ah! j'avais réussi avec son parent mais je pensais que on pouvait aussi changer la couleur directement sur le texte.. Merci pour l'explication

Sélectionner un nœud avec childNodes

JavaScript

Vue hybride

Discussions similaires

Partager

Partager