javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法

更新時(shí)間：2014年09月05日 11:46:46 投稿：whsnow

這篇文章主要介紹了javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法,實(shí)現(xiàn)在頁面點(diǎn)擊加減按鈕數(shù)字的累加，需要的朋友可以參考下

利用javascript 寫一個(gè)在頁面點(diǎn)擊加減按鈕實(shí)現(xiàn)數(shù)字的累加。

簡(jiǎn)略的html大概如此?？吹枚秃貌灰谝膺@些細(xì)節(jié)啊

<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;//獲取下一個(gè)節(jié)點(diǎn)

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)就是當(dāng)前點(diǎn)擊的對(duì)象了。在onclick事件接的方法里加了this;

- nextElementSibling 獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)(獲得下一個(gè)兄弟節(jié)點(diǎn))
- previousElementSibling 獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)

注意： IE將跳過在節(jié)點(diǎn)之間產(chǎn)生的空格文檔節(jié)點(diǎn)（如：換行字符），而Mozilla不會(huì)這樣——FF會(huì)把諸如空格換行之類的排版元素視作節(jié)點(diǎn)讀取，因此，在ie 中用nextSibling便可讀取到的下一個(gè)節(jié)點(diǎn)元素，在FF中就需要這樣寫：nextElementSibling了。

上面的解釋的意思的使用 nextElementSibling 和previousElementSibling 獲得下一個(gè)兄弟節(jié)點(diǎn)和上一個(gè)兄弟節(jié)點(diǎn)，可以去掉換行，空格上面之類的，直接找到我們標(biāo)簽元素。但是下面的兩個(gè)

nextSibling
previousSibling 也是得下一個(gè)兄弟節(jié)點(diǎn)和上一個(gè)兄弟節(jié)點(diǎn)的，只是在IE中好用
--------------------關(guān)鍵字解釋

parseInt 轉(zhuǎn)化功能。

a = a > 0 ? a : 0;----三元表達(dá)式。

您可能感興趣的文章: