当前位置: 首页 > news >正文

js获取多个div元素的方法。如果这些div有父子关系,如何进行区分?如何由子获得父?

获取div

  1. querySelectorAll
// 获取所有的 div 元素
const divs = document.querySelectorAll('div');
console.log(divs);  // 输出 NodeList [div, div, div, ...]
  1. getElementByTagName
const divs = document.getElementsByTagName('div');
console.log(divs);  // 输出 HTMLCollection [div, div, div, ...]

和NodeList的区别
document变化时HTMLCollection会自动更新

获取dom元素的父元素/子元素

  1. 访问父元素 parentElement属性
    只返回元素节点
const childDiv = document.querySelector('.child');
const parentDiv = childDiv.parentElement;
console.log(parentDiv);  // 输出父 div
  1. 访问子元素 children属性
    所有子元素
const parentDiv = document.querySelector('.parent');
const childDivs = parentDiv.children;
console.log(childDivs);  // 输出所有子 div
  1. 其他方法
    parentNode 返回所有子节点,(元素节点,文本节点……
const childDiv = document.querySelector('.child');
const parentDiv = childDiv.parentElement;
console.log(parentDiv);  // 获取该子 div 的父 div
http://www.sczhlp.com/news/1145.html

相关文章:

  • django+Vue的项目使用docker打包
  • PyTorch 构建轻量级验证码识别模型
  • Hello CnBlogs
  • 从简历到入职:Moka稳定性雷达如何预测候选人留存率
  • [POI2012] Prefixuffix 题解
  • 2025 -- 云智计划 -- 【CSP-S】模拟赛 #2_总结+题解
  • 20
  • 使Excel高亮显示选中表格(使选中的表格更加突出)
  • 2、统计连续登录5天的用户
  • AMD纯NPU运行AI画图StableDiffusion3.0模型
  • C#自学笔记:委托与事件
  • 电流探头去磁与调零操作对测量精度的影响
  • 企业HR如何将AI Agent作为战略引擎重构业务流程
  • 《大道至简》读后感
  • 7月29日总结
  • thradlocal
  • ThreadLocal线程隔离值为NULL,直接复制使用封装类
  • 基于 Nacos + Higress 的 MCP 开发新范式,手把手教程来了!
  • 使用Vue.js实现动态表单字段
  • 特征 - kkksc03
  • 7月29日
  • 图神经网络的未来与挑战
  • 网站SSL证书怎么选?不用SSL证书会怎么样?
  • 安全可靠的PolarDB V2.0 (兼容MySQL)产品能力及应用场景 - 王权富贵
  • 2025牛客暑期多校训练营5_J
  • 【LeetCode 24】力扣算法:两两交换链表中的节点
  • Pwn2Own柏林2025:第三天赛事成果与技术漏洞全记录
  • POLIR-Laws-民事诉讼法:手机录音能否作为民事诉讼证据?怎么录音才能被法院采信?
  • MCP是如何工作的?
  • OBS