为什么无法设置子节点的css属性

<html>
<head>
<style type="text/css">
.highlight {
  background-color: blue;
}
</style>
<script type="text/javascript">
var my = document.getElementById('try');
my.firstChild.className = 'highlight';  //无效
//如果是=================
my.firstChild.parentNode.className = 'highlight';  //work!同时测试是否firstChild有错
</script>
</head>
<body>
<ul id='try'>
  <li>aaaa</li>
  <li>bbbb</li>
</ul>
</body>
</html>为什么这样设置my.firstChild.className = 'highlight';会没有任何效果？css节点classnode

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

my.firstChild.className = 'highlight';  //无效
console.log("my.firstChild.nodeType=" +my.firstChild.nodeType);//=3就是说firstChild是一个文本节点，无法设置className .
<html>
<head>
<style type="text/css">
.highlight {
  background-color: blue;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var my = document.getElementById('try');
my.firstChild.className = 'highlight';
}
</script>
</head>
<body>
<ul id='try'>
  <li>aaaa</li>
  <li>bbbb</li>
</ul>
</body>
</html>
代码是从上往下读的，你先写js没有输出DIV，所以找不到元素。解决方法:一是把js写到最后，二是使用window.onload = function (){}函数
看看该节点是否有className属性
在google,firefox下，空白行也算节点的，把HTML写成下面那样，不要换行就可以了。<ul id='try'><li>aaaa</li><li>bbbb</li></ul>
还有一点忘记说了，要么把script标签放在最后面，要么把JS写到window.onload里面，确保元素已经加载完了。<html>
<head>
<style type="text/css">
.highlight {
  background-color: blue;
}
</style>
<script type="text/javascript">
window.onload = function(){
var my = document.getElementById('try');
var nodes = my.childNodes;
for(var i = 0 ; i < nodes.length ; ++i){
if(nodes[i].nodeType==1){
nodes[i].className='highlight';
break;
}
}
}
</script>
</head>
<body>
<ul id='try'>
  <li>aaaa</li>
  <li>bbbb</li>
</ul></body>
</html>
不知道你是在什么浏览器下可以实现，我用你这代码在chrome，firefox，IE下都没有达到效果。
写了还是不work。原因应该就是1楼说的那个。所以我应该知道是怎么回事了，谢谢了。
谢谢你的回答。根据1楼的回答，是一个文本节点，所以是没有className属性。