利用javascript 写一个在页面点击加减按钮实现数字的累加。。

简略的html大概如此。看得懂就好不要在意这些细节啊

  <input type="button" value="+" onclick="jia(this)" />
<label class="num">0</label>
<input type="button" value="-" onclick="jian(this)" />

样子是这样的

javascript 代码如下

 <script type="text/javascript">
function jia(a)
{
var nextnode = a.nextElementSibling;//获取下一个节点 alert(nextnode.innerHTML);
var a = parseInt(nextnode.innerHTML)
a += 1;
nextnode.innerHTML = a; }
function jian(a) {
var previousnode = a.previousElementSibling;
var a = parseInt(previousnode.innerHTML)
a -= 1;
a = a > 0 ? a : 0;
previousnode.innerHTML = a;
}
</script>

解释一下:

function jian(a)和
function jia(a)就是当前点击的对象了。在onclick事件接的方法里加了this;

- nextElementSibling 获取当前节点的下一个节点(获得下一个兄弟节点)

- previousElementSibling 获取当前节点的上一个节点

注意: IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie 中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextElementSibling了。

上面的解释的意思的使用 nextElementSibling 和previousElementSibling 获得下一个兄弟节点和上一个兄弟节点,可以去掉换行,空格上面之类的,直接找到我们标签元素。但是下面的两个

nextSibling 
previousSibling 也是得下一个兄弟节点和上一个兄弟节点的,只是在IE中好用
--------------------关键字解释
parseInt 转化功能。
 a = a > 0 ? a : 0;----三元表达式。
												

javascript 获取dom书的下一个节点。的更多相关文章

  1. javascript 获取下一个节点

    下一个节点: nextElementSibling 上一个节点 previousElementSibling <div> <select onchange="alert(t ...

  2. 剑指Offer(书):二叉树的下一个节点

    题目:给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 分析:若一个节点有右子树,那么他的下一个节点就是他右子树中 ...

  3. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. 剑指offer-二叉树的下一个节点

    题目描述   给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针.   解题思路 分情况考虑如下: 若该节点为空,则直 ...

  5. 剑指offer(57)二叉树的下一个节点

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 题目分析 这题一定要画图,因为只有画图我们才能分清楚下 ...

  6. 【剑指offer】08二叉树的下一个节点,C++实现

    原创博文,转载请注明出处! # 题目 父节点指向子节点的指针用实线表示,从子节点指向父节点的指针用虚线表示. # 思路 如果节点有右子节点,则右子节点的最左节点是该节点的下一个节点.例如,寻找b的下一 ...

  7. 剑指Offer的学习笔记(C#篇)-- 二叉树的下一个节点(好理解版本)

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 一 . 理解题意 该题目我们可以借鉴一个非常影响不好的 ...

  8. 剑指offer第二版-8.二叉树的下一个节点

    描述:给定一棵二叉树和其中的一个节点,找出中序遍历序列的下一个节点.树中应定义指向左节点.右节点.父节点的三个变量. 思路: 1.如果输入的当前节点有右孩子,则它的下一个节点即为该右孩子为根节点的子树 ...

  9. 剑指offer笔记面试题8----二叉树的下一个节点

    题目:给定一棵二叉树和其中的一个节点,如何找出中序遍历序列的下一个节点?树中的节点除了有两个分别指向左.右子节点的指针,还有一个指向父节点的指针. 测试用例: 普通二叉树(完全二叉树,不完全二叉树). ...

随机推荐

  1. 韩顺平循序渐进学JAVA从入门到精通 视频全套,需要的联系我

    0讲-开山篇.avi 10讲-访问修饰符.重载.覆盖.avi 11讲-约瑟夫问题.avi 12讲-多态.avi 13讲-抽象类.接口.avi 14讲-final.作业评讲.avi 15讲-作业.测试题 ...

  2. Zabbix_proxy的架设

    一.安装zabbix-proxy与导入数据库 1. 安装 zabbix-server $ sudo rpm -ivh http://repo.zabbix.com/zabbix/3.0/rhel/7/ ...

  3. 第五篇 elasticsearch express插入数据

    1.后端 在elasticsearch.js文件夹下添加: function addDocument(document) { return elasticClient.index({ index: i ...

  4. p2071 座位安排

    传送门 题目 已知车上有N排座位,有N*2个人参加省赛,每排座位只能坐两人,且每个人都有自己想坐的排数,问最多使多少人坐到自己想坐的位置. 输入格式: 第一行,一个正整数N. 第二行至第N*2+1行, ...

  5. 阶段4-独挡一面\项目-基于视频压缩的实时监控系统\Sprint1-基于Epoll架构的采集端程序框架设计\第2课-基于Epoll的采集端程序框架设计

    回顾之前的整个程序架构 把epoll机制应用到这个架构上去 下面主要去分析我们的系统中有没有需要等待的事件,先看看采集子系统 在采集子系统当中,摄像头有数据,摄像头采集到图像数据可以作为一个等待事件. ...

  6. Spring JdbcTemplate+JdbcDaoSupport实例(和比较)

    首先,数据库是这样的,很简单. 当然,要引入spring的包,这里我全部导入了,省事. applicationContext.xml是这样的: <?xml version="1.0&q ...

  7. jquery ajax + struts2用例

    ajax var url = '/itsm/contract/contract!deleteShopItemById.action'; var shopItemId= selectRows[x].da ...

  8. Neutron网络研究

    你将学到什么 虚拟机的Ping包是如何出外网的 DevStack环境准备 节点 硬件配置 网络配置 类型 操作系统 DevStack 4G 2CPU 50GB 2张网卡(NAT模式) VMWare虚拟 ...

  9. C#之数据类型转换

    前言    在C#中学习中,像在VB学习的时候一样,我们会接触到很多种数据类型,但是VB中在用数据类型的时候,我们会考虑这个数据要求多大的内存,或者说有时候为了满足很少的大内存事件,而狠心分配给它较大 ...

  10. Oracle 12c登陆sys用户的方法

    本机安装过oracle 12c之后,发现用sql plus执行命令conn sys/change_on_install as sysdba; 提示如下图: 后在网上搜索此问题,需要先登陆system账 ...