为什么 getElementsByTagName 不起作用？

Question

这段代码究竟有什么问题？

<p id="demo">Hello World!</p> 

<script>
document.getElementsByTagName('P').style.backgroundColor = 'yellow';
</script>

背景颜色没有变成黄色。

Answer 1

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

用

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

Answer 2

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

类型错误： 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';
}