我有一些输入上面有标签。 我想为他们每个人找到最接近的标签。 问题是有些输入没有直接标签，但上面有一个标签，如test和test2
最初我是这样的:
let el = document.querySelector(`label[for="${this.element.id}"]`)
除了在一行中有两个输入的少数情况外，所有情况下都是这样。 例如test和test2。 如何获取test2输入的test标签？
<div>
<label for="test">Interval</label><br>
<input min="0.1" id="test" placeholder="Min" step="0.1" type="number">
<input min="0.1" id="test2" placeholder="Max" step="0.1" type="number">
<label for="limit">Limit</label><br>
<input id="limit" step="1" type="number">
</div>
您可以为此使用aria-labelledby属性。 aria-labelledby属性建立对象与其标签之间的关系，它的值应该是一个或多个元素ID。
这里，我们可以假设test2实际上是您在代码中所具有的内容，例如this.element.id。 使用该方法，我们可以使用getAttribute()方法获得aria-labelledBy属性值。 然后，我们可以简单地将其传递给document.querySelector，以获取最接近的标签，即输入ID。
null
let input = document.querySelector(`#test2`)
let labelId = input.getAttribute('aria-labelledby')
let el1 = document.querySelector(`label[id="${labelId}"]`)
el1.style.color = "green"<div>
<label id="interval">Interval</label><br>
<input min="0.1" id="test" placeholder="Min" step="0.1" type="number" aria-labelledby="interval">
<input min="0.1" id="test2" placeholder="Max" step="0.1" type="number" aria-labelledby="interval">
</div>
您可以使用少量的手动DOM遍历，在DOM中找到最近的父标签元素，如下所示:
null
function nearestParentLabel(inputId) {
let input = document.getElementById(inputId);
let label = input.previousSibling;
while (label != null && label.tagName != "LABEL") {
label = label.previousSibling;
}
return label;
}
console.log(
nearestParentLabel("test"), // returns "test" label
nearestParentLabel("test2"), // returns "test" label
nearestParentLabel("limit"), // returns "limit" label
);<div>
<label for="test">Interval</label><br>
<input min="0.1" id="test" placeholder="Min" step="0.1" type="number">
<input min="0.1" id="test2" placeholder="Max" step="0.1" type="number">
<label for="limit">Limit</label><br>
<input id="limit" step="1" type="number">
</div>
我给你做了一个函数SearchLabel！
null
function searchLabel(inputElem) {
var elem = inputElem;
while (true) {
if (elem.tagName == "LABEL") {
break;
}
if (elem == null) {
break;
}
elem = elem.previousSibling;
}
return elem;
}
console.log(searchLabel(document.getElementById("test2")));<div id="myDiv">
<label for="test">Interval</label><br>
<input min="0.1" id="test" placeholder="Min" step="0.1" type="number">
<input min="0.1" id="test2" placeholder="Max" step="0.1" type="number">
<label for="limit">Limit</label><br>
<input id="limit" step="1" type="number">
</div>