你可以像这样扩展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>

我创建了一个函数来处理这种情况，我想我会分享它。

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。

var myDiv = getElementById("myDiv");
var fooEls = myDiv.querySelectorAll(":scope > .foo");

然而，浏览器支持有限，如果你想使用它，你需要一个垫片。为此，我构建了scopedQuerySelectorShim。

我用这个:

你可以避免键入“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("*");

下面是一个用普通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;
}

function siblings(el) {
    return el.closest('*:not(:scope)').querySelectorAll(':scope > *');
}

纯JS代码

El -是元素 这里我们有一个函数，它在以下步骤中工作:

取任何直接父类，但不取我们传递的el(最接近的可以取el，因此我们确保el不会作为结果) 带走所有直系子女