如何将querySelectorAll限定到指定ID？MVC Razor获取指定隐藏域值

1. 限定querySelectorAll的选取范围到指定ID的元素 #

有两种实用方法可以实现这个需求：

• 方法一：先获取目标容器，再在容器内调用querySelectorAll
  先通过getElementById拿到指定ID的元素，然后在这个元素实例上调用querySelectorAll，所有选择操作都会被限定在该元素的内部DOM树中。示例代码：

// 获取目标容器
const targetContainer = document.getElementById('yourTargetId');
// 在容器内选取所有符合条件的元素（比如所有class为"item"的div）
const elements = targetContainer.querySelectorAll('div.item');

• 方法二：使用复合CSS选择器直接限定范围
  直接在querySelectorAll的选择器里，把指定ID的元素作为父级上下文，用空格分隔子选择器，同样能精准限定选取范围。示例代码：

// 直接选取id为"yourTargetId"元素内部的所有class为"item"的div
const elements = document.querySelectorAll('#yourTargetId div.item');

两种方法效果一致，你可以根据代码可读性和实际场景选择合适的方式。

2. 筛选表格内ID为"RID"的隐藏域并提取值到数组 #

这里先提个小提醒：HTML规范要求ID属性必须是页面唯一的，如果你的表格里有多个ID为"RID"的隐藏域，这其实不符合规范，可能会导致后续DOM操作出现异常。更合理的做法是把id改成class="RID"或者name="RID"，不过我先按照你描述的需求给出解决方案，同时补充规范写法的建议。

方案1：按你的需求（ID为"RID"）提取值 #

假设你的表格有唯一ID（比如id="dataTable"，如果没有建议给表格加上，方便定位），可以这样写：

// 定位到目标表格
const table = document.getElementById('dataTable');
// 在表格内查找所有ID为"RID"的隐藏域
const ridInputs = table.querySelectorAll('input[type="hidden"][id="RID"]');
// 将隐藏域的值转换为数组
const ridValues = Array.from(ridInputs).map(input => input.value);

方案2：规范写法（改用class代替重复ID） #

如果把隐藏域的id="RID"改成class="RID"，代码会更符合HTML规范，同时避免ID冲突问题：

<!-- Razor渲染的隐藏域修改为class -->
<input type="hidden" class="RID" value="@item.RID" />

对应的JS代码：

const table = document.getElementById('dataTable');
const ridInputs = table.querySelectorAll('input[type="hidden"].RID');
const ridValues = Array.from(ridInputs).map(input => input.value);

这样就能精准提取表格内目标隐藏域的值，不会包含页面上其他无关的隐藏域了。

内容的提问来源于stack exchange，提问作者Caverman