我可以这样做:
<div id="myDiv">
<div class="foo"></div>
</div>
myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");
也就是说，我可以成功地检索myDiv元素的所有具有类.foo的直接子元素。
问题是，它困扰我，我必须包括在选择器中的#myDiv，因为我是在myDiv元素上运行查询(所以它显然是多余的)。
我应该能够离开#myDiv关闭，但选择器是不合法的语法，因为它以>开始。
有人知道如何编写一个选择器，它只获取选择器所运行的元素的直接子元素吗?
当前回答
我想补充的是，您可以通过为当前节点分配临时属性来扩展: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");
其他回答
你可以像这样扩展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>
有人知道如何编写一个选择器，它只获取选择器所运行的元素的直接子元素吗?
编写“根”到当前元素的选择器的正确方法是使用:scope。
var myDiv = getElementById("myDiv");
var fooEls = myDiv.querySelectorAll(":scope > .foo");
然而，浏览器支持有限，如果你想使用它，你需要一个垫片。为此，我构建了scopedQuerySelectorShim。
我想补充的是，您可以通过为当前节点分配临时属性来扩展: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");
我用这个:
你可以避免键入“myDiv”两次并使用箭头。 当然，总是有更多的可能性。 可能需要一个现代的浏览器。
<!-- Sample Code -->
<div id="myDiv">
<div class="foo">foo 1</div>
<div class="foo">foo 2
<div class="bar">bar</div>
</div>
<div class="foo">foo 3</div>
</div>
// Return HTMLCollection (Matches 3 Elements)
var allMyChildren = document.querySelector("#myDiv").children;
// Return NodeList (Matches 7 Nodes)
var allMyChildren = document.querySelector("#myDiv").childNodes;
// Match All Children With Class Of Foo (Matches 3 Elements)
var myFooChildren = document.querySelector("#myDiv").querySelectorAll(".foo");
// Match Second Child With Class Of Foo (Matches 1 Element)
var mySecondChild = document.querySelector("#myDiv").querySelectorAll(".foo")[1];
// Match All Children With Class Of Bar (Matches 1 Element)
var myBarChild = document.querySelector("#myDiv").querySelector(".bar");
// Match All Elements In "myDiv" (Matches 4 Elements)
var myDescendants = document.querySelector("#myDiv").querySelectorAll("*");
我会和你一起去的
var myFoo = document.querySelectorAll("#myDiv > .foo");
var myDiv = myFoo.parentNode;
