如何在javascript中使用querySelector获取html选择元素

问题描述 投票:0回答:1

我有一个类名为“data”的 div,其中包含 3 个不同的元素:inpyt、select 和 textarea。

我想将元素放入带有 querySelectorAll 的数组中,并循环它们以将值设置回空。 输入和文本区域元素工作正常,但我无法“捕获”选择元素。

在 querySelectorAll 中,我首先使用类名,然后使用标记名。

我需要更改什么才能使其正常工作?

function resetValues() {
  var arr = document.querySelectorAll(".data>input,textarea,select");
  for (var i = 0; i < arr.length; i++) {
    arr[i].value = "";
  }
}
<div class="data">
  <input></input>
  <select>
    <option value="" required></option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <textarea></textarea>
</div>
<div>
  <button onclick="resetValues()" <Click</button>
</div>

我尝试重写querySelectorAll,但没有成功

document.querySelectorAll(".data>input,textarea,option[selected]");
document.querySelectorAll(".data>input,textarea,option[select]");
document.querySelectorAll(".data>input,textarea,select option");
document.querySelectorAll(".data>input,textarea,select>option");
document.querySelectorAll(".data>input,textarea,option");
javascript html arrays html-select queryselector
1个回答
0
投票

一个问题是选择器。

,
分隔不同的选择器。
.data>input,textarea,select
的意思是

  • .data>input
    或者
  • textarea
    或者
  • select

您应该使用

.data>input,.data>textarea,.data>select

或者,如果您使用的浏览器支持新的

:is
选择器:
.data > :is(input,textarea,select)

© www.soinside.com 2019 - 2024. All rights reserved.