Rumah >hujung hadapan web >tutorial js >Kaedah JavaScript untuk mendapatkan nod seterusnya kemahiran dom_javascript

Kaedah JavaScript untuk mendapatkan nod seterusnya kemahiran dom_javascript

WBOY
WBOYasal
2016-05-16 16:37:011435semak imbas

Gunakan javascript untuk menulis kaedah menambah nombor dengan mengklik butang tambah dan tolak pada halaman.

html yang mudah mungkin seperti ini. Hanya faham dan jangan risau tentang butiran ini

<input type="button" value="+" onclick="jia(this)" />
<label class="num">0</label>
<input type="button" value="-" onclick="jian(this)" />

Ia kelihatan seperti ini

Kod javascript adalah seperti berikut

<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 &#63; a : 0;
previousnode.innerHTML = a;
}
</script>

Terangkan:

fungsi jian(a) dan

fungsi jia(a) ialah objek yang sedang diklik. Tambahkan ini pada kaedah acara onclick;

- nextElementSibling Mendapat nod seterusnya nod semasa (mendapat nod adik beradik seterusnya)

- previousElementSibling mendapat nod sebelumnya bagi nod semasa

Nota: IE akan melangkau nod dokumen ruang (seperti aksara baris baharu) yang dijana antara nod, tetapi Mozilla tidak akan melakukan ini - FF akan membaca elemen susun atur seperti ruang dan aksara baris baharu sebagai nod, jadi , elemen nod seterusnya yang boleh dibaca menggunakan nextSibling dalam IE perlu ditulis seperti ini dalam FF: nextElementSibling.

Penjelasan di atas bermaksud menggunakan nextElementSibling dan previousElementSibling untuk mendapatkan nod adik beradik seterusnya dan nod adik beradik sebelumnya Anda boleh mengalih keluar pemisah baris, ruang, dsb., dan terus mencari elemen label kami. Tetapi dua berikut

Adik Beradik seterusnya

previousSibling juga merujuk kepada nod adik beradik seterusnya dan nod adik beradik sebelumnya, tetapi ia mudah digunakan dalam IE
--------------------Penjelasan kata kunci

fungsi penukaran parseInt.

a = a > a : 0;----ungkapan ternari.


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn