为什么getElementsByTagName不起作用？

这段代码究竟出了什么问题？

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

背景颜色未变为黄色。

getElementsByTagName()返回一个对象数组。您需要指定索引才能应用样式属性。

使用

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

您可以使用浏览器控制台来诊断这些问题。您的代码触发：

TypeError：document.getElementsByTagName（…）。style未定义
 document.getElementsByTagName('P').style.backgroundColor = 'yellow'; 

这意味着无论在style之前出现什么，要么不是对象，要么是对象，但没有style属性。看看它是什么：

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

你会看到它是一个HTMLCollection ，这是getElementsByTagName的文档应该是什么。

简而言之，您需要选择一个元素，例如第一个元素：

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

或者，为了使您的代码更健壮：

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

getElementsByTagName返回一个可作为数组迭代的Object，您可以在页面中有更多的一个段落，因此在第一个位置会有第一个Javascript符合的

标记。

那么，你想要的是：

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

或者，如果您只有一个要操作的元素，请使用document.getElementById('demo') 。它不会返回数组，因为ids是单个元素所独有的。

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

document.getElementsByTagName返回一个元素数组。不只是一个元素。由于数组有一个length属性，你可以选择这样的特定元素，

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

选择循环的所有元素

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

在这样的Web控制台中检查这些东西，你可以看到所有元素console.log(document.getElementsByTagName)