使用JavaScript或jQuery访问不带ID的DOM元素

Question

如何使用普通JS或最好是jQuery访问此表单的HTML元素？ 我想访问输入字段（用户名，密码）和按钮（登录）。 我很无能为力，因为这些元素没有“ ID”，并且某些类的类也相同。

我正在使用Chrome扩展程序。

<form data-bind="submit: login">
    <div class="form-group">
        <label>Email</label>
        <input class="form-control" type="text" data-bind="value: loginEmail">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input class="form-control" type="password" data-bind="value: loginPassword">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Log In</button>
        <button data-bind="click: logout" class="btn btn-default">Log Out</button>
    </div>
</form>

Answer 1

使用属性选择器

  console.log('email',$('[data-bind="value: loginEmail"]')); console.log('password',$('[data-bind="value: loginPassword"]')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form data-bind="submit: login"> <div class="form-group"> <label>Email</label> <input class="form-control" type="text" data-bind="value: loginEmail"> </div> <div class="form-group"> <label>Password</label> <input class="form-control" type="password" data-bind="value: loginPassword"> </div> <div class="form-group"> <button type="submit" class="btn btn-default">Log In</button> <button data-bind="click: logout" class="btn btn-default">Log Out</button> </div> </form> 

Answer 2

您可以使用querySelecor（ https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector ），例如：

document.querySelector('input[data-bind="value: loginEmail"]');

document.querySelector('input[data-bind="value: loginPassword"]');

Answer 3

您可以像这样使用input[type='password']选择器：

$('body').find("input[type='password']");