Question

我有一个包含许多链接的页面但是我想使用js选择nav标签内的所有链接并将它们分配给名为navigationLinks的变量。有没有办法在不为所有链接分配类的情况下执行此操作。 `

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

这是js：

let navigationLinks = document.getElementsByTagName('nav');

谢谢。

Answer 1

let navigationLinks = document.querySelectorAll('nav a');

但请记住它是NodeList对象。

Answer 2

您提供的JavaScript：

let navigationLinks = document.getElementsByTagName('nav');

错误，请在[0]之后使用document.getElementsByTagName('nav')来选择第一个导航元素。

使用此代码为my-class

内的每个<a>链接分配一个班级nav

let navigationLinks = document.getElementsByTagName('nav')[0];
let button = document.getElementsByTagName('button')[0];

var ul = navigationLinks.children[0];
var ulChilds = ul.children;
function insertClass() {
    for (var x=0;x < ulChilds.length;x++) {
        ulChilds[x].className += ' my-class';
    }
}
button.onclick = insertClass;

.my-class {
    background: yellow; /*Just testing class*/
}

<nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
<button>Add my-class</button>

希望，你需要这个。

Answer 3

let navElement = document.getElementsByTagName('NAV');

let navigationLinks = navElement[0].getElementsByTagName('A');

如果您有多个导航标签，则可能需要相应地循环

如何选择导航元素

3 个答案: