DOM基础（三）

最新推荐文章于 2021-07-10 13:09:39 发布

「已注销」

最新推荐文章于 2021-07-10 13:09:39 发布

阅读量6.1k

点赞数 1

分类专栏：前端文章标签：列表 css javascript html html5

本文链接：https://blog.csdn.net/qq_43133192/article/details/105023859

版权

前端专栏收录该内容

46 篇文章 2 订阅

订阅专栏

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>

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM基础（三）

DOM(innerHTML和className)innerHTML 语法： ele.innerHTML 功能：返回ele元素开始和结束标签之间的HTML 语法： ele.innerHTML="html" 功能：设置ele元素开始和结束标签之间的HTML内容为htmlclassName 语法： ele.className 功能：返回ele元素的c...
复制链接

扫一扫