首頁  >  文章  >  web前端  >  javascript取得dom的下一個節點方法

javascript取得dom的下一個節點方法

不言
不言原創
2018-05-05 11:34:523084瀏覽

這篇文章主要介紹了javascript獲取dom的下一個節點方法,實現在頁面點擊加減按鈕數字的累加,需要的朋友可以參考下

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


相關推薦:

##JavaScript取得導覽列中HTTP資訊實例分享

JavaScript取得cookie以及刪除cookie詳解

以上是javascript取得dom的下一個節點方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn