2015-05-31 2 views
2

Я очень новичок в JavaScript и не могу понять, почему в этом простом коде появляется в консоли color.setAttribute не является функциейОчень Basic SetAttribute на JavaScript

<style> 
 
\t .red {color:red;} 
 
\t .blue { color: blue;} 
 
</style> 
 
</head> 
 
<body> 
 
<p class="red">Hello World</p> 
 
<script> 
 
\t var color = document.getElementsByClassName("red"); 
 
\t color.setAttribute("class","blue"); 
 
</script>
Насколько я знаю, когда объявляется переменная цвет, я создаю объект-элемент , и я могу использовать метод : setAttribute.

Спасибо заранее, и извините, если мой вопрос глупо.

+0

Кстати, JQuery работает точно так же, как вы хотите: («красный„). '$ AddClass (“ синий»);' – Blindy

+0

Спасибо, теперь я понимаю, и никогда не думал, чтобы получить такие быстрые ответы, Большое спасибо. –

ответ

9

document.getElementsByClassName("red") возвращает объект dom, который является массивом, подобным объекту. поэтому вы должны написать следующее.

var color=document.getElementsByClassName("red")[0]; 
color.setAttribute("class","blue"); 
+2

Технически он не возвращает массив, а скорее [HTMLCollection] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), который представляет собой объект, похожий на массив, который имеет свойство '.length', подобное массиву, и поддерживает' [i] 'индексацию как массив, но не имеет каких-либо обычных методов массива, таких как' .forEach() 'или' .slice() '. – jfriend00

+0

Согласен. @ jfriend00 –

+0

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

3

document.getElementsByClassName возвращает NodeList. Вы должны использовать индекс для выбора узла из списка узлов.

var color = document.getElementsByClassName("red")[0]; // the first element 
Смежные вопросы