Question

编辑：我对JavaScript完全不熟悉。我花了很长时间寻找解决我的问题，但不知道正确的单词或短语来问'正确'的问题。其他模糊相似的问题根本不清楚，也不像我的问题那样具体：如何选择导航。

我有一些JS为我的<nav>添加一个类：

<script>
    function myFunction() {
       var element = document.getElementById("myDIV");
       element.classList.add("mystyle");
    }
</script>

这意味着我必须为<nav>添加ID，以便

<nav id="myDIV">

有没有办法不必向<nav>添加ID？让JS选择<nav>元素而不必添加ID？

我猜它会是这样的：

   var element = document.getElementByType("nav");

Answer 1

var element = document.getElementByType("nav");

您要查找的方法是getElementsByTagName，它返回所有具有匹配标记名称的元素的列表。

＆＃13;

var elements = document.getElementsByTagName("nav");
var first_nav = elements[0];
console.log(first_nav);

＆＃13;

<nav></nav>

＆＃13;

您还可以使用querySelector返回与CSS selector匹配的第一个元素。

＆＃13;

var first_nav = document.querySelector("nav");    
console.log(first_nav);

＆＃13;

<nav></nav>

＆＃13;

Answer 2

为此你可以使用querySelector，它将CSS选择器作为参数

   var element = document.querySelector("nav");
   element.classList.add("mystyle");

如果nav是孩子，例如header，您可以添加其选择器以仅抓取此父级内的nav

   var element = document.querySelector("header nav");
   element.classList.add("mystyle");

像后者这样的情况，它的CSS选择器参数

真的很出色

Answer 3

您可以使用getElementsByTagName或querySelector

document.getElementsByTagName("nav")[0].classList.add("mystyle");
document.querySelector("nav").classList.add("mystyle2");

.mystyle {
  color: red;
}

.mystyle2 {
  font-size: 18px;
}

<nav>Nav</nav>