javascript獲取dom的下一個(gè)節(jié)點(diǎn)方法
利用javascript 寫一個(gè)在頁(yè)面點(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將跳過(guò)在節(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á)式。
- javascript 獲取HTML DOM父、子、臨近節(jié)點(diǎn)
- JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
- JavaScript獲取DOM元素的11種方法總結(jié)
- JavaScript DOM節(jié)點(diǎn)操作方法總結(jié)
- javascript firefox兼容ie的dom方法腳本
- javascript dom操作之cloneNode文本節(jié)點(diǎn)克隆使用技巧
- JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
- JavaScript實(shí)現(xiàn)獲取dom中class的方法
- JavaScript中對(duì)DOM節(jié)點(diǎn)的訪問(wèn)、創(chuàng)建、修改、刪除
- javascript DOM 操作基礎(chǔ)知識(shí)小結(jié)
- 淺談Javascript中的12種DOM節(jié)點(diǎn)類型
- js中script的上下放置區(qū)別,Dom的增刪改創(chuàng)建操作實(shí)例分析
相關(guān)文章
如何使用JavaScript實(shí)現(xiàn)棧與隊(duì)列
這篇文章主要介紹了如何使用JavaScript實(shí)現(xiàn)棧與隊(duì)列。棧和隊(duì)列是web開(kāi)發(fā)中最常用的兩種數(shù)據(jù)結(jié)構(gòu)。絕大多數(shù)用戶,甚至包括web開(kāi)發(fā)人員,都不知道這個(gè)驚人的事實(shí)。,需要的朋友可以參考下2019-06-06使用 JavaScript 在沒(méi)有插件的情況下輸入文本掩碼的示例詳解
這篇文章主要介紹了使用 JavaScript 在沒(méi)有插件的情況下輸入文本掩碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06純js實(shí)現(xiàn)的論壇常用的運(yùn)行代碼的效果
bluidea論壇的腳本板塊的版主寫的,不錯(cuò),轉(zhuǎn)到這!2008-07-07JS HTML5 音樂(lè)天氣播放器(Ajax獲取天氣信息)
寫個(gè)播放器應(yīng)付復(fù)習(xí),因?yàn)锳jax涉及到跨域獲取天氣信息,有兩個(gè)版本,一個(gè)是直接跨域,IE10支持,其他的瀏覽器要改配置2013-05-05JavaScript實(shí)現(xiàn)倒計(jì)時(shí)代碼段Item1(非常實(shí)用)
現(xiàn)今團(tuán)購(gòu)網(wǎng)、電商網(wǎng)、門戶網(wǎng)等,常使用時(shí)間記錄重要的時(shí)刻,如時(shí)間顯示、倒計(jì)時(shí)差、限時(shí)搶購(gòu)等,本文分析不同倒計(jì)時(shí)效果的計(jì)算思路及方法,掌握日期對(duì)象Date,獲取時(shí)間的方法,計(jì)算時(shí)差的方法,實(shí)現(xiàn)不同的倒時(shí)計(jì)效果2015-11-11Js 獲取HTML DOM節(jié)點(diǎn)元素的方法小結(jié)
在Web應(yīng)用程序特別是Web2.0程序開(kāi)發(fā)中,經(jīng)常要獲取頁(yè)面中某個(gè)元素,然后更新該元素的樣式、內(nèi)容等。2009-04-04詳解JSONObject和JSONArray區(qū)別及基本用法
這篇文章主要介紹了詳解JSONObject和JSONArray區(qū)別及基本用法,需要的朋友可以參考下2017-10-10淺析JavaScript訪問(wèn)對(duì)象屬性和方法及區(qū)別
這篇文章主要介紹了淺析JavaScript訪問(wèn)對(duì)象屬性和方法及區(qū)別的相關(guān)資料,需要的朋友可以參考下2015-11-11