如何选择标签相同但类别不同的​​多个元素？使用香草JS

Question

我有6种形式的输入，每个输入分别具有.first .second .third .fourth .fifth .sixth的类，我想使用香草JS选择它们，但是在尝试使用getElementsByClassName和querySelectorAll之后，它仍然没有解决。

这是我的代码行：

document.querySelectorAll("form input")[0].value==""

如何选择这些类中的所有元素？

在此先感谢您提供的任何帮助！

Answer 1

您只需通过标签名称进行选择：

const elements = document.getElementsByTagName("input")

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

Answer 2

您当前的代码document.querySelectorAll("form input")基本上可以满足您的要求。但是，然后执行[0].value==""，这基本上是获取第一个输入并检查其值是否为空。您可以将类sand应用于所有输入，例如：

function check() {
  var listo = document.getElementsByTagName("input");
  for (var i = 0; i < listo.length; i++) {
    listo[i].classList.add("sand");
  }

  for (let input of listo) {
    input.setAttribute("required", "");
    input.required = true;
  }

  console.log(listo[0]);
}

sandify.onclick = check;

input {
  margin: 5px 0;
}

input.sand {
  border: 1px solid sandybrown;
}

<form>
  <input type="text" /><br/>
  <input type="text" /><br/>
  <input type="text" /><br/>
  <input type="text" /><br/>
  <input type="text" /><br/>
</form>
<button id="sandify">sandify</button>