javascript - 如何在对象 HTMLInputElement 上使用查询选择器

Question

我正在尝试当文本字段具有焦点时，div 被选择为类:autocomplete，这是一个理解我的想法的例子，在我的真实问题比较复杂。我只需要在确定具有焦点的元素后，选择最近的 div 与 .autocomplete 在同一级别上的类，我想以这种方式获得它。我知道在 css 中我应该使用类似的东西:

input ~ div.autocomplete
($event.target is input in my case)

但我不知道在这种情况下该怎么做。谢谢。

function fn_selectAutocompleteClass($event) {
  console.log(($event.target));
}

.selectAutocomplete {
  background: green;
}

<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>

Answer 1

在这种情况下，您可以在目标元素父级上使用 querySelectorAll 访问 .autocomplete，如下面的代码片段。获取第 0 个索引，因为它将是匹配选择器查询的第一个元素。

function fn_selectAutocompleteClass($event) {
  console.log($event.target.parentNode.querySelectorAll('.autocomplete')[0]);

}

.selectAutocomplete {
  background: green;
}

<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>

希望这有帮助:)