javascript - 自动登录 HTML JS 因 getElementBy() 失败

Question

我在自动登录网页时遇到问题，如下所示:

<div class="content">
<div class="card text-center">
<form>
<div class="dc-form-field-set">
<div class="dc-form-field-set-group">
<div class="dc-form-field-set-content">
<div class="dc-form-row">
<div class="dc-form-group dc-form-row-group">
<span class="dl-input-container dl-input-container-icon-position-left">
<input name="username" class="dc-input dc-text-input dl-input-with-icon" id="username" required=""          type="email" placeholder="Adresse e-mail" value="" autocomplete="username"></span>
</div>
</div>
</div>
</div>
</div>
<div class="dc-form-field-set">
<div class="dc-form-field-set-group"><div class="dc-form-field-set-content">
<div class="dc-form-row"><div class="dc-form-group dc-form-row-group">
<input name="password" class="dc-input dc-text-input dl-input-with-padding-for-link dl-input-with- icon" id="password" required="" type="password" placeholder="Mot de passe" value="" autocomplete="current-password">
</div>
</div>
</div>
</div>
</div>

我尝试找到元素来填充它们并提交表单。

我通过 getElementsBy() 在 JS 中尝试了很多东西:

let row = document.getElementsByClassName('dc-form-field-set');
    for (var i = 0, j = row.length; i < j; i++) {
        alert('16a');
    }
    alert('13');

    let loginform = document.forms.form;

    //loginform.setAttribute("nojqueryvalidate", "false");
    alert('14');

    //let password = document.getElementsByClassName('dc-input dc-text-input dl-input-with-padding-for-link dl-input-with-icon')[0];
    //alert('17');
    //password.value = "pswd";
    //alert('17a');
    let username = document.getElementsByClassName('dc-input dc-text-input dl-input-with-icon');
    alert('16:' );
    for (var i = 0, j = body.length; i < j; i++)
    {
        alert('16a');
    }
    //username.setAttribute("placeholder", "text");
    //alert('16a');
    //username.setAttribute("autocomplete", "");
    //alert('16b');
    //let password = document.getElementsByClassName('dc-input dc-text-input dl-input-with-padding-for-link dl-input-with-icon')[0];
    //alert('17');
    //let sub = loginform.getElementsByClassName('dl-button-block dl-button-info dl-button')[0].getElementsByTagName('input')[0];

    //alert('17a');
    username.value = 'toto@gmail.com';
    alert('17b');
    password.value = "pswd";
    loginform.submit();
    alert('18');`

当我尝试获取元素时，大多数情况下结果为空，并且我无法为用户名和密码字段设置特定值。

有人遇到过类似的问题吗？我错过了什么？

编辑:这里是自动填充和手动填充之间的屏幕截图 link

Answer 1

我猜你正在寻找这个:

document.getElementById('username').value = "some name";
document.getElementById('password').value = "passwword";
document.querySelector('form button').click();

<div class="content">
<div class="card text-center">
<form>
<div class="dc-form-field-set">
<div class="dc-form-field-set-group">
<div class="dc-form-field-set-content">
<div class="dc-form-row">
<div class="dc-form-group dc-form-row-group">
<span class="dl-input-container dl-input-container-icon-position-left">
<input name="username" class="dc-input dc-text-input dl-input-with-icon" id="username" required=""          type="email" placeholder="Adresse e-mail" value="" autocomplete="username"></span>
</div>
</div>
</div>
</div>
</div>
<div class="dc-form-field-set">
<div class="dc-form-field-set-group"><div class="dc-form-field-set-content">
<div class="dc-form-row"><div class="dc-form-group dc-form-row-group">
<input name="password" class="dc-input dc-text-input dl-input-with-padding-for-link dl-input-with- icon" id="password" required="" type="password" placeholder="Mot de passe" value="" autocomplete="current-password">
</div>
</div>
</div>
</div>
</div>