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


Posted in Javascript onDecember 15, 2016

点击每个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;

}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
Vue的props父传子的示例代码
May 20 Javascript
js实现点击烟花特效
Oct 14 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 #Javascript
js代码实现下拉菜单【推荐】
Dec 15 #Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 #Javascript
JavaScript常见的五种数组去重的方式
Dec 15 #Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 #Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 #Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
java script编程起步(第三课)
2007/01/10 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
python连接MySQL数据库实例分析
2015/05/12 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
2015年医院创卫工作总结
2015/04/22 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
奠基仪式致辞
2015/07/30 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS