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>
相关推荐
谭光志1 小时前
Vibe Coding 时代,程序员该何去何从
前端·后端·ai编程
仿生狮子3 小时前
别再说“全栈”了,AI 时代团队只认这 5 种人
前端·人工智能·后端
kyriewen3 小时前
AI 写的 React 组件,合并前必查的 6 个坏味道——每个都有代码对比
前端·javascript·react.js
Highcharts.js3 小时前
软件开发公司为什么选择 Highcharts?
前端·前端框架·echarts·数据可视化·技术选型·highcharts·图表工具
多加点辣也没关系4 小时前
JavaScript|第13章:原始类型的方法
开发语言·javascript·ecmascript
এ慕ོ冬℘゜4 小时前
深入理解 JavaScript 事件体系:Window、鼠标与键盘事件详解
开发语言·javascript·okhttp
阿祖zu4 小时前
企业 AI 转型之痛,个人提效十倍不止,组织效率仍止步不前?
前端·aigc·agent
摇滚侠5 小时前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
酸梅果茶6 小时前
【6】lightning_lm项目-LIO 前端 -点云预处理模块
前端·slam
触底反弹6 小时前
🔥 RAG 到底是怎么工作的?掰开揉碎了给你讲明白!
javascript·人工智能·后端