Question

我有一些列表设置如下：

<ul id="menu">
    <li>
        <a href="#">link a</a>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>
        <a href="#">link b</a>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>
        <a href="#">link c</a>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>

我试图从每个第一个锚点（链接a，链接b，链接c）中提取文本，但是遇到了一些问题。

最近，我尝试过：

var X = document.getElementById("menu");
var Y = X.getElementsByTagName("li");
for (var i = 0; i < Y.length; i++) {
    var Z = Y[i].getElementsByTagName('A');
    console.log(Z[0].innerHTML);
}

但是会跳转到<ul>内的<li> s。

我真正需要的是能够获得<a>对顶级<li>的引用，并且能够获取那些<a> <li>内的文本}}第

Answer 1

让ul#menu使用children HTMLCollection的直接子女：

var X = document.getElementById("menu").children;

或者，您可以使用querySelectorAll使用direct children selector方法选择相同的li元素集合：

var X = document.querySelectorAll("#menu > li");

Answer 2

为什么不使用document.querySelectorAll。广泛支持：http://caniuse.com/#feat=queryselector

在css样式中查询很容易。希望它有所帮助。以下是如何使用它的文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

也可能对选择单个项目感兴趣：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

var childNodes = document.querySelectorAll("#menu > li");

Answer 3

var X = document.getElementById("menu");
var Y = X.getElementsByTagName("li");



for (var i = 0; i < Y.length; i++) {
 if(Y[i].parentNode.getAttribute('id')=='menu') {


   var Z = Y[i].getElementsByTagName('a');
   console.log(Z[0].innerHTML);

   }




}

演示：http://jsfiddle.net/txmvshpa/3/

选择<li>子节点但不选择带有vanilla JavaScript的孙子</li>

3 个答案: