4

我要问的是如何用HTML5 的querySelector/querySelectorAll 实现jQuery 的children() 的等效功能，即如何在选择器模式中指定当前元素。

例如：

  <div id="foo">
    <div class="bar" id="div1">
      <div class="bar" id="div1.1">
      </div>
    </div>
    <div class="bar" id="div2"></div>
  </div>

document.getElementById('foo').querySelectAll('div.bar')三个divs 都会被选中。如果我只想获取 div1 和 div2，而不是 div1 的子 div1.1，该怎么办？我如何编写[[current node]] > div.bar像 css 选择器一样的东西？

有人可以对此有所了解吗？

4

4 回答 4

6

在你的例子中，你有did id="foo"，所以上面的例子有效。

但是在父元素没有 ID 的情况下，但您仍想使用 querySelectorAll 来获取直接子元素 - 也可以:scope像这样使用引用元素：

    var div1 = document.getElementById('div1'); //get child
    var pdiv = div1.parentNode; //get parent wrapper
    var list = pdiv.querySelectorAll(':scope > div.bar');

此处查询将“植根”到 pdiv 元素..

于 2014-10-09T10:39:56.813 回答
1

没有用于指定从中.querySelectorAll调用的元素的选择器（尽管我认为可能已经提出了一些建议）。

所以你不能做这样的事情：

var result = document.getElementById('foo').querySelectorAll('[[context]] > p.bar');

您需要从文档中进行选择，并将#fooID 包含在选择器中。

var result = document.querySelectorAll("#foo > p.bar");

但是如果你必须从一个元素开始，一种可能性是获取它的 ID（假设它有一个）并将它连接到选择器中。

var result = document.querySelectorAll("#" + elem.id + " > p.bar");

如果元素可能没有 ID，那么您可以暂时给它一个。

var origId = elem.id

if (!origId) {
    do {
        var id = "_" + Math.random().toString(16)
    } while (document.getElementById(id));

    elem.id = id;
}

var result = document.querySelectorAll("#" + elem.id + " > p.bar");

elem.id = origId;
于 2013-10-28T05:27:19.793 回答
1

实际上有一个伪类 :scope来选择当前元素，但是，它没有被指定为任何版本的MS Internet Explorer支持。

document.getElementById('foo').querySelectAll(':scope>div.bar')
于 2016-12-08T03:01:03.610 回答
0

你可以像这样使用：

document.querySelectorAll('#foo > p.bar')
于 2013-10-28T05:23:42.373 回答