基础（三）"/>
DOM基础（三）
DOM(innerHTML和className)
innerHTML
- 语法：
- ele.innerHTML
功能：- 返回ele元素开始和结束标签之间的HTML
- 语法：
- ele.innerHTML="html"
功能：- 设置ele元素开始和结束标签之间的HTML内容为html
className
- 语法：
- ele.className
功能：- 返回ele元素的class属性
- 语法：
- ele.className="cls"
功能：- 设置ele元素的class属性为cls
编程练习
小伙伴们，今天我们学习了dom的className属性，根据下面的效果图来写代码吧！
效果图如下：
任务
第一步：先获取到列表对象，用标签名的获取方式获取到ul，注意获取到的是只有一项的数组，要获取到第一个：
var ul=document.getElementsByTagName("ul")[0];
第二步：再获取到列表里面的所有列表项：
var lis=ul.getElementsByTagName("li");
第三步：使用for循环，给每个列表项添加内容：
for(var i=0;i<list.length;i++){list[i].innerHTML="第"+(i+1)+"名："+list[i].innerHTML;
}
第四步：使用循环，将定义好的class属性red，添加给列表的奇数项：
for(i=0;i<list.length;i+=2){list[i].className="red";
}
参考代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>innerHTML</title><style type="text/css">.red{color: red;}</style></head><body><h3>古文推荐</h3><ul><li>西游记</li><li>红楼梦</li><li>三国演义</li><li>聊斋志异</li><li>论语</li><li>孟子</li><li>中庸</li><li>大学</li></ul><script>var list=document.getElementsByTagName("li");for(var i=0;i<list.length;i++){list[i].innerHTML="第"+(i+1)+"名："+list[i].innerHTML;}for(i=0;i<list.length;i+=2){list[i].className="red";}</script></body>
</html>更多推荐
DOM基础（三）
发布评论