HTML CSS JavaScript Jargons: Tag, Element, Node, Object, Attribute, Property, Method
What is the difference between attribute and property?
In HTML, the <div>, <p>, etc are called tags.
The complete <div>…</div>, <p>…<p>, etc are called elements. We say, “div element”, “paragraph element”, etc.
Each HTML element has attributes, such as id=val, class=val, href=val etc. The “id”
in
id=val
is the attribute name, and
val is its value.
When HTML is parsed by browser into DOM, the HTML “element” is called object or node, and HTML attributes become properties of the object/node.
DOM object can have any properties, not one-to-one map with HTML attribute. Because DOM is like a language runtime. The properties are like instance variables. JavaScript can add arbitrary properties (which is key/value pair) to any DOM object, in general.
What is Element
“Element” is the official name for a node of a HTML document. e.g. <p>something</p> is a string representation of a HTML element.
What is Tag
“Tag” is part of the syntax to represent a HTML node.
For example, in <p>some</p>.
The <p> is “opening tag”, and </p> is “closing tag”.
Note, some element do not have a closing tag. [see List of HTML Self-Closing Tags]
What is Node
“Node” is a node of tree of
Document Object Model (aka DOM). A HTML element is a node. A XML element is a node. The xyz in <p>xyz</p>
is a node. It is a child node of the element “p”. Whitespace between elements is also a node.
[see JS: Get Element's Parent/Child/Sibling, Navigate DOM Tree]
[see DOM: Whitespace Nodes]
What is Object
In JavaScript, “object” is one of its datatype. It is characterized as a collection of key/value pairs.
[see Object Type]
In HTML/XML, when a element is parsed, it becomes a node in the DOM tree. This node, is also called object, when we want to talk about programing it. [see Browser Window Object]
In other words, HTML tag represents element, and it becomes node in DOM, and becomes object in JavaScript.
What is Property
In CSS, {color, width, border, font-family, etc} are properties.
In JavaScript, properties are the key/value pairs attached to object. [see Property Overview]
In DOM, “property” is a “instance variable”, it corresponds to HTML's “attribute”. For example, HTML elements has {id, class}, attributes. In DOM, they are called “properties”.
What is Attribute
In HTML/XML,
“attribute” are things like {id, class, href, src, etc} of a HTML element, or arbitrary such in XML.
e.g. in <x y="z">3</x>, the “y” is a attribute.
In JavaScript, “attribute” is a “special” info attached to property. That is, in JavaScript, each object datatype has properties (which are key/value pairs), and each “property” has attributes such as {writable, enumerable, configurable}. [see Property Attributes]
What is Method
in JavaScript, a “method”, is a property whose value is a function. So, a method is also a property, technically.
In DOM, the term “property” seems to follow JavaScript, but, properties that are not functions are refered to as “property” proper. For example, { .length, .name, .nodeName, .parent .onclick, .baseURL, .characterSet, .color, etc} are all properties, but “getElementById” is a “method”.
Note, all these jargons are NOT used consistently among docs (e.g. Mozilla vs Microsoft).