javascript dom, how to handle "special properties" as versus attributes?

javascript dom, how to handle "special properties" as versus attributes? - javascript

issue is whether to use property or attribute.
have not found this documented, so have run some tests (chromium 12):
property <=> attribute
accept, alt, formMethod, formTarget, id, name, placeholder, type, maxlength, size
form: method, name, target, action, enctype
can set either property or attribute
will reflect to property or attribute
exception 1: if form property will first look for element of that name (!)
exception 2: action property rewrites itself using value, passes set value to attribute
exception 3: enctype maintains its integrity, but passes set value to attribute
property <= attribute
value, autofocus, checked, disabled, formNoValidate, multiple, required
setting property has no effect on attribute
setting attribute also sets property
property => attribute
indeterminate
setting property also sets attribute
setting attribute has no effect on property
propetry >< attribute
defaultValue, validity, defaultChecked, readOnly
form: novalidate
setting property or attribute has no effect on the other
to me this seems pretty random behavior.
given a random attribute/value to apply to an element, here are the best rules I have come up with (modified as per Tim Down (thanks!) below):
if class, write with classList, read with className property
if a form, always read using attribute (and be a little careful)
if typeof element[propName] != "undefined", use property, ie, element[attr]=val
otherwise, use attribute, ie, element.setAttribute(attr,val)
is this even close to being right?
note: interestingly, if you have a form with an element named "novalidate", is it even possible to access the novalidate property of the form itself?

Except for rare special cases listed below, always use the property. Once the browser has parsed the intial HTML, attributes are no help to you unless you're serializing the DOM back to HTML for some reason.
Reasons to always favour properties:
dealing with properties is simpler (see Boolean properties such as checked: just use true and false and never worry whether you should be removing the attribute, or setting it to "" or "checked")
not every property maps to an attribute of the same name. For example, the checked property of a checkbox or radio button does not correspond to any attribute; the checked attribute corresponds to the defaultChecked property and does not change when the user interacts with the element (except in old IE; see next point). Likewise value and defaultValue.
setAttribute() and getAttribute() are broken in older versions of IE.
Special cases:
Attributes of <form> elements. Since each form input is mapped to a property of its parent <form> element corresponding to its name, it's safer to use setAttribute() and getAttribute() to obtain properties of the form such as action, name and method.
Custom attributes, e.g. <p myspecialinfo="cabbage">. These will not generally create equivalent properties on the DOM element object, so setAttribute() and getAttribute() should be used.
One final consideration is that there is not an exact correspondence between attribute and property names. For example, the property equivalent of the class attribute is className, and the property for the for attribute is htmlFor.

Related

What is the difference between attributes and properties when using in Jquery? [duplicate]

After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.
Looking at the list on the jQuery 1.6.1 release notes (near the bottom), it seems one can classify HTML properties and attributes as follows:
Properties: All which either has a boolean value or that is UA calculated such as selectedIndex.
Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.
Thoughts?

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.

After reading Sime Vidas's answer, I searched more and found a very straight-forward and easy-to-understand explanation in the angular docs.
HTML attribute vs. DOM property
-------------------------------
Attributes are defined by HTML. Properties are defined by the DOM
(Document Object Model).
A few HTML attributes have 1:1 mapping to properties. id is one
example.
Some HTML attributes don't have corresponding properties. colspan is
one example.
Some DOM properties don't have corresponding attributes. textContent
is one example.
Many HTML attributes appear to map to properties ... but not in the
way you might think!
That last category is confusing until you grasp this general rule:
Attributes initialize DOM properties and then they are done. Property
values can change; attribute values can't.
For example, when the browser renders <input type="text" value="Bob">,
it creates a corresponding DOM node with a value property initialized
to "Bob".
When the user enters "Sally" into the input box, the DOM element value
property becomes "Sally". But the HTML value attribute remains
unchanged as you discover if you ask the input element about that
attribute: input.getAttribute('value') returns "Bob".
The HTML attribute value specifies the initial value; the DOM value
property is the current value.
The disabled attribute is another peculiar example. A button's
disabled property is false by default so the button is enabled. When
you add the disabled attribute, its presence alone initializes the
button's disabled property to true so the button is disabled.
Adding and removing the disabled attribute disables and enables the
button. The value of the attribute is irrelevant, which is why you
cannot enable a button by writing <button disabled="false">Still Disabled</button>.
Setting the button's disabled property disables or enables the button. The value of the property matters.
The HTML attribute and the DOM property are not the same thing, even
when they have the same name.

