1、dom操作，利用dom创建无序列表。并追加到body里边，里面要求至少有四个项目。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01-创建无序列表</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var per=['关羽','张飞','赵云','吕布']; 9 var ull=document.createElement('ul'); 10 11 for (var i=0; i<per.length; i++){ 12 var lii = document.createElement('li'); 13 var lii_t = document.createTextNode(per[i]); 14 15 lii.appendChild(lii_t); 16 ull.appendChild(lii); 17 18 19 } 20 document.body.appendChild(ull); 21 } 22 </script> 23 </head> 24 <body> 25 26 </body> 27 </html>
2.给每个无序列表设置事件（dom2级），鼠标移入、移除，让鼠标当前行高亮显示
node.style.backgroundColor="gray";
node.style.backgroundColor="";
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01-创建无序列表</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var per=['关羽','张飞','赵云','吕布']; 9 var ull=document.createElement('ul'); 10 11 for (var i=0; i<per.length; i++){ 12 var lii = document.createElement('li'); 13 var lii_t = document.createTextNode(per[i]); 14 15 lii.appendChild(lii_t); 16 ull.appendChild(lii); 17 18 //给每个li设置鼠标“移入移出”事件 19 lii.addEventListener("mouseover",function(){ 20 // this 代表当前的li元素节点对象 21 this.style.backgroundColor = "pink"; 22 }); 23 lii.addEventListener("mouseout",function(){ 24 this.style.backgroundColor = ""; 25 }); 26 27 } 28 document.body.appendChild(ull); 29 } 30 </script> 31 </head> 32 <body> 33 34 </body> 35 </html>