为什么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

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

  

TypeError：document.getElementsByTagName（...）。style未定义

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

这意味着，style之前的任何内容都不是一个对象，或者它是一个对象，但没有style属性。看看它是什么：

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

您会看到它是HTMLCollection，这是documentation for getElementsByTagName所说的。

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

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

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

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

Answer 3

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

所以，你想要的是：

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

Answer 4

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

Answer 5

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

Answer 6

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)