The answers already explain how attributes and properties are handled differently, but I really would like to point out how totally insane this is. Even if it is to some extent the spec.
It is crazy, to have some of the attributes (e.g. id, class, foo, bar) to retain only one kind of value in the DOM, while some attributes (e.g. checked, selected) to retain two values; that is, the value "when it was loaded" and the value of the "dynamic state". (Isn't the DOM supposed to be to represent the state of the document to its full extent?)
It is absolutely essential, that two input fields, e.g. a text and a checkbox behave the very same way. If the text input field does not retain a separate "when it was loaded" value and the "current, dynamic" value, why does the checkbox? If the checkbox does have two values for the checked attribute, why does it not have two for its class and id attributes?
If you expect to change the value of a text *input* field, and you expect the DOM (i.e. the "serialized representation") to change, and reflect this change, why on earth would you not expect the same from an input field of type checkbox on the checked attribute?
The differentiation, of "it is a boolean attribute" just does not make any sense to me, or is, at least not a sufficient reason for this.

Difference HTML properties and attributes:
Let's first look at the definitions of these words before evaluating what the difference is in HTML:
English definition:
Attributes are referring to additional information of an object.
Properties are describing the characteristics of an object.
In HTML context:
When the browser parses the HTML, it creates a tree data structure wich basically is an in memory representation of the HTML. It the tree data structure contains nodes which are HTML elements and text. Attributes and properties relate to this is the following manner:
Attributes are additional information which we can put in the HTML to
initialize certain DOM properties.
Properties are formed when the browser parses the HTML and generates the DOM. Each of the elements in the DOM have their own set of properties which are all set by the browser. Some of these properties can have their initial value set by HTML attributes. Whenever a DOM property changes which has influence on the rendered page, the page will be immediately re rendered
It is also important to realize that the mapping of these properties is not 1 to 1. In other words, not every attribute which we give on an HTML element will have a similar named DOM property.
Furthermore have different DOM elements different properties. For example, an <input> element has a value property which is not present on a <div> property.
Example:
Let's take the following HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- charset is a attribute -->
<meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
<title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>
Then we inspect the <div>, in the JS console:
console.dir(document.getElementById('foo'));
We see the following DOM properties (chrome devtools, not all properties shown):
We can see that the attribute id in the HTML is now also a id property in the DOM. The id has been initialized by the HTML (although we could change it with javascript).
We can see that the class attribute in the HTML has no corresponding class property (class is reserved keyword in JS). But actually 2 properties, classList and className.

well these are specified by the w3c what is an attribute and what is a property
http://www.w3.org/TR/SVGTiny12/attributeTable.html
but currently attr and prop are not so different and there are almost the same
but they prefer prop for some things
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
well actually you dont have to change something if you use attr or prop or both, both work
but i saw in my own application that prop worked where atrr didnt so i took in my 1.6 app prop =)

