从event.target获取子元素

Question

< p > event.target 返回执行操作的DOM元素。如何从输出中获取特定的子元素？

这是我的表格（带有Angular标记）：

<form (ngSubmit)="onSubmit($event)" id="kekpek">
  <div class="form-group">
    <label>Example file input</label>
    <input type="file" class="form-control-file" #fileupload [(ngModel)]="myFile" name="myFile" (change)="fileChange($event)"/>
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

它会触发该函数：

onSubmit(event) {
    console.log(event.target);
}

输出整个表单。我需要在 onSubmit() 函数中访问 input 元素。

- mikebrsv

---

你如何识别这个特定的子元素？目前为止，我们没有足够的信息来帮助你。 - Austin Brunkhorst

你可以使用 event.target.children 来获取子元素列表（如果这不是显而易见的话）！ - Ben Kolya Mansley

您可以在元素上使用查询API。 - Arun P Johny

Answer 1

您可以使用documentElement.querySelector()方法。

function onSubmit(event){
    console.log(event.target.querySelector('input'));

}

您可以使用任何有效的CSS查询来获取所需的元素

- Chirag Ravindra

---

event.target.querySelector('input').value 的结果会给你输入框的内容。 - Nicolai Lissau

它也不会获取元素的子元素，就像问题所问的那样。 - Ben Racicot

@BenRacicot 问题的文本说“如何从输出中获取特定的子元素？”，这就是上面的答案试图解决的问题。如果你想要所有的子元素，你可以直接使用ParentNode.children。 - Chirag Ravindra

Answer 2

这应该会有所帮助。

onSubmit(event) {
    console.log(event.target.firstChild.children[1]);
}

- TWEEDOriginal

---

如果需要在第一层嵌套中捕获最后一个节点，可以使用event.target.lastChild。 - lortschi