使用nextSibling屬性返回指定節(jié)點(diǎn)之后的下一個(gè)兄弟節(jié)點(diǎn)，（即：相同節(jié)點(diǎn)樹(shù)層中的下一個(gè)節(jié)點(diǎn)）。nextSibling屬性與nextElementSibling屬性的差別：
nextSibling屬性返回元素節(jié)點(diǎn)之后的兄弟節(jié)點(diǎn)（包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)即回車(chē)、換行、空格、文本等等）；
nextElementSibling屬性只返回元素節(jié)點(diǎn)之后的兄弟元素節(jié)點(diǎn)（不包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)）； 注意: 空格、回車(chē)也會(huì)看作文本，以文本節(jié)點(diǎn)對(duì)待。
下例中，如果兩個(gè)li元素之間有空格、回車(chē)，將返回 “undefined”。 今天犯了個(gè)很蛋疼的錯(cuò)誤，調(diào)試了半天，才發(fā)現(xiàn)在input 與font 標(biāo)簽之間多了個(gè)回車(chē)。（中間不應(yīng)有任何內(nèi)容，包括，回車(chē)，換行） <input type="text" name="username" onblur="checkName();" /><font></font>
解決方法1：去掉中間多余的內(nèi)容，input的nextSibling就是font結(jié)點(diǎn)
解決辦法2：用input 的nextElementSibling 方法，得到的就是font結(jié)點(diǎn)
<center>
<table>
<tr>
<td><input type="button" value="-" id="c1" onclick="a(this)"/></td>
<td><span>1</span></td>
<td><input type="button" value="+" id="c2" onclick="s(this)"/></td>
</tr>
</table>
</center>
<script type="text/javascript">
function a(obj){
var x = obj.parentNode.nextElementSibling;
var x1 = x.getElementsByTagName('span')[0];
if(parseInt(x1.innerHTML) > 0){
x1.innerHTML = parseInt(x1.innerHTML)-1;
}
}
function s(obj){
var x = obj.parentNode.previousElementSibling;
console.log(x);
var x1 = x.getElementsByTagName('span')[0];
x1.innerHTML = parseInt(x1.innerHTML)+1;
}
</script>
|
