在JavaScript中,要实现单击父项后获取子项,可以通过事件委托和DOM操作来实现。以下是一个实现该功能的示例:
// HTML结构示例
<ul id="parentList">
<li>父项1
<ul>
<li>子项1</li>
<li>子项2</li>
<li>子项3</li>
</ul>
</li>
<li>父项2
<ul>
<li>子项4</li>
<li>子项5</li>
<li>子项6</li>
</ul>
</li>
</ul>
// JavaScript代码示例
document.getElementById('parentList').addEventListener('click', function(event) {
var target = event.target;
if (target.tagName === 'LI') {
var childItems = target.getElementsByTagName('li');
for (var i = 0; i < childItems.length; i++) {
console.log(childItems[i].textContent);
}
}
});
上述代码首先通过事件委托方式给父项添加了点击事件监听器。当父项被点击时,事件会冒泡到父项上,通过event.target
可以获取到实际被点击的元素。然后判断被点击的元素是否是LI
标签,如果是,则通过getElementsByTagName
方法获取到该父项下的所有子项,然后遍历子项并输出其内容。
这样就实现了在JavaScript中单击父项后获取子项的功能。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,这里只是举例了一些腾讯云的产品,其他厂商的类似产品也可以根据需求进行选择。
领取专属 10元无门槛券
手把手带您无忧上云