HTML - DOM value 属性

HTML DOM 的value属性用于设置或获取属性的值。您可以使用此属性访问各种属性的值，例如表单中的“input”值、“img”中的“src”或链接中的“href”。

此属性主要用于表单处理和DOM操作。

语法

以下是 HTML DOM 的value（获取属性值）属性的语法：

attribute.value

要更新（设置）属性值，请使用以下语法：

attribute.value = new_value

其中，new_value 指定您要分配给 value 属性的新值。

参数

由于它是一个属性，所以它不接受任何参数。

返回值

该属性返回指定索引的属性的值。

示例 1：获取第一个属性的值

以下是 HTML DOM value属性的基本示例：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value</title>
</head>
<body>
<p>The value property of DOM returns the value of an attribute.</p>
<div id="demo" data-info="someData"></div>
<script>
   const element = document.getElementById("demo");
   // Retrieve the value of the first attribute of the div
   let attributeValue = element.attributes[0].value;
   // Place the value inside the div tag
   document.getElementById("demo").innerHTML = attributeValue;
</script>
</body>
</html>

示例 2：获取所有属性的值

这是 HTML DOM value属性的另一个示例。在此示例中，简单的 for 循环与 value 属性一起使用，以检索 HTML 元素的所有属性的值：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value</title>
</head>
<body>
<h3>HTML DOM Attribute value Property</h3>
<p>The value property of DOM returns the values of attributes.</p>
<div id="demo" class="exampleClass" data-info="someData"></div>
<script>
   const element = document.getElementById("demo");
   // Initialize an empty array to hold attribute values
   let attributeValues = []; 
   // Loop through all attributes of the element
   for (let i = 0; i < element.attributes.length; i++) {
      attributeValues.push(element.attributes[i].value);
   }
   // Join the attribute values with commas 
   // and place them inside the div tag
   document.getElementById("demo").innerHTML = attributeValues.join(", ");
</script>
</body>
</html>

支持的浏览器

属性
value	是	是	是	是	是

打印页面