无法从NodeList获取值？

Question

我有一个MVC项目，我将记录ID值存储在隐藏字段中。然后，当用户更新页面时，我使用querySelectorAll将它们全部放入列表中。从那里，我需要遍历列表并调用AJAX函数来更新数据库。

最初创建它时，我使用Array.from将对象放入一个Array，然后从那里循环遍历该数组以调用我的Ajax。我发现这在IE11中不起作用。我通常使用Chrome，但客户群是IE11。

这就是我用来使其在Chrome中运行的方式。它将获取所有ID ='RID'的隐藏字段，然后转换为数组，然后循环该数组。

let listItems = document.querySelectorAll('input[type="hidden"]#RID');
console.log(listItems);

var bidRID = Array.from(listItems, function (el) { return el.value })   
for (var i = 0, l = bidRID.length; i < l; i++) { 
    ....AJAX CALL....
    data: { rid: bidRID[i], prefOrder: i },
}

我一直在寻找可以在IE11中执行的操作，并尝试了一些不同的操作，但似乎无法在此处确定要执行的操作。

我查看了调试工具中的列表，这是预期的隐藏字段的列表。因此，我认为我可以遍历该对象列表并获得“值”，但是我尝试过的事情又变回了空白或NULL。

let listItems = document.querySelectorAll('input[type="hidden"]#RID');

for (var i = 0, l = listItems.length; i < l; i++) {
    alert(listItems[i].val);
};

也尝试过

for (var i = 0, l = listItems.length; i < l; i++) {
    alert(listItems[i].innerHTML);
};

和

for (var i = 0, l = listItems.length; i < l; i++) {
    alert(listItems[i].NodeValue);
};

这是从控制台查看NodeList时的屏幕截图。

Answer 1

首先，id应该是唯一的，其次，对于使用JavaScript的JavaScript，您可以使用.value来获取input的值。

请注意，当结合使用type，id和属性选择器时，就像'input#RID[type="hidden"]'一样，尽管id是唯一的，实际上只需要id #RID。

由于它们都具有name属性，因此可以代替id或不使用[type="hidden"]来使用它。

let listItems = document.querySelectorAll('input[type="hidden"][name="RID"]');

for (var i = 0; i < listItems.length; i++) {
    console.log(listItems[i].value);
};

堆栈片段

let listItems = document.querySelectorAll('input[type="hidden"][name="RID"]');

for (var i = 0; i < listItems.length; i++) {
  console.log(listItems[i].value);
};

<input type="hidden" name="RID" value="1">
<input type="hidden" name="RID" value="2">
<input type="hidden" name="RID" value="3">
<input type="hidden" name="RID" value="4">
<input type="hidden" name="RID" value="5">

---

如果由于未知原因它们仍然具有相同的id，则可以使用属性选择器来定位它们，就像这样

let listItems = document.querySelectorAll('input[type="hidden"][id="RID"]');

for (var i = 0; i < listItems.length; i++) {
  console.log(listItems[i].value);
};

<input type="hidden" id="RID" value="1">
<input type="hidden" id="RID" value="2">
<input type="hidden" id="RID" value="3">
<input type="hidden" id="RID" value="4">
<input type="hidden" id="RID" value="5">