Update to my answer this a citation from https://angular.io/guide/binding-syntax
HTML attributes and DOM properties
Attributes initialize DOM properties and you can configure them to modify an element's behavior, but Properties are features of DOM nodes.
A few HTML attributes have 1:1 mapping to properties; for example, id.
Some HTML attributes don't have corresponding properties; for example, aria-*.
Some DOM properties don't have corresponding attributes; for example, textContent.
Remember that HTML attributes and DOM properties are different things, even when they have the same name.
Example 1: an
When the browser renders , it creates a corresponding DOM node with a value property and initializes that value to "Sarah".
<input type="text" value="Sarah">
When the user enters Sally into the , the DOM element value property becomes Sally. However, if you look at the HTML attribute value using input.getAttribute('value'), you can see that the attribute remains unchanged—it returns "Sarah".
The HTML attribute value specifies the initial value; the DOM value property is the current value.
Example 2: a disabled button
A button's disabled property is false by default so the button is enabled.
When you add the disabled attribute, you are initializing the button's disabled property to true which disables the button.
<button disabled>Test Button</button>
Adding and removing the disabled attribute disables and enables the button. However, the value of the attribute is irrelevant, which is why you cannot enable a button by writing Still Disabled.
To control the state of the button, set the disabled property instead.
Property and attribute comparison
Though you could technically set the [attr.disabled] attribute binding, the values are different in that the property binding must be a boolean value, while its corresponding attribute binding relies on whether the value is null or not. Consider the following:
<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">
The first line, which uses the disabled property, uses a boolean value. The second line, which uses the disabled attribute checks for null.
Generally, use property binding over attribute binding as a boolean value is easy to read, the syntax is shorter, and a property is more performant.

Attribute: Attributes are defined by HTML and are used to customize a tag.
Properties: HTML DOM properties are values (of HTML Elements) that you can set or change.
So, the main differences between attributes and properties are:
Attributes are defined by HTML, but properties are defined by the DOM.
The value of an attribute is constant, but the value of a property is variable.
The attribute’s main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.

getElementById is not working as expected?

I have this simple html markup:
<form id="form" action="lalala">
<input type="text" id="action"/> //a reserved property name id
<input type="submit" id="submit"/> //same here
</form>
However -- running :
alert(document.getElementById('form').action);
alerts
and not "lalala" like it should.
It seems thatgetElementById's props is not accessed directly
Why is that ? ..... it can actually mean that I have to know all the form element's props (in order not to provide reserved prop ID to a descendant element) ?

This has nothing to do with getElementById and everything to do with the properties of an HTML Form Element object.
a reserved property name id
It isn't "reserved", it just has a value defined by default
If you have a form control in a form, and that control has an id (or name) that matches a property that form elements have, then a reference to that form control will overwrite the normal value of that property.
When a form element is indexed for indexed property retrieval, the user agent must return the value returned by the item method on the elements collection, when invoked with the given index as its argument.
— http://www.w3.org/TR/html5/forms.html#the-form-element
This sucks, but is how the DOM for forms has worked since there was such a thing.
Since that particular property maps on to an attribute value, you can use getAttribute and setAttribute to manipulate it instead. (This won't work in old IE (which has a broken implementation of those methods that operate on properties) and won't work for some other properties (like the submit method)).
it can actually mean that I have to know all the form element's props (in order not to provide reserved prop ID to a descendant element)
Yes.

try like this :
alert(document.getElementById('form').getAttribute("action"));

You can access it through attributes:
document.getElementById('form').attributes["action"].value

You can't write .action in this situation because you should access it threw it's attribute and not property, this is an attribute, therefore, you need to getAttribute instead and it will work :)
alert(document.getElementById('form').getAttribute("action"));

Attributes dynamically changed not setting values

So all I want to do is set the disabled and readonly attributes of a text input to "disabled" and "readonly" respectively.I am using Jquery version 1.7.1 . I've tried the following methods:
$("#testtext").attr('disabled','disabled');
$("#testtext").attr("readonly","readonly");
$("#testtext").attr('disabled',true);
$("#testtext").attr("readonly",true);
$("#testtext").prop('disabled',true);
$("#testtext").prop("readonly",true);
The resulting markup looks like this:
<input type = "text" id = "testtext" disabled />
As you can see it is adding the disabled attribute but not giving it a value. This works on some devices but not all of the ones I am trying to support. This seems like something that jQuery should do but my Googling is not coming up with much in this respect. Does anyone have any advice or suggestions? Any advice would be appreciated, thanks much!

