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>
相关推荐
玖玖passion13 分钟前
React 常用 Hooks 函数及使用方法完全指南(useState / useEffect / useRef / useContext / useCallback / useMemo / useReducer)
前端·javascript
Awu122719 分钟前
⚡精通Claude第6课-Hooks钩子系统:从前端视角玩转AI自动化工作流
前端·aigc·claude
椰猫子19 分钟前
Spring Framework(Bean)
java·前端·spring
道清茗20 分钟前
【RH294知识点汇总】第 7 章 《 使用角色和 Ansible 内容集合简化 Playbook 》
java·前端·ansible
TechMasterPlus26 分钟前
Hermes 深度解析:React Native 高性能 JavaScript 引擎实践指南
javascript·react native·react.js
前端那点事28 分钟前
彻底弄懂async/await!解决回调地狱,Vue异步开发必备(超全实战)
前端·vue.js
VagueVibes35 分钟前
Openclaw 快速接入 DeepSeek V4 Pro 指南
javascript
A_nanda1 小时前
VS2022安装QT6.5.3后,如何更新项目配置
前端·javascript·vue.js
ZC跨境爬虫1 小时前
UI前端美化技能提升日志day8:(Watch专区字体优化+尺寸校准+视觉重构+结构分层)
前端·ui·重构·html
heyCHEEMS1 小时前
记录一下自动化构建中 SSE 与子进程管理的三个坑
javascript·node.js