javascript - 为什么 document.getElementById.value = "XYZ" 不写入输入文本字段？

Question

document.getElementById.value = "Rohan" 确实可以部分工作，因为我可以在控制台日志中看到它。

const el = document.querySelector('#addFirstName');
el.focus();
document.execCommand('insertText', false, 'Rohan');//This doesnot work
document.querySelector('#addFirstName').value = "Rohan"//works partially - able to see it print in console but not on webpage.
el.value = "Rohan"//works partially - able to see it print in console but not on webpage.
document.getElementById('addFirstName').value = "Rohan"// works partially - able to see it print in console but not on webpage.
console.log(document.getElementById('addFirstName').value) //prints Rohan
el.dispatchEvent(new Event('change', {bubbles: true})); //doesnot update anything on webpage
console.log(el.dispatchEvent(new Event('change', {bubbles: true})))//prints true - event is dispatched but does nothing :(

<div class="modal-content u__bgColor--reverse u__border--bottom u__border--top u__border--right u__border--left">
          <!--template bindings={}--><a class="modal--btn__close u__text--brand"></a>
<form _ngcontent-mtu-7="" autocomplete="off">
<div _ngcontent-mtu-7="" class="add-address">
<div _ngcontent-mtu-7="" class="body__p-all--normal u__border--bottom">
<div _ngcontent-mtu-7="" class="form-input body__p-bottom--normal u__clearfix">
                            <span _ngcontent-mtu-7="" class="col__6-12 col__12-12--xs body__p-left--none">
                                <label _ngcontent-mtu-7="" class="form-input__label" data-content="First Name" for="addFirstName">
                                    <span _ngcontent-mtu-7="" class="form-input__label-content">First Name</span>
                                </label>
                                <input _ngcontent-mtu-7="" class="form-input__field ng-pristine ng-invalid ng-untouched" data-automation-id="addressFnameField" id="addFirstName" maxlength="40" ngcontrol="addFirstName" type="text">
                                <error-messages _ngcontent-mtu-7="" class="grid add-address__errorField" control="addFirstName" data-automation-id="addressFnameErrMsg"><!--template bindings={}--></error-messages>
                            </span>
                            <span _ngcontent-mtu-7="" class="col__6-12 col__12-12--xs body__p-right--none">
                                <label _ngcontent-mtu-7="" class="form-input__label" data-content="Last Name" for="lastName">
                                    <span _ngcontent-mtu-7="" class="form-input__label-content">Last Name</span>
                                </label>
                                <input _ngcontent-mtu-7="" class="form-input__field ng-pristine ng-invalid ng-untouched" data-automation-id="addressLnameField" id="addLastName" maxlength="60" ngcontrol="addLastName" type="text">
                                <error-messages _ngcontent-mtu-7="" class="grid add-address__errorField" control="addLastName" data-automation-id="addressLnameErrMsg"><!--template bindings={}--></error-messages>
                           </span>
                        </div>
                        <div _ngcontent-mtu-7="" class="body__p-vertical--small">
                    <button _ngcontent-mtu-7="" class="bttn bttn--primary add-address__address-savebtn disabled" data-automation-id="addressSavebutton" type="submit" disabled="">
                        <span _ngcontent-mtu-7="" class="bttn__content">Save</span>
                    </button>
                 </div>
                 </div>
</form>
</div>                 

在我打开网页时的检查元素中，我看到了一些元素的这些警告，并且我通过我的 chrome 扩展（更新输入文本字段）将值传递给的元素也在那里：

警告：[DOM] 找到 3 个具有非唯一 ID #addFirstName 的元素：

输入字段不会更新。但我可以看到它打印在控制台日志中。这是通过 google-chrome-extension，我在 selenium 上也尝试了类似的方法并遇到了同样的困难，但我能够使用发送键克服。不确定是什么原因造成的。它与 HTML 类有关吗？

我使用检查元素仔细查看了网页，发现一旦手动单击输入字段，类就会发生变化。

这可能是网页上没有更新输入文本的原因吗？我也试图触发一个事件，但没有帮助。谁能指导我正确的方向。

标签： javascripthtmlangularjsgoogle-chrome-extensioncontent-script