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实现防止用户重复点击的三种方法,包括通过禁用按钮、解绑点击事件和使用标记,具有一定的参考价值,感兴趣的可以了解一下2025-02-02
这篇文章主要介绍了关于d3.js数据绑定的相关资料，文中通过示例代码介绍的非常详细，对大家学习只d3.js具有一定的参考价值，需要的朋友下面来一起看看吧。2017-04-04
在前端开发中Webpack已经成为构建现代JavaScript应用的必备工具,它负责模块的打包和优化,这篇文章主要介绍了前端webpack一些常用配置的作用,文中介绍的非常详细,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了VSCode Webview中如何实现点击下载图片,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了bootstrap学习笔记之css样式设计，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了JS模拟键盘打字效果的方法,涉及javascript鼠标事件及字符串操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
最近项目需要屏蔽客户端的一些操作，加大查看源码等难度，特整理一下这个js，也防止客户端用户误操作，破解方放也很简单这里就不多说了2020-10-10
这篇文章主要为大家详细介绍了JavaScript实现密码框验证信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
一个可关闭、可随意拖动位置的网页弹出层代码，美化的相当漂亮，简洁实用，还可拖动改变大小，通过八个方向改变大小，学习这类特效编写的网页设计者可参阅一下2015-04-04
最新评论