如何使querySelectorAll仅从当前元素的子元素中选择

我在问什么是如何实现jQuery的children（）与HTML5的querySelector/querySelectorAll等效的功能，即如何在选择器中指定当前元素模式。如何使querySelectorAll仅从当前元素的子元素中选择

例如：

<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')所有三个div旨意被选择。如果我只想获取div1和div2，而不是div1的子div1.1，该怎么办？我如何编写[[current node]] > div.bar像CSS选择器？

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

来源

2013-10-28 Need4Steed

如果您记录或警告foo元素的innerHTML，您将看到浏览器呈现的内容与文本源代码不同。 p元素是关闭和分离的，而不是包含内部元素。 – kennebec

得到它！ p不应该嵌套在p .;） – Need4Steed

你可以使用这样的：

document.querySelectorAll('#foo > p.bar')

来源

2013-10-28 05:23:42

但是我需要做的是将E元素传递给一个函数，并让函数从E的子元素中选择一些东西，而不是后代 – Need4Steed

有没有选择用于指定从中.querySelectorAll被称为（虽然我认为可能已经提出的东西）的元素。

所以你不能做这样的事：

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

你需要什么是从文档中选择，并且包括在选择的#foo ID。

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-28 05:27:19

好的循环，谢谢！ – Need4Steed

不客气。 –

在你的例子中你有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-09 10:39:56 megamurmulis

目前这种方法太有创新性了（现在已经提出了，并且在去年提出！）。启用配置标志后'：scope'在Chrome或Firefox中可用，并且在IE中不可用。 – Rolf

其实是有伪类:scope选择当前元素，但是，它是不指定为任何versio支撑n的MS Internet Explorer。

document.getElementById('foo').querySelectAll(':scope>div.bar')

来源

2016-12-08 03:01:03

如何使querySelectorAll仅从当前元素的子元素中选择

回答

相关问题