DOM基础（三）

梦里梦外; 2023-07-17 14:12 3阅读 0赞

# 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属性，根据下面的效果图来写代码吧！

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_FFFFFF_t_70_pic_center]

#### 任务 ####

第一步：先获取到列表对象，用标签名的获取方式获取到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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/26d90e4b090c420fbaf9cdaa3da0c765.png