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>
相关推荐
不会写DN2 分钟前
如何在纯前端中通过手势交互来控制星球的转动
前端·交互
w2sfot2 分钟前
反AI逆向JS加密
javascript·人工智能·反ai
liliangcsdn21 分钟前
sentence-transformer如何离线加载和使用模型
开发语言·前端·php
东宇科技40 分钟前
如何使用js进行抠图。识别商品主体
开发语言·javascript·ecmascript
不会写DN42 分钟前
Vue3中的computed 与 watch 的区别
javascript·面试·vue
qq_3813385043 分钟前
TypeScript 类型安全与类型体操实战:从入门到精通
javascript·安全·typescript
朦胧之1 小时前
AI 编程工具使用浅谈
前端·后端
柳杉1 小时前
HTML-in-Canvas:让 Canvas 完美渲染 HTML 的 Web 新标准
前端·javascript
cTz6FE7gA1 小时前
WebGL实战:用Three.js创建3D场景,实现沉浸式Web体验
前端·javascript·webgl
We་ct1 小时前
LeetCode 69. x 的平方根:两种解法详解
前端·javascript·算法·leetcode·typescript·平方