Javascript DOM 遍历的问题

Question

我创建了一个 Django 小部件，它将范围输入与文本输入链接起来，同步文本输入中范围输入中的选定值。请注意，我不能使用 getElementById，因为在创建小部件时，我还不知道将归因于每个小部件的 id。

最初，这两个小部件位于同一个<div>标签中，并使用：

def __init__(self, min_value=None, max_value=None):
widgets = (RangeInput(       attrs={'onchange':'this.parentNode.nextElementSibling.firstChild.value=this.value',#'this.nextElementSibling.value=this.value',
'oninput':'this.parentNode.nextElementSibling.firstChild.value=this.value',#'this.nextElementSibling.value=this.value',
'step':'any',
'min':min_value,
'max':max_value,
'width':'400px' },),
forms.NumberInput(attrs={'step':'any',
'onchange':'this.previousElementSibling.value=this.value',
'oninput':'this.previousElementSibling.value=this.value', })
)

工作正常。但是，我需要将小部件放在标签中

<div class="row">
<div class="col-xs-4 col-sm-4">
<input type="range" [...]>
</div>
<div class="col-xs-4 col-sm-4">
<input type="number" [...]>
</div>
</div>

我的 onchange 和 oninput JS 不再工作了。我试过这个：

'onchange': 'this.parentNode.nextElementSibling.firstChild.value=this.value',
'oninput': 'this.parentNode.nextElementSibling.firstChild.value=this.value',

不幸的是，这不起作用。

这是最终的 HTML，它不会同步：

<div class="row">
<div class="col-xs-4 col-sm-4">
<input type="range" name="form-0-value_0" value="4.51" step="any" min="0.01" onchange="this.parentNode.nextElementSibling.firstElementChild.value=this.value" max="100" oninput="this.parentNode.nextElementSibling.firstElementChild.value=this.value" id="id_form-0-value_0" width="400px">
</div>
<div class="col-xs-4 col-sm-4">
<input type="number" name="form-0-value_1" value="4.51" step="any" min="0.01" onchange="this.previousElementSibling.value=this.value" max="100" oninput="this.previousElementSibling.value=this.value" id="id_form-0-value_1">
</div>
</div>

我认为 parentNode 应该指向包含第一个输入的<div>，然后 nextElementSibling 应该捕获下一个<div>，firstChild 应该指向第二个输入。我做错了什么？

Answer 1

首先确保语法是onchange= ...而不是onchange: ...，然后将其用于范围

<input type="range" onchange='this.parentElement.nextElementSibling.firstElementChild.value=this.value' min=0 max=100 value=0 oninput='this.parentElement.nextElementSibling.firstElementChild.value=this.value'>

而这个用于数字显示

<input type="number" value=0>

如果要将数字字段中的更改与范围同步，请添加此

<input type="number" value=0 onchange='this.parentElement.previousElementSibling.firstElementChild.value=this.value' oninput='this.parentElement.previousElementSibling.firstElementChild.value=this.value'>  

更新：

firstChild vsfirstElementChild 根据 MDN 的说法，firstChildNode 将第一个子节点作为元素节点、文本节点或注释节点
(取决于哪个是第一个节点)返回，而 firstElementChild 将第一个子节点作为元素节点返回(忽略文本和注释节点)。需要注意的是，firstElementChild需要IE8，IE9和Safari的填充程序。(你可以在这里找到垫片，滚动到页面末尾)

因此，在您的情况下，HTML中的空格会导致创建一个文本节点(可以在MDN上找到)，引用

任何空格都会导致插入 #text 节点，从单个空格插入任意数量的空格、回车符、制表符等。