javascript - 如果按钮只有值和名称属性，如何使用 Javascript 单击该按钮

Question

这是表单，我想使用 Javascript 以编程方式单击提交按钮

<form action="/testseries/go" method="post">
  <div class="key">
    <i class="fa fa-mobile" aria-hidden="true"></i>
    <input type="text" name="username" placeholder="Phone Number" required="">
    <div class="clearfix"></div>
  </div>
  <div class="key">
    <i class="fa fa-lock" aria-hidden="true"></i>
    <input type="password" name="password" placeholder="Password" required="">
    <div class="clearfix"></div>
  </div>
  <input type="submit" value="Login"> //THIS BUTTON
</form>

问题是我是 Javascript 新手，我已经研究过了有像 getElementById 、 ClassName 等 DOM 元素，但在这个如果没有任何 DOM，我怎样才能点击按钮？

Answer 1

您可以使用querySelector:

const input = document.querySelector('form > input[type="submit"]');
console.log(input.value);

<form action="/testseries/go" method="post">
  <div class="key">
    <i class="fa fa-mobile" aria-hidden="true"></i>
    <input type="text" name="username" placeholder="Phone Number" required="">
    <div class="clearfix"></div>
  </div>
  <div class="key">
    <i class="fa fa-lock" aria-hidden="true"></i>
    <input type="password" name="password" placeholder="Password" required="">
    <div class="clearfix"></div>
  </div>
  <input type="submit" value="Login"> //THIS BUTTON
</form>

用简单的语言来说，'form > input[type="submit"]' 表示选择 input，它具有一个属性 type，其值是 submit，它是 form 的子级。