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; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
javascript读取文本节点方法小结
获取元素节点的子节点 1,获取id的所有子节点 var cityNode=document.getElemnetById("") 2,利用元素节点的childNodes 方法可以获得指定元素节点的所有子节点 alert(cityNode.childNodes.length) 注:基本不用 3.获取 id 节点的所有 li 节点 var cityLiNodes=cityNode.GetElementsByTagName("li"); alert(cityNode.
-
jstree创建无限分级树的方法【基于ajax动态创建子节点】
本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s
-
JS/jQuery判断DOM节点是否存在的简单方法
JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th
-
浅谈js的html元素的父节点,子节点
parentNode和parentElement功能一样,childNodes和children功能一样.但是parentNode和childNodes是符合W3C标准的,可以说比较通用.而另外两个只是IE支持,不是标准,Firefox就不支持 示例: "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下: <div id="parent"> <b id="child
-
用javascript读取xml文件读取节点数据
下面代码是读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> <script type="text/javascript"> var objLength = null; var xmlHttp; var strurl = ""; function ajaxrequst() { if (window.ActiveXObject) { xmlHttp = new ActiveXO
-
JS 获取HTML标签内的子节点的方法
子节点的个数: document.getElementById("id").childNodes.length 注意: 标签开/闭合算2个节点 第几个子几点: document.getElementById("id").childNodes[n] 示例: 这里是 length-4 处,margin-left:20px 输出:length=8 实例: <div id="page_kx" style="text-align: cent
-
JS实现添加,替换,删除节点元素的方法
本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose
-
js中获取 table节点各tr及td的内容简单实例
<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td>
-
JavaScript给每一个li节点绑定点击事件的实现方法
1.单击事件 <body> <h2>javascript 事件</h2> <ul> <li>aaaa</li> <li>aaaa111</li> <li>aaaa222</li> <li>aaaa3333</li> <li>aaaa444</li> </ul> <script type="text/javasc
-
javascript dom操作之cloneNode文本节点克隆使用技巧
true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow
-
js 获取元素所有兄弟节点的实现方法
比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i
随机推荐
- Python 遍历列表里面序号和值的方法(三种)
- 前端开发必须知道的JS之原型和继承
- 详解vue 中使用 AJAX获取数据的方法
- 基于Angularjs实现分页功能
- 用vbs实现防止计算机使用 LMHosts 文件
- Python调用ctypes使用C函数printf的方法
- PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
- Python实现的监测服务器硬盘使用率脚本分享
- 深入理解Android Matrix理论与使用的详解
- python中sets模块的用法实例
- PHP 优化配置——加速你的VBB,phpwind,Discuz,IPB,MolyX第1/2页
- Call 从一个批处理程序调用另一个批处理程序,并且不终止父批处理程序。
- sql 游标使用笔记
- zShowBox 图片放大展示jquery版 兼容性
- Nginx负载均衡的4种方案配置实例
- java生成验证码步骤归纳总结
- PHP获取指定时间段之间的 年,月,天,时,分,秒
- NetworkX之Prim算法(实例讲解)
- Unity3d实现Flappy Bird游戏
- Ubuntu无法连接网络的解决办法