The DOM - When I first heard of the DOM - I thought domination, master of the domain.
What the heck is the Domain then?
The Domain was historically the area that was ruled over by a particular lord, ruler or other center of power. It may have been as large as an empire or as small as a few acres of land. The origin of the word can be traced to the Latin word "dominus." Also related is the word "Don" used in the Spanish language to desribe a feudal lord and popularized by the Italian American Mafia in the media, as in "Don Corleone."
Another way to think of the word is "house" both in the royal sense and in the mundane. The domain was dominated by a particular domus(house), like the Hapsburg family who ruled Central Europe for more than a thousand years. We see the phrase eminent-domain used with regards to property appropriation in urban planning and city structural design. And finally domaine to describe an self-contained estate residency that grows grapes and bottles burgundy.
Yeah but what is it with regard to Computers?
In computers and computing Domain similarly refers to an area where a particular structure holds power. More specifically it refers to the section of a computer or network of computers that can be accessed from a given place or with a given program. Ultimately the internet is also divided into domains each with a unique domain name. The DNS or Domain Name System is how the internet is organized a bunch of domains within domains each with their own IP addresses.
By calling document.domain you can obtain the domain name of the sever that document is stored on. What we often refer to as a website or web address can be seen as a domain as can be a collection of websites like those ending in .org or .eu - these are the largest categories called TLD or top level domains.
So back to the DOM... Using JQUERY
So the Document Object Model is something completely different than domain that just has a similar sounding name.
In the above code we use JQuery to first select the tileArea section of the DOM. We use a series of calls of the Jquery method ".css()" to style the text and color of the title area section.
The titleArea is located here in the html structure of the document. Specifically the document body which is an object that can be selected as whole by calling document.body. The titleArea section is the only section with the ID equal to titleArea. But you can select multiple sections at once by calling them according to class name or by the div type.
You aren't just limited to making styling changes you can change the structure of the html and start down the path of being a real Don who can manipulate the DOM. In the final example here we are able to add new divisions within out html structure using JQuery commands. These sections can in turn be added to subtracted from or styled using further JQuery methods.
Keep practicing JQuery and you can become the latin "Dominus" of the DOM.