Question

我有一个看起来像radioenum的html

<div class="col-xs-12" type="radioenum" field="arr_c">
// elements
</div>

我正在尝试获取其中包含的元素，但不确定如何继续

没有可以调用的名为getElementsByFieldName的函数，并且类名不是唯一的，所以我不能使用getElementsByClassName

Answer 1

如果要获取页面上与选择器匹配的第一个元素，请使用querySelector，如果要获取所有选择器，请使用querySelectorAll。

（注意：enum是保留字，因此您不能调用刚刚发现的变量名）

const radios = document.querySelectorAll('[type="radioenum"');
radios.forEach(radio => console.log(radio.textContent));

<div class="col-xs-12" type="radioenum" field="arr_c">
  Test 1
</div>

<div class="col-xs-12" type="not-radioenum" field="arr_c">
  Test 2
</div>

<div class="col-xs-12" type="radioenum" field="arr_c">
  Test 3
</div>

编辑

我刚刚注意到的一件事是type和field都是无效的属性。您可以在许多元素but div is not one上使用type。因此，首先应将这些属性切换为data-属性。您可以用相同的方式获取数据属性，然后在循环中，可以从当前元素中解构field属性并检查其值。

const radios = document.querySelectorAll('[data-type="radioenum"]');

radios.forEach(radio => {
  const { dataset: { field } } = radio;
  if (field === 'arr_c') {
    console.log('Found arr_c');
  } else {
    console.log(radio.textContent)
  }
});

<div class="col-xs-12" data-type="radioenum" data-field="arr_a">
  Test 
</div>

<div class="col-xs-12" data-type="not-radioenum" data-field="arr_b">
  Test 2
</div>

<div class="col-xs-12" data-type="radioenum" data-field="arr_c">
  Test 3
</div>

Answer 2

改为使用querySelector()，您可以通过元素的属性选择元素。它将返回第一个匹配的Element，就像getElementById()一样。

示例：

document.querySelector("[type=radioenum]");

如果需要捕获多个输入，也可以使用querySelectorAll()，但是它将返回NodeList，而不是Element：

document.querySelectorAll("[type=radioenum]");

getElementsByFieldName吗？获取具有特定字段名称的所有放射性元素

2 个答案: