输入元素如何获得相应的父表单？

Question

假设我有一个引导表单<form><div class='form-group'><input class='form-control' id='name'></div><div class='form-group'><input class='form-control' id='email'></div></form>所以现在我通过它的 id 获取 name 元素：let name= document.querySelector('#name');现在如何通过这个 'name' 元素获取 '' 元素在这种情况下，更容易获取表单（父元素的父元素）。假设我有这么多嵌套的 div，并且很难跟踪嵌套的 div。所以在这种情况下如何从输入中获取表单元素。

Answer 1

最近的（）方法遍历元素及其父元素（朝向文档根），直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回 null。

let name = document.querySelector('#name');

console.log(name.closest('form'));

let name2 = document.querySelector('#name2');

console.log(name2.closest('form'));

<form id="form1">

<div class='form-group'>

<input class='form-control' id='name'>

</div>

<div class='form-group'>

<input class='form-control' id='email'>

</div>

</form>

<form id="form2">

<div class='form-group'>

<input class='form-control' id='name2'>

</div>

<div class='form-group'>

<input class='form-control' id='email2'>

</div>

</form>