我可以在Java脚本中查询从子项中选择父项吗?

oxalkeyp  于 2022-09-18  发布在  Java
关注(0)|答案(3)|浏览(180)

如何使用querySelector从子元素中选择父元素?

在我的示例中,HTML结构如下所示:

<label>
  <input/> <!-- I know only this -->
</label>

在html中,我所知道的是只有子**,所以input

如何从子输入中获取父对象,从而获得label

据我所知,这样做很容易从父母那里得到孩子

child < parent吗?(类似的逻辑)。

如果querySelector()不能使用,有没有其他方法可以使用javascrip API?

2mbi3lxu

2mbi3lxu1#

使用.parentElement或使用.closest()

parentElement:https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

如果您只想要父元素。

最近:https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

如果您想要特定的标签(如果使用不当,可能会产生一些错误)

const input = document.querySelector("input");

// you get the same result with these 2
console.log(input.parentElement)

console.log(input.closest("label"))

// you can use all the method of element 
// like style, classList, etc...

input.parentElement.style.outline = "0.2rem solid red";
<label>
  <input type="text" /> <!-- I know only this -->
</label>
mpbci0fu

mpbci0fu2#

首先,在使用函数closest()获取父元素之后,可以获取输入元素:

var inputElement = document.querySelector('input');
var label = inputElement.closest('label');
console.log(label)
<label>
  <input type="text" /> <!-- I know only this -->
</label>
wfsdck30

wfsdck303#

通过输入标记获取元素,然后查找其parent。但是,一定要检查以下代码片段中的未定义和多个查询结果。

document.querySelector("input").parentElement

相关问题