Почему getElementsByTagName не работает?

Question

Что именно не так с этим кодом?

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

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

Цвет фона не меняется на желтый.

Answer 1

getElementsByTagName() возвращает массив объектов. Чтобы применить свойство style, вам нужно указать индекс inorder.

Использование

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

Answer 2

Возвращает объект, который является итерируемым как массив, на вашей странице может быть больше одного абзаца, поэтому в первой позиции будет первый тег <p>, который соответствует Javascript.

Итак, что вы хотите:

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

Answer 3

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

Answer 4

В качестве альтернативы, используйте document.getElementById('demo'), если у вас есть только один элемент, чтобы манипулировать. Он не будет возвращать массив, поскольку идентификаторы являются исключительными для одного элемента.

Answer 5

Вы можете использовать консоль браузера, чтобы диагностировать подобные проблемы. Ваш код вызывает:

TypeError: document.getElementsByTagName(...).style is undefined

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 6

document.getElementsByTagName возвращает массив элементов. Не только один элемент. Поскольку массив имеет свойство длины, вы можете выбрать конкретный элемент, как это,

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' 
    } 

Осматривать эти вещи в вашем веб-консоли, как это, вы можете увидеть все элемент console.log(document.getElementsByTagName)