day9 part2：JavaScript DOM编程学习笔记03_1.实现点击所有li标签,弹出对应的文本值。-优快云博客

本文提供了两个JavaScript示例，展示了如何通过DOM操作实现文本提示与切换功能。第一个示例介绍了如何点击li元素来显示该元素的文本内容。第二个示例则展示了如何在点击li元素时为其文本添加或移除特定前缀。

例1：

功能：点击每个li节点都弹出其文本值

window.onload=function(){

		//1.获取所有的li节点
		var liNodes=document.getElementsByTagName("li");
		//2.使用for循环进行遍历，得到每个li节点
		for(var i=0;i<liNodes.length;i++){
			//3.为每一个li节点添加onclick响应函数
			liNodes[i].onclick=function(){
				//4.在响应函数中获取当前节点的文本节点的文本值
				//5.alert打印
				//this为正在响应事件的那个节点
				alert(this.firstChild.nodeValue);
			}
		}
	}

例2：

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

window.onload=function(){
		
		var liNodes=document.getElementsByTagName("li");
		for(var i=0;i<liNodes.length;i++){
			liNodes[i].onclick=function(){
				var val=this.firstChild.nodeValue;
				// //g表示全局的，以x开始的就写^x,因为^是特殊字符，所以写成^\^
				var reg=/^\^{2}/g;
				if(reg.test(val)){
					val=val.replace(reg,"");
				}else{
					val="^^"+val;
				}
				this.firstChild.nodeValue=val;
			}
		}