javascript – 使用querySelectorAll时,有没有办法引用上下文节点的直接子节点而不使用ID?

假设我有一个 HTML结构
<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

要使用querySelectorAll查询“a”的子项,我可以执行类似的操作

//Get "b",but not "c"
document.querySelectorAll('#a > div')

我的问题是:是否可以在没有ID的情况下直接引用节点?我试过了

var a_div = document.getElementById('a')
a_div.querySelectorAll('> div') //<-- error here

但我收到一个错误,告诉我我使用的选择器无效.

如果有人想知道,我的真实用例会更复杂,比如’> .foo .bar .baz’所以我宁愿避免手工DOM遍历.目前我正在为root div添加一个临时id,但这似乎是一个丑陋的黑客……

解决方法

不,没有一种方法(尚未)引用某个元素的所有子元素而不使用对该元素的引用.因为>是一个 child combinator,表示父元素和子元素之间的关系,simple selector(父元素)是必要的(在您的示例中缺少).

评论BoltClock said中,Selectors API Level 2 specification定义方法findAllname可以改变“作为参数接受什么可能被称为相对选择器(可以以组合器而不是复合选择器开始的选择器)”.
实现时,可以按如下方式使用:

a_div.findAll('> div');

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...