Confusing Terminology in JavaScript/DOM: tag, element, node, object, attribute, property, method

, , …,
Buy Xah JavaScript Tutorial.

What's the difference between attribute and property?

In HTML, the <div>, <p>, etc are called tags.

In the complete <div>…</div>, <p>…<p>, etc are called elements. We say, “div element”, “paragraph element”, “span element”, etc.

Each HTML element has attributes, such as id="…", class="…", href="…" etc.

Attribute are fixed set of possible things per type of element. (for example, there's no attribute of abcdefg="…" in any HTML element.)

When HTML is parsed by browser into DOM, HTML “element” is now 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.


“Element” is the official name for a node of a HTML document. ⁖ <p>something</p> is a string representation of a HTML element.


“Tag” is part of the syntax to represent a HTML node. ⁖ {<p>, </p>}. The <p> is “opening tag”, and </p> is “closing tag”.


“Node” is a node of DOM. A HTML element is a node. A XML element is a node. The xyz in <p>xyz</p> is a child node of the element “p”. Whitespace between elements is also a node. 〔➤ JavaScript: Navigate DOM Tree


In JavaScript, “object” is one of its datatype. It is characterized as a collection of key/value pairs. 〔➤ JavaScript: What's Object?ECMAScript 2015 §Overview#sec-terms-and-definitions-object

Parsed HTML/XML document elements in browser are also referred to as objects. 〔➤ JavaScript: Browser Object Model, Document Object Model


In CSS, {color, width, border, font-family, …} are properties. Full property table

In JavaScript, properties are the key/value pairs attached to object. ECMAScript 2015 §Overview#sec-property 〔➤ JavaScript: 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”.


In HTML/XML, “attribute” are things like {id, class, href, width, height, title, …} of a HTML element, or arbitrary such in XML. ⁖ 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), eand each “properties” has attributes such as {writable, enumerable, configurable}. 〔➤ JavaScript: Property Attributes: Writable, Enumerable, Configurable


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. ⁖ { .length, .name, .nodeName, .parent .onclick, .baseURL, .characterSet, .color, …} are all properties, but “getElementById” is a “method”.

all these terms are not used consistently among docs (⁖ Mozilla vs Microsoft).

blog comments powered by Disqus