js 获取元素属性|极客笔记

js 获取元素属性

在web开发中，我们经常需要通过JavaScript来获取元素的属性，以便对元素进行进一步操作或根据属性值进行逻辑判断。在这篇文章中，我将详细介绍如何使用JavaScript获取元素的属性，并给出一些示例代码。

1. 通过id获取元素属性

使用getElementById方法可以通过元素的id属性来获取元素的引用，然后可以通过该引用来获取元素的其他属性。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Get Element By Id</title>
</head>
<body>

<p id="demo" onclick="getElementAttr()">Click me to get attribute value!</p>

<script>
function getElementAttr() {
  var elem = document.getElementById("demo");
  var attrValue = elem.id;
  alert("Attribute value is: " + attrValue);
}
</script>

</body>
</html>

在上面的示例中，当点击段落元素时，会弹出一个对话框显示该元素的id属性值。通过getElementById方法获取元素引用，然后可以通过引用的id属性获取元素的id值。

2. 通过class获取元素属性

如果元素有class属性，我们也可以通过该class属性来获取元素的引用，并进而获取其他属性。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Get Element By Class</title>
</head>
<body>

<p class="demo" onclick="getElementAttr()">Click me to get class attribute value!</p>

<script>
function getElementAttr() {
  var elems = document.getElementsByClassName("demo");
  for (var i = 0; i < elems.length; i++) {
    var attrValue = elems[i].className;
    alert("Attribute value is: " + attrValue);
  }
}
</script>

</body>
</html>

上面的示例中，当点击具有class为demo的段落元素时，会弹出一个对话框显示该元素的class属性值。通过getElementsByClassName方法获取具有特定class属性的元素引用，然后可以通过引用的className属性获取元素的class值。

3. 通过标签名获取元素属性

如果元素没有id或class属性，我们也可以通过标签名来获取元素的引用，并获取其他属性。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Get Element By Tag Name</title>
</head>
<body>

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>

<button onclick="getElementAttr()">Click me to get tag attribute value!</button>

<script>
function getElementAttr() {
  var elems = document.getElementsByTagName("p");
  for (var i = 0; i < elems.length; i++) {
    var attrValue = elems[i].tagName;
    alert("Attribute value is: " + attrValue);
  }
}
</script>

</body>
</html>

在上面的示例中，当点击按钮时，会弹出一个对话框显示所有段落元素的标签名。通过getElementsByTagName方法获取特定标签名的元素引用，然后可以通过引用的tagName属性获取元素的标签名。

4. 通过属性名获取元素属性

有时候我们需要获取元素的自定义属性，可以通过getAttribute方法来获取指定属性名的属性值。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Get Element By Attribute</title>
</head>
<body>

<p id="demo" data-custom="123" onclick="getElementAttr()">Click me to get attribute value!</p>

<script>
function getElementAttr() {
  var elem = document.getElementById("demo");
  var attrValue = elem.getAttribute("data-custom");
  alert("Attribute value is: " + attrValue);
}
</script>

</body>
</html>

在上面的示例中，点击段落元素时，会弹出一个对话框显示该元素的data-custom属性值。通过getAttribute方法传入属性名来获取元素的指定属性值。