在元素之间添加换行符HTML代码分隔符“;“父节点”;基于javascript的函数
我有一个目的是根据所选的选项将用户发送到不同的链接在元素之间添加换行符HTML代码分隔符“;“父节点”;基于javascript的函数,javascript,html,nodes,Javascript,Html,Nodes,我有一个目的是根据所选的选项将用户发送到不同的链接 <form> <select name="deliveryType"> <option value="123">Item 1</option> <option value="456">Item 2</option> <option value="789">Item 3</option> </select> <
<form>
<select name="deliveryType">
<option value="123">Item 1</option>
<option value="456">Item 2</option>
<option value="789">Item 3</option>
</select>
<p><a href="javascript:void(0);" onClick="javascript:addToCart(this);">Submit</a>
<script>
function addToCart(t) {
var dT = t.parentNode.parentNode.childNodes[1].value;
alert(dT);
// location.href = "http://linkprefix.com/?variable=" + dT;
}</script>
</form>
项目1
项目2
项目3
函数addToCart(t){
var dT=t.parentNode.parentNode.childNodes[1]。值;
警报(dT);
//location.href=”http://linkprefix.com/?variable=“+dT;
}
它按预期工作。变量dT
返回所选选项的值
但是,如果
和
之间没有换行符,dT
返回未定义的。但是如果我将childNodes[1]
更改为childNodes[0]
,它就会再次工作。我不知道为什么会这样。我认为parentNode
和childNode
是基于HTML元素和其中的文本,而不是元素之间的换行符。如果让我猜的话,换行符被算作文本节点,但这对我来说毫无意义。这就是发生的事吗?有更好的方法吗?这是因为在HTML中,元素内部的空白被视为文本,文本被视为节点(请参阅)。因此,通过添加换行符,就是添加了一个节点,这就是为什么可以通过childNodes访问
节点[1]。如果没有换行符,则可以通过childNodes[0]访问
节点。如注释中所建议,将childNodes[1]
更改为childNodes[0]
会使函数工作,而不考虑元素之间的任何换行符或空格
childNodes
显然统计所有文本节点,而children
则不统计。此外,换行符也算作文本节点,这在对“文本”最严格的解释中是有意义的,但对我来说并不是很明显 使用children[0]
-它将在不考虑空格的情况下工作-children
不包括文本节点“换行符被计算为文本节点,但这对我来说毫无意义”-设置此样式时,它不仅会在
上换行,而且还会在\n
上换行(换行字符),因此,这可能是在childNodes
array@AlonEitan是的,这是有道理的。我的困惑主要是我假设文本节点只存在于能够有效地包含它们的元素中。我现在明白了,它被误导了。使用children
而不是childNodes
是我想要的。或者作为children[0]
而不考虑文本节点-当然,对于IE 8或less@JaromandaX请务必注意,Netscape Navigator的行为也不同。是的,除了没有人使用它,人们仍然使用IE8!谢谢你的解释,但不幸的是,这不是一个解决办法@Jaromanda在他的评论中提供了一个修正,我已经验证并在回答中添加了这个修正。