javascript获取dom的下一个节点方法


Posted in Javascript onSeptember 05, 2014

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

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

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

样子是这样的

javascript获取dom的下一个节点方法

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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
微信小程序自定义组件
Aug 16 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
javascript动态控制服务器控件实例
Sep 05 #Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 #Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 #Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 #Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 #Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 #Javascript
You might like
php中{}大括号是什么意思
2013/12/01 PHP
php图像处理类实例
2015/07/28 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
利用Python爬取可用的代理IP
2016/08/18 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
django批量导入xml数据
2016/10/16 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
小学教师国培感言
2014/02/08 职场文书
个人函授自我鉴定
2014/03/25 职场文书
企业标语口号
2014/06/10 职场文书
任命书怎么写
2015/03/02 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android