js获取class元素的值|极客笔记

js获取class元素的值

在JavaScript中，要获取指定class的元素值可以使用getElementsByClassName方法或者querySelectorAll方法。这两种方法都可以获取指定class的元素值，但是用法略有不同。

使用getElementsByClassName方法

getElementsByClassName方法是通过指定class名称来获取元素值的，它返回的是一个包含所有指定class的元素的NodeList集合。可以通过遍历NodeList集合来获取每个元素的值。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<h2 class="example">这是一个示例标题</h2>
<p class="example">这是一个示例段落。</p>

<button onclick="getClassElement()">获取class为example的元素值</button>

<p id="demo"></p>

<script>
function getClassElement() {
  var elements = document.getElementsByClassName("example");
  var output = "";

  for (var i = 0; i < elements.length; i++) {
    output += elements[i].innerHTML + "<br>";
  }

  document.getElementById("demo").innerHTML = output;
}
</script>

</body>
</html>

在上面的示例代码中，我们为两个元素都添加了example这个class名称。当点击按钮时，会获取所有class为example的元素值，并将其显示在页面上。

使用querySelectorAll方法

querySelectorAll方法是通过CSS选择器来获取元素值的，可以更灵活地选择class名称，还可以选择更多的匹配条件。

示例代码如下：

<!DOCTYPE html>
<html>
<body>

<h2 class="example">这是一个示例标题</h2>
<p class="example">这是一个示例段落。</p>

<button onclick="getClassElement()">获取class为example的元素值</button>

<p id="demo"></p>

<script>
function getClassElement() {
  var elements = document.querySelectorAll(".example");
  var output = "";

  elements.forEach(function(element) {
    output += element.innerHTML + "<br>";
  });

  document.getElementById("demo").innerHTML = output;
}
</script>

</body>
</html>

在上面的示例代码中，我们同样为两个元素都添加了example这个class名称。当点击按钮时，会获取所有class为example的元素值，并将其显示在页面上。

通过以上两种方法，我们可以很方便地获取指定class的元素值，并对其进行操作。