JavaScript 获取 HTML 中特定父元素下的子元素

JavaScript 获取 HTML 中特定父元素下的子元素

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找子元素示例</title>
</head>
<body>
 
<div id="parent">
  <p>第一个子元素</p>
  <span>另一个子元素</span>
  <div>
    <a href="#">链接</a>
  </div>
</div>
 
<script>
	// 获取父元素
	var parent = document.getElementById('parent');
	// 查找特定子元素
	var divChildren = parent.querySelector('div');
	var spanChildren = parent.querySelector('span');
	// 查找所有子元素
	var children = parent.querySelectorAll('*');
	// 输出找到的子元素
	children.forEach(function(child) {
	  console.log(child.tagName); // 打印标签名
	});
</script>
 
</body>
</html>
相关推荐
dleei1 小时前
彻底淘汰老旧 SVG 插件:unplugin-icons 与 Tailwind CSS v4 自定义图标最佳实践
前端·程序员·前端框架
LlNingyu1 小时前
文艺复兴,什么是XSS,常见形式(二)
前端·安全·xss
汉堡大王95272 小时前
# AI 终于能"干活"了——Function Calling 完全指南
javascript·人工智能·机器学习
明君879972 小时前
说说我为什么放弃使用 GetX,转而使用 flutter_bloc + GetIt
前端·flutter
Jingyou2 小时前
用 Astro 搭建个人博客:从零到上线的完整实践
前端
吴声子夜歌2 小时前
JavaScript——call()、apply()和bind()
开发语言·前端·javascript
小哈猪2 小时前
CSS Flex 与 Grid:谁才是布局之王?
javascript
高桥凉介发量惊人2 小时前
质量与交付篇(2/6):CI/CD 实战——自动构建、签名、分发
前端
leafyyuki2 小时前
SSE 同域长连接排队问题解析与前端最佳实践
前端·javascript·人工智能
高桥凉介发量惊人2 小时前
质量与交付篇(3/6):崩溃分析与线上问题回溯机制
前端