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>
相关推荐
念风零壹6 小时前
AI 时代的前端技术:从系统编程到 JavaScript/TypeScript
前端·ai
光影少年7 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js
小毛驴8507 小时前
Vue 路由示例
前端·javascript·vue.js
发现一只大呆瓜7 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
m0_719084118 小时前
React笔记张天禹
前端·笔记·react.js
Ziky学习记录8 小时前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n8 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n8 小时前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
我是一只puppy9 小时前
使用AI进行代码审查
javascript·人工智能·git·安全·源代码管理
颜酱9 小时前
从二叉树到衍生结构:5种高频树结构原理+解析
javascript·后端·算法