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

我用的是聚合物

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

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

我需要这个javascript查询选择器的帮助。我应用的当前查询提供了该模板中所有ul的li。但我只想要top的ul的li。我不想要模板的所有子项li。

---

我认为将其更改为适当的查询，可能会得到正确的结果。请导游。谢谢。

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

<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

元素

编辑

---

如果它在聚合物模板中，你可以使用Mohit的评论做一些类似于

template>ul>li

的事情。能够找出答案

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

---

你必须知道一些关于李的事情。如果它位于文档的顶层，请使用

body>ul>li

console.log（document.queryselectoral（'body>ul>li'））

家


关于


行动


注销

ul>li

检查所有

ul

元素是否具有作为直接子元素的

li

。这就是为什么你会得到所有的

ul

和

li

如果要限制为顶级

ul

，

li

元素。然后使用ul标签的立即

父项

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

---

假设

body

是

ul

的直接父项。如果您有一个具有class或ID的包装器div/任何其他元素，也可以使用它来代替body。

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

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

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

如果列表具有可识别的父元素（例如body或id为的元素），则可以使用直接子体操作符（

）

更新 由于您的问题带有标记，这里有另一个解决方案：

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

---

您对给定代码的预期输出是什么？输出将是3个三li的节点。@Mohit感谢使用[].filter.call（tabs.queryselectoral（“：scope>my tab”）我能够获得有关父选择器的其他问题的详细信息。谢谢

document.querySelector（“ul”）。通过使用
querySelector（）
，您只选择页面上的第一个
ul
。然后
.children
会在它的正下方给您
li
元素。@VivekMuthal这是
过滤器的一个坏用法，您应该使用
forEach
，因为您实际上没有过滤任何东西不，我无法添加Id使用模板由用户提供。很抱歉，这没有帮助。将
模板
更改为
内容
是否解决了任何问题？您是否可以发布聚合元素或至少部分聚合元素的
html
，以便我可以帮助诊断此特定情况？是否保证
是light DOM中的第一个元素？谢谢，但可以使用中的：scope解决此问题查询选择器。我在任何地方都看不到Mohit的评论，请添加一些解释。
：scope
不太受支持。这可以用于支持许多浏览器。
：scope
@JuanMendes Mohit删除了评论。它有一个演示链接ie。
$('ul:first > li').each(function() {
  console.log(this);
});