$("#testtext").prop("disabled", true);
$("#testtext").prop("readonly", true);
works everywhere, because those are Boolean flags: their presence indicates that the flag is on (the element is disabled/readonly) no matter whether the attribute has a value (or even what the value in the markup is ⇨ disabled=false is also disabled).

.prop( propertyName ) // propertyNameThe name of the property to get.
.attr( attributeName ) // attributeNameThe name of the attribute to get.
As per spec:
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. In addition, .attr() should not be used on
plain objects, arrays, the window, or the document. To retrieve and
change DOM properties, use the .prop() method.
The .prop() method gets the property value for only the first element
in the matched set. It returns undefined for the value of a property
that has not been set, or if the matched set has no elements. To get
the value for each element individually, use a looping construct such
as jQuery's .each() or .map() method.
The difference between attributes and properties can be important in
specific situations. Before jQuery 1.6, the .attr() method sometimes
took property values into account when retrieving some attributes,
which could cause inconsistent behavior. As of jQuery 1.6, the .prop()
method provides a way to explicitly retrieve property values, while
.attr() retrieves attributes.

go with the .prop() . it is more suitable/reliable for boolean properties than the .attr()
Properties generally affect the dynamic state of a DOM element without
changing the serialized HTML attribute. Examples include the value
property of input elements, the disabled property of inputs and
buttons, or the checked property of a checkbox. The .prop() method
should be used to set disabled and checked instead of the .attr()
method
(from the jquery documentation of .prop())

what is the difference between below two ways of disabling the element in java script

I have to disable some elements in my Javas Script code , which one is better for disabling an element through Java Script :
1. document.getElementById("eleId").disabled = true;
2. document.getElementById("eleId").disabled = "disabled";
Please anyone describe these functions and what is the difference between these ?

Both cases are valid.
In case 1, you are setting the attribute 'disabled' to the boolean value 'true'.
In case 2, you are setting the attribute 'disabled' to the string value 'disabled'.
If you were going to set this value via HTML, normally you could get away with just having the bare attribute 'disabled' on the tag listed. But for XHTML/XML style compliance, you would use the well formed attribute disabled="disabled".
Basically, if the browser detects that the attribute 'disabled' is present, (I think) it will disable the element.
EDIT
Another SO user (RobG) pointed out that this sets the 'DOM property' of the element in question not the 'attribute'.
When dealing with the result from 'getElementById', you are dealing with a representation of the structure of the document. When you make modifications you are settings properties on an 'object model'. Having programmed in Java for so long, I typically interchange the term property & attribute. In the case of saying "it sets the attribute", I was incorrect. Saying that I were to set the 'attribute' would mean that I would have modified the document (HTML) to change the value of "disabled" in the actual source. What this is actually doing is modifying the object tree setting the property of the representative object.

In XHTML, attribute minimization is forbidden, and the disabled attribute must be defined as disabled="disabled"
In normal HTML, we can have like disabled=true

Technically, if the attribute just HAS a disabled attribute, it should disable it. Although for XHTML, it must be disabled="disabled"

The HTML disabled attribtue is boolean, its presence sets the related DOM property to true and is written in HTML 4.01 and HTML5:
<... disabled ...>
In XML, attributes must have values, so for XHTML it's written:
<... disabled="disabled" ...>
however the actual value is irrelevant, it still works as a boolean attribute.
In the DOM, element properties usually reflect the related attribute value, but not always. There are also inconsistencies in how setAttribute and getAttribute work, so it's preferable in javascript to use DOM properties unless there is a good reason to use attributes instead (e.g. data- attributes).
To disable an element, the disabled DOM property should be set to boolean true, to "un–disable" the element, the property should be set to false. Assigning any string to the value will cause it to be set to true through type conversion.

