js獲取HTML頁面中元素的元素

Question

我整天都堆在這里，試圖使用 JS 編輯輸入文本的值，

我不知道是否有另一種方法可以做到這一點，因為知道此文本輸入沒有 id 屬性並且沒有 name 屬性

但它位於具有唯一 ID 的元素內（text-input-1 和 text-input-2）

 <div class="mat-form"> <text-input _ngcontent18="" formcontrolname="nom" class="ng-untouched " id="text-input-1"> <input _ngcontent29="" type="text" class="ng-touched"> </text-input> </div> <div class="mat-form"> <text-input _ngcontent18="" formcontrolname="prenom" class="ng-untouched " id="text-input-2"> <input _ngcontent29="" type="text" class="ng-touched"> </text-input> </div>

所以我試圖讓 id="text-input-1" 里面的元素給他一個唯一的 id，

例子

<input id="prenom_input" _ngcontent-fno-c29="" type="text" class="ng-touched">

然后用

document.getElementById("nom_input").value = "Jean";

和

document.getElementById("prenom_input").value = "leclaire";

或者如果有其他方法可以做到

謝謝大家。

Answer 1

您可以使用querySelector訪問輸入，因為它與 CSS 選擇器相同：

// The first input
const inputNom = document.querySelector('text-input#text-input-1 input');

// The second input
const inputPrenom = document.querySelector('text-input#text-input-2 input');

// Set/get the values using JS
inputNom.value = '...';

Answer 2

因為我的問題與同一個 subjet 相關，所以最好將它保留在同一個 Stackoverflow 問題中，

我有這樣的情況，父元素沒有唯一的id ，我可以在其他一些方法中獲取輸入元素，以更改此輸入的值。

 <mail-input placeholder="Email" class="ng-untouched"> <input autocomplete="off" type="text" class="ng-touched"> </mail-input>

謝謝大家