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

, , …,

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).

Like what you read? Please tell friends, share link, or Buy JavaScript in Depth. Thanks.
blog comments powered by Disqus