Question

我有an HTML form with a simple JavaScript function，用于根据所选的选项将用户发送到其他链接。

<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>

它按预期工作。变量dT返回所选选项的值。

但是，如果<form>和<select>之间没有换行符，则dT会返回undefined。但是，如果我将childNodes[1]更改为childNodes[0]，那么它会再次起作用。我不知道为什么会这样。我认为parentNode和childNode基于HTML元素及其中的文本，而不是元素之间的换行符。如果我不得不猜测，换行符被视为文本节点，但这对我没有意义。那是什么发生的？有更好的方法吗？

Answer 1

那是因为在HTML中，元素内的空格被视为文本，文本被视为节点（参见w3schools）。因此，通过添加换行符，您将添加一个节点，这就是可以通过childNodes [1]访问<select>节点的原因。如果没有换行符，则可以通过childNodes [0]访问<select>节点。

Answer 2

正如评论中所建议的那样，将childNodes[1]更改为children[0]会使该功能发挥作用，而不管元素之间是否有任何换行符或空格。 See the updated fiddle

childNodes显然计算所有文本节点，而children则没有。换句话说，换行符算作文本节点，这对“文本”的最严格解释很有意义，但对我来说并不是很明显。

在元素之间添加换行符HTML代码断开＆＃34; parentnode＆＃34;基于javascript函数

2 个答案: