Question

在这段代码中，我得到了所有li元素的子代数。但是我如何才能得到一个孩子以上的李元素呢？

let liLength = document.querySelectorAll('li').length;

for (let i = 0; i < liLength; i++) {
  let liChildrenLength = document.querySelectorAll('li')[i].children.length;

  console.log(liChildrenLength);
}

<body>
  <ul>
    <li><a>list</a></li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
  </ul>
  <script src="main.js"></script>
</body>

Answer 1

将NodeList转换为Array并使用filter和childNodes。

取决于您是否希望实际元素数与节点数大于1，应将childNodes换为children。 childNodes将包含 any 节点，而children仅包含Elements。有关更多详细信息，请参见此问题：What is the difference between children and childNodes in JavaScript?

const arr = Array.from(document.querySelectorAll('li')).filter(li => li.childNodes.length > 1);

console.log(arr);

<body>
  <ul>
    <li><a>list</a></li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
  </ul>
</body>

Answer 2

1-将所有<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello Vue</title> <meta name="" content=""> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <script src="js/main.js"></script> <div id="app" class="container"> <login-page></login-page> </div> </body> </html>而不是长度存储在数组中

2-遍历它们并检查子代数

类似这样的东西

li

let lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
  if (lis[i].children.length > 1) {
    console.log(lis[i].children)
    console.log('------------------')
  }
}

Answer 3

var liLength = document.querySelectorAll('li').length;

for (var i = 0; i < liLength; i++) {
  var liChildren = document.querySelectorAll('li')[i].children;
  if (liChildren.length > 1)
    for (var j = 0; j < liChildren.length; j++)
      console.log(liChildren[j]);
}

<body>
  <ul>
    <li><a>list</a></li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
    <li><a>list</a>
      <ul>
        <li><a>list</a></li>
        <li><a>list</a></li>
      </ul>
    </li>
  </ul>
  <script src="main.js"></script>
</body>

与通过数组进行解析一样，使用[indexNumber]

liChildren = document.querySelectorAll('li')[i].children;
liChildren[someIndex]

希望是问题

Answer 4

尝试一下：

let li = [...document.querySelectorAll('li')].filter(function(li) {
   return li.children.length;
});

如何获得一个孩子以上的孩子？

4 个答案: