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

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>