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>
相关推荐
REDcker12 分钟前
个人博客网站建设指南 Markdown资产化与静态站选型部署
前端·后端·博客·markdown·网站·资产·建站
zhangfeng113320 分钟前
小龙虾 wordbuddy 安装浏览器控制器 agent-browser npm install -g agent-browse
前端·人工智能·npm·node.js
徐小夕33 分钟前
100小时,我做了一款AI CAD建模软件,开源!
前端·vue.js·github
Bigger34 分钟前
因为看不懂小棉袄的画,我写了个 AI 程序帮我“翻译”她的世界
前端·人工智能·ai编程
送鱼的老默1 小时前
学习笔记--入门typescript直接案例开搞
前端·typescript
Prometheus1 小时前
从 XMLHttpRequest 到 fetch、ReadableStream、SSE、EventSource:前端流式通信完整梳理
前端
光影少年1 小时前
useEffect 完整理解:依赖数组、副作用清理、模拟生命周期
前端·react.js·程序员
之歆2 小时前
DAY_18深度解析:数据类型转换与运算符全攻略(上)
前端·javascript
大家的林语冰2 小时前
pnpm 11 发布,弃用 JSON 和 npm CLI,进化为纯 ES6 模块,新增 pnpm pack-app 等命令,供应链保护默认启用,要求 Node
前端·javascript·node.js
漓漾li2 小时前
每日面试题-前端2
前端·react.js·面试