使用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

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

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

Answer 2

使用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 3

您可以使用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"]');