logo标签列表

使用JavaScript选择子HTML元素

javascripthtml
3
<body>

 <nav>
    <ul>
      <li><a href="index.html">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
 </nav>

 <section>
    <ul>
       <li><a href="previous-page.html">Previous</a></li>
       <li><a href="next-page.html">Next</a></li>
    </ul>
 </section>

</body>

我想选择位于<nav>元素中的<li>标签内的内容，并将其放入一个列表中，但不包括位于<section>中的<li>标签。
我尝试了以下代码，但它会选择整个页面上的所有列表元素：
let list = document.selectElementsByTagName('li')

我只能使用原生JS，不可使用jQuery。

可能是 queryselectorAll用法 的重复内容。 - Patrick Roberts
selectElementsByTagName 不是有效的... - epascarello
2个回答
5
实际上应该使用 getElementsByTagName...
但你也可以使用 .querySelectorAll()，如下所示：
let list = document.querySelectorAll('nav li')

例子：

let list  = document.querySelectorAll('nav li');
let list2 = document.querySelector('section ul'); // Use rather some ID man 

Array.from(list).forEach( (el) => list2.append(el.cloneNode(true)) );
section {
  background: #eee;
}
<nav>
  <ul>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<section>
  <ul>
    <li><a href="previous-page.html">Previous</a></li>
    <li><a href="next-page.html">Next</a></li>
  </ul>
</section>

0

我知道你想使用原生JavaScript。但是使用jQuery可以用更少的代码实现相同的功能：

let list = $('nav li');
更少的代码？并不是整个jQuery库就一定比较少的代码 :) 只是打字更少而已 ;) - Roko C. Buljan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接