people tend to get confused between the xhtml attribute value:
<input id="test" disabled="disabled"/>
and the javascript DOM api:
inputElement.disabled = true;
And set the javascript value to a string. It's not technically correct but it works fine.

What is the difference between properties and attributes in HTML?

After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.
Looking at the list on the jQuery 1.6.1 release notes (near the bottom), it seems one can classify HTML properties and attributes as follows:
Properties: All which either has a boolean value or that is UA calculated such as selectedIndex.
Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.
Thoughts?

The answers already explain how attributes and properties are handled differently, but I really would like to point out how totally insane this is. Even if it is to some extent the spec.
It is crazy, to have some of the attributes (e.g. id, class, foo, bar) to retain only one kind of value in the DOM, while some attributes (e.g. checked, selected) to retain two values; that is, the value "when it was loaded" and the value of the "dynamic state". (Isn't the DOM supposed to be to represent the state of the document to its full extent?)
It is absolutely essential, that two input fields, e.g. a text and a checkbox behave the very same way. If the text input field does not retain a separate "when it was loaded" value and the "current, dynamic" value, why does the checkbox? If the checkbox does have two values for the checked attribute, why does it not have two for its class and id attributes?
If you expect to change the value of a text *input* field, and you expect the DOM (i.e. the "serialized representation") to change, and reflect this change, why on earth would you not expect the same from an input field of type checkbox on the checked attribute?
The differentiation, of "it is a boolean attribute" just does not make any sense to me, or is, at least not a sufficient reason for this.

Difference HTML properties and attributes:
Let's first look at the definitions of these words before evaluating what the difference is in HTML:
English definition:
Attributes are referring to additional information of an object.
Properties are describing the characteristics of an object.
In HTML context:
When the browser parses the HTML, it creates a tree data structure wich basically is an in memory representation of the HTML. It the tree data structure contains nodes which are HTML elements and text. Attributes and properties relate to this is the following manner:
Attributes are additional information which we can put in the HTML to
initialize certain DOM properties.
Properties are formed when the browser parses the HTML and generates the DOM. Each of the elements in the DOM have their own set of properties which are all set by the browser. Some of these properties can have their initial value set by HTML attributes. Whenever a DOM property changes which has influence on the rendered page, the page will be immediately re rendered
It is also important to realize that the mapping of these properties is not 1 to 1. In other words, not every attribute which we give on an HTML element will have a similar named DOM property.
Furthermore have different DOM elements different properties. For example, an <input> element has a value property which is not present on a <div> property.
Example:
Let's take the following HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- charset is a attribute -->
<meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
<title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>
Then we inspect the <div>, in the JS console:
console.dir(document.getElementById('foo'));
We see the following DOM properties (chrome devtools, not all properties shown):
We can see that the attribute id in the HTML is now also a id property in the DOM. The id has been initialized by the HTML (although we could change it with javascript).
We can see that the class attribute in the HTML has no corresponding class property (class is reserved keyword in JS). But actually 2 properties, classList and className.

well these are specified by the w3c what is an attribute and what is a property
http://www.w3.org/TR/SVGTiny12/attributeTable.html
but currently attr and prop are not so different and there are almost the same
but they prefer prop for some things
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
well actually you dont have to change something if you use attr or prop or both, both work
but i saw in my own application that prop worked where atrr didnt so i took in my 1.6 app prop =)

Attribute: Attributes are defined by HTML and are used to customize a tag.
Properties: HTML DOM properties are values (of HTML Elements) that you can set or change.
So, the main differences between attributes and properties are:
Attributes are defined by HTML, but properties are defined by the DOM.
The value of an attribute is constant, but the value of a property is variable.
The attribute’s main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.

We Keep Coding

JavaScript is the programming language of the Web.