如何用JavaScript选择HTML5元素？新手求教获取nav元素的方法

嘿，别慌！作为JS新手，刚摸DOM选择器的时候确实容易懵，我完全懂你不想额外加ID的心情，这就给你几个直接选中<nav>元素的实用方法：

方法1：用querySelector选中单个nav元素 #

如果你的页面里只有一个<nav>，或者你只想选第一个<nav>，用这个方法最直接，它支持CSS选择器语法，直接写标签名就行。修改你的代码如下：

function myFunction() {
  // 直接选中页面里的第一个nav元素
  var element = document.querySelector('nav');
  element.classList.add("mystyle");
}

小提示：如果之后你需要更精准地选择（比如某个带特定类的nav），还可以写成document.querySelector('nav.your-class-name')，灵活性超高～

方法2：用querySelectorAll选中所有nav元素 #

要是页面里有多个<nav>，想给它们都加上类，就用这个方法，它会返回一个包含所有匹配元素的集合，然后你可以循环遍历给每个元素加类：

function myFunction() {
  // 获取所有nav元素
  var elements = document.querySelectorAll('nav');
  // 循环给每个nav加类
  elements.forEach(function(element) {
    element.classList.add("mystyle");
  });
}

额外小补充 #

你原来用的getElementById只能通过ID选择元素，而querySelector和querySelectorAll是更通用的选择器，能适配各种CSS选择规则，新手多练几次就能熟练掌握啦～

内容的提问来源于stack exchange，提问作者Markeee