Difference Between Element.Value and Element.Getattribute("Value")

Difference between Element.value and Element.getAttribute(value)

The difference is that element.value is real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.

While getAttribute('value') will still show the original value="whateverWasHere" value.

jsFiddle DEMO

JavaScript Element.value vs Element.getAttribute(value)

The difference is that element.value is real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.

While getAttribute('value') will still show the original value="whateverWasHere" value.

jsFiddle DEMO

How would you compare the value of element.getAttribute() to a String in protractor?

getAttribute will return a promise so it should be resolved to capture value, we should be able to verify this using below

expect(this.name.getAttribute("value")).toEqual('bar');

if you want to get value and assign it to another variable you can use

this.name.getAttribute("value").then(function (value) {
    foo = vale
});

getAttribute() versus Element object properties?

getAttribute retrieves the attribute of a DOM element, while el.id retrieves the property of this DOM element. They are not the same.

Most of the time, DOM properties are synchronized with attributes.

However, the synchronization does not guarantee the same value. A classic example is between el.href and el.getAttribute('href') for an anchor element.

For example:

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

This behavior happens because according to the W3C, the href property must be a well-formed link. Most browsers respect this standard (guess who doesn't?).

There is another case for the input's checked property. The DOM property returns true or false while the attribute returns the string "checked" or an empty string.

And then, there are some properties that are synchronized one-way only. The best example is the value property of an input element. Changing its value through the DOM property will not change the attribute (edit: check the first comment for more precision).

Because of these reasons, I'd suggest you keep using the DOM properties, and not the attributes, as their behavior differs between the browsers.

In reality, there are only two cases where you need to use the attributes:

1. A custom HTML attribute, because it is not synced to a DOM property.
2. To access a built-in HTML attribute, which is not synced from the property, and you are sure you need the attribute (for example, the original value of an input element).

If you want a more detailed explaination, I strongly suggest you read this page. It will take you a few minutes only, but you will be delighted by the information (which I summed up here).

What is the difference between getText() and getAttribute() in Selenium WebDriver?

  <input attr1='a' attr2='b' attr3='c'>foo</input>

getAttribute(attr1) you get 'a'

getAttribute(attr2) you get 'b'

getAttribute(attr3) you get 'c'

getText() with no parameter you can only get 'foo'

What is the difference between properties and attributes in HTML?

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.

For instance, this HTML element:

<input type="text" value="Name:">

has 2 attributes (type and value).

Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.

For a given DOM node object, properties are the properties of that object, and attributes are the elements of the attributes property of that object.

When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it's not a one-to-one relationship. For instance, for this HTML element:

<input id="the-input" type="text" value="Name:">

the corresponding DOM node will have id,type, and value properties (among others):

• The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. id is a pure reflected property, it doesn't modify or limit the value.

• The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. type isn't a pure reflected property because it's limited to known values (e.g., the valid types of an input). If you had <input type="foo">, then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text".

• In contrast, the value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then:

  theInput.value // returns "John"
  

  whereas:

  theInput.getAttribute('value') // returns "Name:"
  

  The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.

  So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute:

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"
  

There are several properties that directly reflect their attribute (rel, id), some are direct reflections with slightly-different names (htmlFor reflects the for attribute, className reflects the class attribute), many that reflect their attribute but with restrictions/modifications (src, href, disabled, multiple), and so on. The spec covers the various kinds of reflection.

---

Related Topics