在 JavaScript 有时你需要访问 HTML DOM 中的元素，那么就需要先使用 js获取元素，js中可以使用多种方法获取节点元素。

本文将介绍 js获取元素的多种方法。

js 使用 id 获取元素

1、使用的方法

document：getElementById()

2、js 使用 id 获取元素的示例：

<html>
  <head>
    ...
  </head>
  <body>
    <div id="my-id">元素节点</div>
    <script>
      var id_el = document.getElementById("my-id");
    </script>
  </body>
</html>

注：使用专用方法获取 id 的方法，不需要添加 #

js通过类名获取元素节点

1、使用的方法

document.getElementsByClassName()

2、js 使用类名获取元素的示例：

<html>
  <head>
    ...
  </head>
  <body>
    <div class="my-class">元素节点</div>
    <script>
      var class_el = document.getElementsByClassName("my-class");
    </script>
  </body>
</html>

注：使用专用方法获取 Class Name 的方法，不需要添加 .

js通过名称属性获取元素节点

1、使用的方法

document.getElementsByName()

2、js 使用名称属性获取元素的示例：

<html>
  <head>
    ...
  </head>
  <body>
    <div name="my-name">元素节点</div>
    <script>
      var name_el = document.getElementsByName("my-name");
    </script>
  </body>
</html>

注：使用专用方法获取 Name 的方法，不需要添加 []

js通过标签名称获取元素节点

1、使用的方法

document.getElementsByTagName()

2、js 使用标签名称获取元素节点的示例：

<html>
  <head>
    ...
  </head>
  <body>
    <div>元素节点</div>
    <script>
      var el = document.getElementsByName("div");
    </script>
  </body>
</html>

js以任意选择器获取元素节点

1、使用任意选择器获取元素，需要使用特殊符号标记相应的选择器。

  • id 选择器使用 # 标记
  • class 选择器使用 . 标记
  • 标签选择器不使用标记
  • 任意属性选择器使用 [] 标记

2、使用的方法

document.querySelector()

或者

document.querySelectorAll()

区别：

  • querySelector()：返回匹配到的第一个元素
  • querySelectorAll()：返回匹配到的所有元素，是一个数组

3、js 使用标签名称获取元素节点的示例：

<html>
  <head>
    ...
  </head>
  <body>
    <div id="my-di" class="my-class" data="my-data">元素节点</div>
    <script>
      var el1 = document.querySelector("div");
            var el2 = document.querySelector("#my-id");
            var el3 = document.querySelector(".my-class");
            var el4 = document.querySelector("[data='my-data']");
    </script>
  </body>
</html>

结语

本文介绍了 jsid获取元素、js通过类名获取元素、js通过标签名称获取元素、js根据属性获取元素等多种使用js获取节点的方法。