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

JavaScript013

javascript获取dom的下一个节点方法,第1张

利用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----三元表达式。

css中选择器有,你多看看,可以通过兄弟节点找到或则nextElement等获得,单词不太会,你找找就是下一个Element和兄弟节点。

甚至可以找到父节点的父节点的父节点(如果有)这种选择器在j-Query中也封装了,撸主不好意思,太久没用忘词了。DOM语言。