DEV Community

Cover image for JQuery, The DOM, the Don and The Domain

JQuery, The DOM, the Don and The Domain

wilijones profile image wilijones ใƒป3 min read

The DOM - When I first heard of the DOM - I though domination, master of the domain.


And while we seek domination and control through our programming efforts, in this case the DOM has little to do with domination or a given domain and about control over the Document Object Model of the document that you are working on. When modeled as an object the document is ready to be manipulated (ok maybe dominated) by javascript.

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.
We can use JQuery to make changes in the DOM structure and contents. This is referred to as "Dom Manipulation." JQuery is used with javascript but it has its own syntax. It uses the "$" sign to indicate you are making a JQuery function call.

Screen Shot 2021-01-20 at 11.29.42 AM

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.

Screen Shot 2021-01-20 at 11.39.03 AM

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.

Screen Shot 2021-01-20 at 11.52.10 AM

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.

Screen Shot 2021-01-20 at 12.03.35 PM

Keep practicing JQuery and you can become the latin "Dominus" of the DOM.

Discussion (0)

Editor guide