javascript擷取dom的下一個節點方法_javascript技巧

利用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;----三元運算式。