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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
原生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入门源程序
2006/10/09 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP查询分页的实现代码
2017/06/09 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
python绘制条形图方法代码详解
2017/12/19 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Python 可视化神器Plotly详解
2020/12/26 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
JAVA程序员面试题
2012/10/03 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
组工干部演讲稿
2014/09/02 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
主持人开幕词
2015/01/29 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python