nextSibling获取value问题

[dct598113667]

<td align="center">
<input type="button" value="-" onclick="alert(this.nextSibling.value)"/>
<input type="text" size="3" readonly value="6"/>
<input type="button" value="+"/>
</td>

结果为undifined

<td align="center">
<input type="button" value="-" onclick="alert(this.nextSibling.nodeValue)"/>
<input type="text" size="3" readonly value="6"/>
<input type="button" value="+"/>
</td>

结果为空

[Go 旅城通票]

标准浏览器下空白节点也算，所以this.nextSibling得到的是空白节点，你要获取下一个input，去掉-号和text之间的空白

<td align="center">
            <input type="button"  value="-" onclick="alert(this.nextSibling.nodeValue)"/><input type="text"  size="3" readonly value="6"/><input type="button" value="+"/>
          </td>

Web开发学习资料推荐
Web前端开发框架
javascript运行机制浅析

[dct598113667]

引用 1 楼 showbo 的回复:

标准浏览器下空白节点也算，所以this.nextSibling得到的是空白节点，你要获取下一个input，去掉-号和text之间的空白

<td align="center">
            <input type="button"  value="-" onclick="alert(this.nextSibling.nodeValue)"/><input type="text"  size="3" readonly value="6"/><input type="button" value="+"/>
          </td>

Web开发学习资料推荐 Web前端开发框架 javascript运行机制浅析

可是我输出的this.nextSibling是text

[dct598113667]

引用 2 楼 dct598113667 的回复:

[quote=引用 1 楼 showbo 的回复:] 标准浏览器下空白节点也算，所以this.nextSibling得到的是空白节点，你要获取下一个input，去掉-号和text之间的空白

<td align="center">
            <input type="button"  value="-" onclick="alert(this.nextSibling.nodeValue)"/><input type="text"  size="3" readonly value="6"/><input type="button" value="+"/>
          </td>

Web开发学习资料推荐 Web前端开发框架 javascript运行机制浅析

可是我输出的this.nextSibling是text[/quote] 用你的方法得到的值是null

[zzm_fengye]

<input type="button" value="-" id="reduce" onclick="alert(this.nextSibling.nextSibling.value)"/> <input type="text" size="3" readonly value="6"/> <input type="button" value="+"/> 不要问为什么，我也不知道！但是值是正确的

[天际的海浪]

nextSibling会获取到文本节点， 可以改用nextElementSibling nextElementSibling 只获取元素节点，不会获取文本节点，不过要ie9才支持

[its_good]

5#正解。

原因：IE8以后的浏览器包括现在的Chrome、opera等浏览器中，把节点与节点之间的空白符（即空格和换行）也视为文本节点。

断点检查下this.nodeSibling就可以看出来，是换行字符：