Difference between Attribute and Property in HTML world
Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes.
While writing HTML 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.
- 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 .
Let’s discuss further:
There are 2 attributes, type and value.Also it has 2 properties,type and value.
Let’s take another example:
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.
Let’s talk about the type property.
The type property is a reflected property for the type attribute.
Let’s take about how to get values of an attribute and a property:
<input id="inputId" type="number" value="Name:">
var element = document.getElementById(“inputId”);
element.getAttribute(“type”) will give “number” and element.type will give “text” because the initial value we have provided is a text.
Same is the case with value property. Imagine that an user has given input text as “hello”, then,
element.getAttribute(“value”) will give “ Name: ”,since we have provided “ Name: ” as initial attribute value and element.value will give “hello”.
So, 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
Name already in use
Front-end-Job-Interview-Questions / JavaScript / 21.md
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
В чём разница между «атрибутом» (attribute) и «свойством« (property)?
Атрибуты определены в разметке HTML, а свойства определены в DOM. Большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов. Но они не идентичны.
HTML: The difference between attribute and property
In this short post I will explain the difference between attributes and properties in HTML. The .prop() function introduced in jQuery 1.6 raised a lot of questions about the difference and I hope this post will help you to understand it.
What is an attribute?
Attributes carry additional information about an HTML element and come in name=”value” pairs. Example: <div >. Here we have a div tag and it has a class attribute with a value of my-class .
What is a property?
Property is a representation of an attribute in the HTML DOM tree. So the attribute in the example above would have a property named className with a value of my-class .
What is the difference between attribute and property?
Attributes are in your HTML text document/file, whereas properties are in HTML DOM tree. This means that attributes do not change and always carry initial (default) values. However, HTML properties can change, for example when user checks a checkbox, inputs text to textarea or uses JavaScript to change the property value.
Here is a visual representation:
Assume user inputs his name "Joe" into the inputbox. Here are what attribute and property values of an element will be.
As you can see, only element’s property is changed, because it is in the DOM and dynamic. But element’s attribute is in HTML text and can not be changed!
I hope this helps to understand the difference between attributes and properties. If you have any questions please leave them on jQueryHowto Facebook page.
В чем разница между атрибутом attribute и свойством property
In this short post I will explain the difference between attributes and properties in HTML. The .prop() function introduced in jQuery 1.6 raised a lot of questions about the difference and I hope this post will help you to understand it.
What is an attribute?
Attributes carry additional information about an HTML element and come in name=”value” pairs. Example: <div >. Here we have a div tag and it has a class attribute with a value of my-class .
What is a property?
Property is a representation of an attribute in the HTML DOM tree. So the attribute in the example above would have a property named className with a value of my-class .
What is the difference between attribute and property?
Attributes are in your HTML text document/file, whereas properties are in HTML DOM tree. This means that attributes do not change and always carry initial (default) values. However, HTML properties can change, for example when user checks a checkbox, inputs text to textarea or uses JavaScript to change the property value.
Here is a visual representation:
Assume user inputs his name «Joe» into the inputbox. Here are what attribute and property values of an element will be.
As you can see, only element’s property is changed, because it is in the DOM and dynamic. But element’s attribute is in HTML text and can not be changed!
I hope this helps to understand the difference between attributes and properties. If you have any questions please leave them on jQueryHowto Facebook page.
Attributes and properties
When the browser loads the page, it “reads” (another word: “parses”) the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects.
For instance, if the tag is <body >, then the DOM object has body.id=»page» .
But the attribute-property mapping is not one-to-one! In this chapter we’ll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different.
DOM properties
We’ve already seen built-in DOM properties. There are a lot. But technically no one limits us, and if there aren’t enough, we can add our own.