JS操作DOM示例-优快云博客

本文通过两个实例展示了如何使用JavaScript操作DOM元素：一是点击li元素弹出其文本值；二是点击li元素根据文本值是否存在特定前缀进行添加或移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需求

　　点击每个 li 节点, 都弹出其文本值

2.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript">
 7     window.onload=function(){
 8         var liNodes=document.getElementsByTagName("li");
 9         for(var i=0;i<liNodes.length;i++){
10             liNodes[i].onclick=function(){
11                 alert(this.firstChild.nodeValue);
12             }
13         }
14     }    
15 </script>
16 </head>
17 <body>
18     <p>你喜欢哪个城市?</p>
19     <ul id="city">
20         <li id="bj" name="BeiJing">北京</li>
21         <li>上海</li>
22         <li>东京</li>
23         <li>首尔</li>
24     </ul>
25         
26     <br><br>
27     
28     <p>你喜欢哪款单机游戏?</p>
29     <ul id="game">
30         <li id="rl" name="hongjing">红警</li>
31         <li>实况</li>
32         <li>极品飞车</li>
33         <li>魔兽</li>    
34     </ul>
35 </body>
36 </html>

3.效果

4.需求　　

　　点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除

5.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript">
 7     window.onload=function(){
 8         var liNodes=document.getElementsByTagName("li");
 9         for(var i=0;i<liNodes.length;i++){
10             liNodes[i].onclick=function(){
11                 var liValue=this.firstChild.nodeValue;
12                 var reg=/^\^{2}/g;
13                 if(reg.test(liValue)){
14                     liValue=liValue.replace(reg,"");
15                 }else{
16                     liValue="^^"+liValue;
17                 }
18                 this.firstChild.nodeValue=liValue;
19             }
20         }
21     }    
22 </script>
23 </head>
24 <body>
25     <p>你喜欢哪个城市?</p>
26     <ul id="city">
27         <li id="bj" name="BeiJing">北京</li>
28         <li>上海</li>
29         <li>东京</li>
30         <li>首尔</li>
31     </ul>
32         
33     <br><br>
34     
35     <p>你喜欢哪款单机游戏?</p>
36     <ul id="game">
37         <li id="rl" name="hongjing">红警</li>
38         <li>实况</li>
39         <li>极品飞车</li>
40         <li>魔兽</li>    
41     </ul>
42 </body>
43 </html>