Javascript querySelectorAll，如何只匹配顶级元素？

Question

我正在使用聚合物。

假设我在模板中有一些内容如下

<ul>    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>

在Ready功能中

var listNodes = this.querySelectorAll('ul > li');

我需要这个javascript查询选择器的帮助。 我应用的当前查询给出了该模板中所有ul的 li 。 但我只想要顶级ul的 李 。 我不希望模板的所有孩子里 。 我认为将其更改为正确的查询，我可能会得到正确的结果。 请指导。 谢谢。

Answer 1

使用Mohit的评论。 能够找到答案。

var listNodes = this.querySelectorAll('ul:scope > li');

Answer 2

手动解决方案并不是那么糟糕，只需查找第一个列表然后遍历其子元素：

var topList = document.querySelector('ul');

[].forEach.call(topList.children, function(el) {
  console.log(el);
});

演示

如果列表具有可识别的父元素（例如正文或具有id的元素），则可以使用直接后代运算符（ > ）。

更新

由于你的问题用jquery标记，这是另一个解决方案：

$('ul:first > li').each(function() {
  console.log(this);
});

Answer 3

将id或某个唯一选择器应用于top元素，如下所示：

<ul id="top">    
    <li>
        Home
    </li>
    <li>
        About
    </li>
    <li>
        Actions
        <ul>
            <li>
                Logout
            </li>
        </ul>
    </li>       
</ul>

允许你获得这样的顶级元素：

var topElems = document.querySelectorAll("#top > li");

你可以做其他独特的选择器，比如body > ul > li但你的想法是你必须唯一地识别要搜索的顶级ul元素。

编辑

如果它在聚合物模板中，您可以执行类似template > ul > li 。

Answer 4

你必须了解一些关于李的事情。 如果它位于文档的顶层，请使用body > ul > li

 console.log(document.querySelectorAll('body > ul > li')) 

 <ul> <li> Home </li> <li> About </li> <li> Actions <ul> <li> Logout </li> </ul> </li> </ul> 

否则，您必须有办法唯一地标识ul的父级

 console.log(document.querySelectorAll('#user-content > ul > li')) 

 <div id="user-content"> <ul> <li> Home </li> <li> About </li> <li> Actions <ul> <li> Logout </li> </ul> </li> </ul> </div> 

Answer 5

ul > li检查所有具有li作为直接子项的ul元素。 这就是为什么你得到所有的ul和li 。

如果你想限制到顶级ul ， li元素。 然后使用ul标签的直接parent 。

   document.querySelectorAll('body > ul > li')

假设body是ul的直接父母。 如果你有一个包装div /任何其他具有类或ID的元素，也可以使用它来代替body。