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 相关文章推荐
再论Javascript下字符串连接的性能
Mar 05 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
深入理解vue Render函数
Jul 19 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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 magic quotes的详解
2013/06/17 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
浅谈python numpy中nonzero()的用法
2018/04/02 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
应届生体育教师自荐信
2013/10/03 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
flex弹性布局详解
2022/03/20 HTML / CSS