我可以这样做:
<div id="myDiv">
<div class="foo"></div>
</div>
myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");
也就是说，我可以成功地检索myDiv元素的所有具有类.foo的直接子元素。
问题是，它困扰我，我必须包括在选择器中的#myDiv，因为我是在myDiv元素上运行查询(所以它显然是多余的)。
我应该能够离开#myDiv关闭，但选择器是不合法的语法，因为它以>开始。
有人知道如何编写一个选择器，它只获取选择器所运行的元素的直接子元素吗?
当前回答
function siblings(el) {
return el.closest('*:not(:scope)').querySelectorAll(':scope > *');
}
纯JS代码
El -是元素 这里我们有一个函数，它在以下步骤中工作:
取任何直接父类，但不取我们传递的el(最接近的可以取el，因此我们确保el不会作为结果) 带走所有直系子女
其他回答
我们可以很容易地使用childNodes获取元素的所有直接子元素，也可以使用querySelectorAll选择特定类的祖先元素，因此不难想象，我们可以创建一个新函数来获取两者并比较两者。
HTMLElement.prototype.queryDirectChildren = function(selector){
var direct = [].slice.call(this.directNodes || []); // Cast to Array
var queried = [].slice.call(this.querySelectorAll(selector) || []); // Cast to Array
var both = [];
// I choose to loop through the direct children because it is guaranteed to be smaller
for(var i=0; i<direct.length; i++){
if(queried.indexOf(direct[i])){
both.push(direct[i]);
}
}
return both;
}
注意:这将返回一个节点数组，而不是一个节点列表。
使用
document.getElementById("myDiv").queryDirectChildren(".foo");
我只是没有尝试就这么做了。这样能行吗?
myDiv = getElementById("myDiv");
myDiv.querySelectorAll(this.id + " > .foo");
试一试，也许有用，也许没用。抱歉，但我现在不在电脑上尝试它(从我的iPhone回复)。
我创建了一个函数来处理这种情况，我想我会分享它。
getDirectDecendent(elem, selector, all){
const tempID = randomString(10) //use your randomString function here.
elem.dataset.tempid = tempID;
let returnObj;
if(all)
returnObj = elem.parentElement.querySelectorAll(`[data-tempid="${tempID}"] > ${selector}`);
else
returnObj = elem.parentElement.querySelector(`[data-tempid="${tempID}"] > ${selector}`);
elem.dataset.tempid = '';
return returnObj;
}
本质上，你所做的是生成一个随机字符串(randomString函数在这里是一个导入的npm模块，但你可以自己做)，然后使用这个随机字符串来确保你在选择器中得到你期望的元素。然后你就可以自由使用>了。
我没有使用id属性的原因是id属性可能已经被使用了，我不想重写它。
我想补充的是，您可以通过为当前节点分配临时属性来扩展:scope的兼容性。
let node = [...];
let result;
node.setAttribute("foo", "");
result = window.document.querySelectorAll("[foo] > .bar");
// And, of course, you can also use other combinators.
result = window.document.querySelectorAll("[foo] + .bar");
result = window.document.querySelectorAll("[foo] ~ .bar");
node.removeAttribute("foo");
有人知道如何编写一个选择器，它只获取选择器所运行的元素的直接子元素吗?
编写“根”到当前元素的选择器的正确方法是使用:scope。
var myDiv = getElementById("myDiv");
var fooEls = myDiv.querySelectorAll(":scope > .foo");
然而，浏览器支持有限，如果你想使用它，你需要一个垫片。为此，我构建了scopedQuerySelectorShim。
