HTML - DOM value Property

Quiz

The HTML DOM value property is used to set or get the value of an attribute. You can use this property to access the values of various attributes, such as "input" values in forms, "src" in images, or "href" in links.

This property is mainly used with the form handling and DOM manipulation.

Syntax

Following is the syntax of the HTML DOM value ( to get the attribute value) property −

attribute.value

To update (set) the attribute value, use the following syntax −

attribute.value = new_value

Where, new_value specifies the new value you want to assign to the value property.

Parameters

Since it is property, it does not accept any parameters.

Return value

The property returns the value of the attribute for the specified index.

Example 1: Get the value of the first attribute

The following is the basic example of the HTML DOM value property −

<!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>

Example 2: Get values of all attributes

Here is another example of the HTML DOM value property. In this example, a simple for loop is used along with the value property to retrieve the values of all attributes of an HTML element −

<!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>

Supported Browsers

Property
value	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page