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