Accessing DOM elements without ID in using JavaScript or jQuery

Question

How can I access the HTML elements of this form using plain JS or preferably jQuery? I want to access input fields (username, password) and button (login). I'm clueless since these elements don't have "ID" and class is also the same for some.

I'm working on a Chrome extension.

<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

Use the attribute selector

  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

You can use querySelecor( https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector ), for example like this:

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

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

Answer 3

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

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