js实现点击每个li节点，都弹出其文本值及修改

更新时间：2016年12月15日 11:17:02 作者：小僵尸

本篇文章主要分享了js实现点击每个li节点，都弹出其文本值及修改的实例代码，具有很好的参考价值，需要的朋友一起来看下吧

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

1，获取所有的li节点

var liNodes=document.GetElementsByTagName("li");

2，使用for循环进行遍历，得到每一个li节点

for(var i=0;i<liNodes.length;i++){
alert(i);
}

3，为每一个li节点添加onclick响应函数

liNodes[i].onclick=function(){ }

4，在响应函数中获取当前节点的文本值

this 为正在响应事件的那个节点

alert(this.firstChild.nodeValue);

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

var liNodes=document.getElementsByTagName("li");//获取
for(var i=0;i<liNodes.length;i++){//遍历
liNodes[i].onclick=function(){//响应
var val=this.firstChild.nodeValue;
var reg=/^\^{2}/g;//全局正则
if(reg.test(val)){//判断
　　val=val.replace(reg,"");
　　}
else{
　　　val="^^"+val;　
}
firstChild.nodeValue=val;
　　}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
脚本之家小编之前整理不少checkbox全选全不选这方便的文章，但看了这篇以后发现实现方法更好
2016-10-10
js实现股票实时刷新数据案例
下面小编就为大家带来一篇js实现股票实时刷新数据案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
微信小程序常见页面跳转操作简单示例
这篇文章主要介绍了微信小程序常见页面跳转操作,结合简单实例形式总结分析了微信小程序保留页面跳转、关闭页面跳转、返回上一级页面等各种常见的跳转操作实现技巧,需要的朋友可以参考下
2019-05-05
webpack css加载和图片加载的方法示例
这篇文章主要介绍了webpack css加载和图片加载的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
JS Pro-深入面向对象的程序设计之继承的详解
一般的面向对象程序语言，有两种继承方法——接口继承（interface inheritance）和实现继承（implementation inheritance）。接口继承只继承方法签名，而实现继承则继承实际的方法。在JavaScript中，函数没有签名，所以在JavaScript只支持实现继承，而且主要是依靠原型链（prototype chaining）来是实现的
2013-05-05
JS与CSS3实现图片响应鼠标移动放大效果示例
这篇文章主要介绍了JS与CSS3实现图片响应鼠标移动放大效果,结合实例形式分析了javascript与css3响应鼠标事件动态修改页面元素属性实现图片放大效果相关操作技巧,需要的朋友可以参考下
2018-05-05
JavaScript严格模式禁用With语句的原因
看了很多遍JavaScript严格模式，其中有说“禁用With语句”今天禁不住想知道为何“严格模式”就容不下with语句呢，如果你也表示疑惑可以看看哦
2014-10-10
JavaScript实现表单验证功能
这篇文章主要为大家详细介绍了JavaScript实现表单验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
详解微信小程序审核不通过的解决方法
这篇文章主要介绍了详解微信小程序审核不通过的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
JS仿QQ好友列表展开、收缩功能(第一篇)
这篇文章主要介绍了JS仿QQ好友列表展开、收缩功能(第一篇),需要的朋友可以参考下
2017-07-07