javascript - 如何在vanilla js中选择一个在id中具有特定文本的选择类型对象？

Question

我有 html 元素，其 id 中包含关键字“target”。我想选择一个 id 中包含关键字的“select”元素。

<select id="page_blocks_0_buttons_1_target"><option value=""></option></select>
<select id="page_blocks_0_buttons_2_target"><option value=""></option></select>
<select id="page_blocks_0_buttons_3_target"><option value=""></option></select>
<select id="page_blocks_0_buttons_4_target"><option value=""></option></select>
<div id="page_target_div"></div>

我当前的尝试如下，但它也返回我不想要的 div 类型。

var targetFields = document.querySelectorAll("*[id*=target]");

Answer 1

querySelectorAll需要一个 CSS 选择器 - 您以 * 为前缀，它将选择所有元素 - 将其更改为 select 并且它应该按预期工作。请参阅下面的代码片段:

var targetFields = document.querySelectorAll("select[id*=target]");
console.log(targetFields)

<select id="page_blocks_0_buttons_1_target"><option value=""></option></select>
<select id="page_blocks_0_buttons_2_target"><option value=""></option></select>
<select id="page_blocks_0_buttons_3_target"><option value=""></option></select>
<select id="page_blocks_0_buttons_4_target"><option value=""></option></select>
<div id="page_target_div"></div>