我可以这样做:

<div id="myDiv">
   <div class="foo"></div>
</div>
myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");

也就是说,我可以成功地检索myDiv元素的所有具有类.foo的直接子元素。

问题是,它困扰我,我必须包括在选择器中的#myDiv,因为我是在myDiv元素上运行查询(所以它显然是多余的)。

我应该能够离开#myDiv关闭,但选择器是不合法的语法,因为它以>开始。

有人知道如何编写一个选择器,它只获取选择器所运行的元素的直接子元素吗?


当前回答

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

其他回答

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

如果你确定元素是唯一的(比如你的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是选择器。完全可以作为一个原型。

我会和你一起去的

var myFoo = document.querySelectorAll("#myDiv > .foo");
var myDiv = myFoo.parentNode;
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");