Ошибка при вызове .setAttribute() для первого дочернего элемента элемента

Question

Мой код не работает. Я пытаюсь получить доступ к первому ребенку в DIV и установить атрибут, но консоль дает мне эту ошибку:

TypeError: Object # has no method 'setAttribute'

Мой код:

<div> 
    <p id="one"><span id="uno">1</span></p> 
    <p id="two"><span id="dos">2</span></p> 
    <p id="three"><span id="tres">3</span></p> 
</div> 
<script> 
var divvy = document.getElementsByTagName("div").item(0) 
divvy.firstChild.setAttribute("style", "color: violet;"); 
</script> 

Answer 1

Используйте коллекцию .children, чтобы избежать текстового узла.

divvy.children[0].setAttribute("style", "color: violet;"); 

---

В современных браузерах (например, IE9 +), вы можете использовать .firstElementChild вместо .firstChild.

divvy.firstElementChild.setAttribute("style", "color: violet;"); 

---

И по теме, но я бы не использовать setAttribute, чтобы установить цвет. Я бы использовал свойство .style.

divvy.firstElementChild.style.color = "violet"; 

Answer 2

Первый ребенок из DIV является текст узел, содержащий пустое пространство перед элементами P. Вместо этого попробуйте это:

var divvy = document.getElementsByTagName("div").item(0) 
divvy.getElementsByTagName('p')[0].setAttribute("style", "color: violet;"); 

Это явно выбирает первый элемент P.