zoukankan      html  css  js  c++  java
  • javascript 获取dom书的下一个节点。

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

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

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

    样子是这样的

    javascript 代码如下

     1 <script type="text/javascript">
     2  function jia(a)
     3     {
     4         var nextnode = a.nextElementSibling;//获取下一个节点
     5        
     6             alert(nextnode.innerHTML);
     7             var a = parseInt(nextnode.innerHTML)
     8             a += 1;
     9             nextnode.innerHTML = a;
    10 
    11         
    12     }
    13     function jian(a) {
    14         var previousnode = a.previousElementSibling;
    15         var a = parseInt(previousnode.innerHTML)
    16         a -= 1;
    17         a = a > 0 ? a : 0;
    18         previousnode.innerHTML = a;
    19     }
    20 </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学习心得(五)
    JavaScript学习心得(四)
    JavaScript学习心得(三)
    JavaScript学习心得(二)
    JavaScript学习心得(一)
    socket异步接收信息
    DataTable将行转成列
    highcharts的柱状图边线
    w3cSchool jquery学习
  • 原文地址:https://www.cnblogs.com/aguan/p/3955843.html
Copyright © 2011-2022 走看看