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

, , …,
Want to master JavaScript in a week? 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 really the informal term for “name of a node”, or it may refers to the string {<…>, </…>}. ⁖ we say “opening tag”, “closing tag”. Am not sure it's officially defined.

• “element” is the official/formal term for technically a node of a HTML document. ⁖ represented by the string <p>something</p>.

• “node” refers to a node of DOM, but in practice, it more often refers to a element of XML (as opposed to HTML). However, note that the text content of a HTML/XML element is also a node. ⁖ the “xyz” in <p>xyz</p> is a child node of the element “p”. So, node isn't just element. By W3C spec, the empty spaces between elements are actually a node too, but browser implementation differs.

• “object” is basically a parsed node in browser. But in another sense, technically, it refers to certain things in DOM, ⁖ {location, navigator, window, clientInformation, clipboardData, documentType, …}. Of course, “object” also refers to JavaScript's object in a technical sense. 〔➤ What's Object in JavaScript?

• “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), and am not sure they even have precise definition.

blog comments powered by Disqus