JS 获取元素属性值|极客笔记

JS 获取元素属性值

在前端开发中，经常需要获取元素的属性值。无论是为了改变元素的样式，还是根据不同的属性值执行不同的操作，都需要先获取到元素的属性值。

在本文中，我们将详细探讨如何使用 JavaScript 获取元素的属性值。我们将从最常见的方式入手，逐步深入探讨更复杂的场景。

一、使用 `getAttribute` 方法

在 JavaScript 中，我们可以使用 getAttribute 方法来获取元素的属性值。这是最常见的方式，也是最通用的方法之一。

以下是一个示例，演示如何使用 getAttribute 方法获取元素的 id 属性值：

<!DOCTYPE html>
<html>
<head>
  <title>JS 获取元素属性值</title>
</head>
<body>
  <div id="example">这是一个示例</div>

  <script>
    let div = document.getElementById('example');
    let id = div.getAttribute('id');
    console.log(id); // 输出：example
  </script>
</body>
</html>

在这个示例中，我们首先通过 getElementById 方法获取到 id 为 example 的 div 元素，然后使用 getAttribute 方法获取该元素的 id 属性值，并将其打印到控制台。

二、使用 `element.attribute` 属性

除了使用 getAttribute 方法之外，我们还可以直接通过元素的属性来获取属性值。例如，要获取元素的 id 属性值，可以直接访问 element.id 属性。

以下是一个演示如何使用 element.id 来获取元素的 id 属性值的示例：

<!DOCTYPE html>
<html>
<head>
  <title>JS 获取元素属性值</title>
</head>
<body>
  <div id="example">这是一个示例</div>

  <script>
    let div = document.getElementById('example');
    let id = div.id;
    console.log(id); // 输出：example
  </script>
</body>
</html>

在这个示例中，我们同样首先通过 getElementById 方法获取到 id 为 example 的 div 元素，然后直接通过 div.id 来获取该元素的 id 属性值，并将其打印到控制台。

三、获取元素的其他属性值

除了获取元素的 id 属性值外，还可以获取其他属性值，比如 class、src、href 等。具体的方法与上面演示的方法类似，只需将属性名称替换为相应的属性即可。

以下是一个演示如何获取元素的 class 属性值的示例：

<!DOCTYPE html>
<html>
<head>
  <title>JS 获取元素属性值</title>
</head>
<body>
  <div class="example">这是一个示例</div>

  <script>
    let div = document.querySelector('.example');
    let className = div.className;
    console.log(className); // 输出：example
  </script>
</body>
</html>

在这个示例中，我们使用 querySelector 方法获取到 class 为 example 的 div 元素，然后通过 div.className 来获取该元素的 class 属性值，并将其打印到控制台。

四、深入探讨：获取自定义属性值

除了获取标准的属性值外，我们还可以获取自定义的属性值。在 HTML 中，我们可以通过 data-* 属性来定义自定义属性，然后通过 JavaScript 来获取。

以下是一个演示如何获取自定义属性值的示例：

<!DOCTYPE html>
<html>
<head>
  <title>JS 获取元素属性值</title>
</head>
<body>
  <div data-example="custom">这是一个示例</div>

  <script>
    let div = document.querySelector('[data-example]');
    let dataValue = div.getAttribute('data-example');
    console.log(dataValue); // 输出：custom
  </script>
</body>
</html>

在这个示例中，我们使用 querySelector 方法获取到具有 data-example 属性的 div 元素，然后通过 getAttribute 方法来获取该元素的 data-example 自定义属性值，并将其打印到控制台。