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

, , …,
Buy Xah JavaScript Tutorial.

JavaScript/DOM scripting is really confusing. You have terms like {tag, element, node, object} and then {attribute, property, method}.

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

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

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

object can mean many things in DOM.

attribute is basically a property of a node in HTML/XML. Mostly, it refers to 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. However, JavaScript the language also has “attribute”, that is different from its “properties”. For example, every JavaScript object has 3 attributes {prototype, extensible, class}. 〔➤ Understanding JavaScript Object System

property in DOM is more general, ⁖ { .length, .name, .nodeName, .parent .onclick, .baseURL, .characterSet, .color, …} are all properties.

method can mean JavaScript's OOP methods, or it can mean a method in DOM, which is often also a “property” of a node. ⁖ nodeName is a method and also a property, but getElementById is a method, not property. In some sense, you can think of property as a OOP method that doesn't have any argument.

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

blog comments powered by Disqus