JavaScript访问HTML元素

在JavaScript中，要想访问HTML元素，可以使用下面几种方法。

document.getElementById(id)
document.getElementsByTagName(tagName)
document.getElementsByClassName(className)
document.querySelector(selector)
document.querySelectorAll(selector)

getElementById()

该方法返回带有指定ID的元素。

// 访问id为main-div的元素
document.getElementById("main-div");

getElementsByTagName()

该方法返回带有指定标签名的所有元素，返回值类型为HTMLCollection。

// 访问标签名为div的所有元素
document.getElementsByTagName("div");

getElementsByClassName()

该方法返回带有指定class属性值的所有元素，返回值类型为HTMLCollection。

// 访问类名为c-red的所有元素
document.getElementsByClassName("c-red");

querySelector()

该方法返回带有指定CSS样式选择器的第一个元素。

// 访问类名为c-red的第一个元素
document.querySelector(".c-red");

querySelectorAll()

该方法返回带有指定CSS样式选择器的所有元素，返回值类型为NodeList。

// 访问类名为c-red的所有元素
document.querySelectorAll(".c-red");

示例

下面是一段简单的html片段。

JavaScript

Java

C++

Python

Ruby

Swift

<div id="main-div">
  <div class="c-red">
    <p id="demo-p">JavaScript</p>
    <p>Java</p>
    <p>C++</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
</div>

访问ID为demo-p的元素    访问标签名为p的所有元素  访问类名为c-red的所有元素  访问类名为c-red的第一个元素

访问类名为c-red的所有元素（querySelectorAll）