Почему getElementsByTagName не работает? [Дубликат]

На этот вопрос уже есть ответ здесь:

getElementsByTagName в JavaScript 4 ответа

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

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

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

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

 rene26 мая 2016 г., 11:18
@ MarcosPérezGude Я нашел дурака, о котором ты говорил
 Marcos Pérez Gude26 мая 2016 г., 11:10
Я думаю, что есть миллионы дублированных постов именно с этим вопросом. НЕ КОРМИТЬ. Проголосуйте, чтобы закрыть.
 fcalderan26 мая 2016 г., 11:04
getElementsByTagName возвращает массив, поэтому вы не можете применить свойство style.document.getElementsByTagName('p')[0] буду работать
 Tim Castelijns26 мая 2016 г., 11:20
Не редактируйте новые вопросы в свой оригинальный вопрос. Если у вас есть другие вопросы, задайте отдельный вопрос (если они не были заданы ранее)
 super1126 мая 2016 г., 11:07
О да, глупый я ... Напиши это как ответ, и я с радостью приму это.

Ответы на вопрос(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)

 Tim Castelijns26 мая 2016 г., 11:21
5 других людей сказали то же самое 10 минут назад

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

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

document.getElementsByTagName('P')[0].style.backgroundColor = 'yellow';
Решение Вопроса

getElementsByTagName() возвращает массив объектов. Вам нужно указать порядок индекса, чтобы применить свойство стиля.

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

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

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

Ошибка типа: document.getElementsByTagName (...). Стиль не определен

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';
}
 super1126 мая 2016 г., 11:15
Мне нравится «надежная» часть. Спасибо :)

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

 Liam26 мая 2016 г., 11:15
Это совершенно не соответствует сути
 super1126 мая 2016 г., 11:12
Это быстрее, когда нет массивов?
 blrzzzt26 мая 2016 г., 11:15
Я не уверен в разнице во времени ... но я бы предположил, что поиск одного элемента будет быстрее, чем поиск DOM по нескольким элементам.
 Marcos Pérez Gude26 мая 2016 г., 11:12
При этом вы выбираете только#demo элемент, так как есть только один.
    var x = document.getElementsByTagName("P");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].style.backgroundColor = "yellow";
    }
 hizbul2526 мая 2016 г., 11:39
Реализация стиля для всех тегов 'p' имеет цикл использования. Я думаю, вы хотите стильный все р тег. @ super11
 super1126 мая 2016 г., 12:00
Только один помощник ...
 super1126 мая 2016 г., 11:10
Зачем делать это просто, когда можно усложнять? :) Я не вижу смысла вставлять это в цикл, когда дело доходит до моего примера.
 super1126 мая 2016 г., 11:14
@ Маркос, нет, ты. Я никогда не говорил, что код не в порядке. Мне нужно стилизовать один элемент, а не все. Зачем? Просто для тестирования.

Ваш ответ на вопрос