在元素的第一个子节点上调用.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";