Pourquoi getElementsByTagName ne fonctionne pas?

getElementsByTagName() renvoie un ensemble d'objets. Vous devez spécifier l'index inorder pour appliquer la propriété de style.

Utilisation

 document.getElementsByTagName('p')[0].style.backgroundColor = 'yellow'; 

Vous pouvez utiliser la console du navigateur pour diagnostiquer ces problèmes gentils. Votre code déclenche:

TypeError: document.getElementsByTagName (…). Style is undefined

 document.getElementsByTagName('P').style.backgroundColor = 'yellow'; 

Cela signifie que tout ce qui vient juste avant le style n'est pas un objet ou c'est un objet mais n'a pas de propriété de style . Pour voir ce qu'il est:

 console.log(document.getElementsByTagName('P')); 

Vous verrez que c'est une HTMLCollection , qui est ce que la documentation pour getElementsByTagName dit qu'il devrait l'être.

Bref, vous devez choisir un élément, par exemple le premier:

 document.getElementsByTagName('P')[0].style.backgroundColor = 'yellow'; 

Ou, pour rendre votre code plus robuste:

 var paragraphs = document.getElementsByTagName('P'); if (paragraphs.length>0) { paragraphs[0].style.backgroundColor = 'yellow'; } 

getElementsByTagName renvoie un objet qui est itératif en tant que tableau, vous pouvez avoir plus de paragraphe dans votre page, alors, dans la première position, il y aura la première <p> que Javascript respecte.

Donc, ce que vous voulez, c'est:

 document.getElementsByTagName('P')[0].style.backgroundColor = 'yellow'; 

Sinon, utilisez document.getElementById('demo') si vous n'avez qu'un élément à manipuler. Il ne renverra pas un tableau car les identifiants sont exclusifs à un seul élément.

  var x = document.getElementsByTagName("P"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "yellow"; } 

document.getElementsByTagName renvoie un tableau d'éléments. Pas seulement un élément. Étant donné que le tableau a une propriété de longueur, vous pouvez sélectionner un élément spécifique comme celui-ci,

 var paragraphs = document.getElementsByTagName; paragraph1 = paragraphs[0]; paragraph1.style.cssProperty = 'css value'; 

Pour sélectionner tous les éléments que vous avez en boucle

 for(var i = 0; i < paragraphs.length; i++){ paragraph[i].style.cssProperty = 'css value' } 

Inspectez ces éléments dans votre console Web comme celle-ci, vous pouvez voir tous les éléments console.log(document.getElementsByTagName)