我可以这样做:
<div id="myDiv">
<div class="foo"></div>
</div>
myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");
也就是说，我可以成功地检索myDiv元素的所有具有类.foo的直接子元素。
问题是，它困扰我，我必须包括在选择器中的#myDiv，因为我是在myDiv元素上运行查询(所以它显然是多余的)。
我应该能够离开#myDiv关闭，但选择器是不合法的语法，因为它以>开始。
有人知道如何编写一个选择器，它只获取选择器所运行的元素的直接子元素吗?
当前回答
你可以像这样扩展Element来包含一个getDirectDesc()方法:
Element.prototype.getDirectDesc = function() { const descendants = Array.from(this.querySelectorAll('*')); const directDescendants = descendants.filter(ele => ele.parentElement === this) return directDescendants } const parent = document.querySelector('.parent') const directDescendants = parent.getDirectDesc(); document.querySelector('h1').innerHTML = `Found ${directDescendants.length} direct descendants` <ol class="parent"> <li class="b">child 01</li> <li class="b">child 02</li> <li class="b">child 03 <ol> <li class="c">Not directDescendants 01</li> <li class="c">Not directDescendants 02</li> </ol> </li> <li class="b">child 04</li> <li class="b">child 05</li> </ol> <h1></h1>
其他回答
function siblings(el) {
return el.closest('*:not(:scope)').querySelectorAll(':scope > *');
}
纯JS代码
El -是元素 这里我们有一个函数，它在以下步骤中工作:
取任何直接父类，但不取我们传递的el(最接近的可以取el，因此我们确保el不会作为结果) 带走所有直系子女
下面的解决方案与到目前为止提出的解决方案不同，对我来说是可行的。
基本原理是首先选择所有匹配的子节点，然后过滤掉不是直接子节点的子节点。如果子元素没有具有相同选择器的匹配父元素，则子元素是直接子元素。
function queryDirectChildren(parent, selector) {
const nodes = parent.querySelectorAll(selector);
const filteredNodes = [].slice.call(nodes).filter(n =>
n.parentNode.closest(selector) === parent.closest(selector)
);
return filteredNodes;
}
HTH!
我想补充的是，您可以通过为当前节点分配临时属性来扩展: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");
如果你确定元素是唯一的(比如你的ID case):
myDiv.parentElement.querySelectorAll("#myDiv > .foo");
对于一个更“全局”的解决方案:(使用matchesSelector shim)
function getDirectChildren(elm, sel){
var ret = [], i = 0, l = elm.childNodes.length;
for (var i; i < l; ++i){
if (elm.childNodes[i].matchesSelector(sel)){
ret.push(elm.childNodes[i]);
}
}
return ret;
}
elm是父元素，sel是选择器。完全可以作为一个原型。
下面是一个用普通JS编写的灵活方法，它允许你只对元素的直接子元素运行CSS选择器查询:
var count = 0;
function queryChildren(element, selector) {
var id = element.id,
guid = element.id = id || 'query_children_' + count++,
attr = '#' + guid + ' > ',
selector = attr + (selector + '').replace(',', ',' + attr, 'g');
var result = element.parentNode.querySelectorAll(selector);
if (!id) element.removeAttribute('id');
return result;
}
