DOM 元素.最近的子元素

Question

查询 DOM 时，是否有任何原因导致标签不能作为子项使用？

var el = document.getElementById("myEl");
var group = el.closest(".form-group");
var ipt =  el.closest(".form-group > input");
var lbl =  el.closest(".form-group > label");
console.log(ipt);
console.log(lbl);

<div class="row">
  <div class="form-group col-sm-6">
    <label>Name
      <i class="fa fa-asterisk text-danger"></i>
    </label>
    <input type="text" class="form-control" id="myEl" value.bind="location.name & validate">
  </div>
</div>
    

Answer 1

您需要选择父级，然后寻找子级，无法将其组合。通过您的代码，它正在寻找作为输入或标签的父级。

var el = document.getElementById("myEl");
var group = el.closest(".form-group");
var ipt =  group.querySelector("input");
var lbl =  group.querySelector("label");
console.log(ipt);
console.log(lbl);

<div class="row">
  <div class="form-group col-sm-6">
    <label>Name
      <i class="fa fa-asterisk text-danger"></i>
    </label>
    <input type="text" class="form-control" id="myEl" value.bind="location.name & validate">
  </div>
</div>

Answer 2

.closest()

仅在 DOM 树中向上搜索，不搜索同级，也不向下搜索 DOM 树（参见 W3 资源）。由于 <label> 在本例中是同级，因此即使使用您提供的子 CSS 选择器，它也不会匹配。如果您想使用

.closest

，您可以使用它来定位两个元素的父元素（例如

.row

或

.form-group

），并在该父元素上使用

.querySelector

来获取第一个匹配的

<label>

:

var el = document.getElementById("myEl");
var group = el.closest(".form-group");
var ipt =  el.closest(".form-group > input");
var lbl =  el.closest(".row").querySelector("label");
console.log(ipt);
console.log(lbl);

<div class="row">
  <div class="form-group col-sm-6">
    <label>Name
      <i class="fa fa-asterisk text-danger"></i>
    </label>
    <input type="text" class="form-control" id="myEl" value.bind="location.name & validate">
  </div>
</div>