HTML DOM - JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 11. HTML DOM

JavaScript is an object oriented programming language. In its eyes (figuratively), everything is an object (with a few exceptions like primitive values). In order to use it in conjunction with HTML, it uses HTML DOM or HTML Document Object Model.

What is the Document Object Model anyway? The HTML Document Object Model is a tree (it can be also called as a hierarchy) of all the objects in a HTML web page. It is an organized structure where elements are neatly arranged according to their respective parents and children. On top of a Document Object Model is the document object.

Back then, the document object or the HTML page (including scripts and styling code) is considered the topmost object or parent in the Document Object Model. Nowadays, due to changes in JavaScript and browsers, the document object is now a child of the window object.

Here is a simple sample HTML page.

<html>

<head>

<title>Sample Web Page</title>

</head>

<body>

<h1>Hello World!</h1>

<p>This is a sample HTML document.</p>

</body>

</html>

If you visualize its Document Object Model in bullet form, it will look like this:

· document

o head

§ title = “Simple Web Page”

o body

§ h1 = “Hello World!”

§ p = “This is a sample HTML document.”

§

Of course, that is just a simple representation of the Document Object Model. The important thing to note is that through the document object, you can access and manipulate all the elements in your page. You can treat the elements in your HTML as “properties” of your document object. For example, try to do this in your console:

> document.title

< "Sample Web Page"

> document.title = "New Title"

< "New Title"

> document.title

< "New Title"

> _

After doing that, you can check the tab of the document you are editing. And yes, the title of the page became "New Title". With Document Object Model, it has become easier to interact and manipulate everything in your HTML document.

It appears so simple, but what about the other elements in your page? This is where it gets interesting. True, it is easy to change and access the title element in your webpage. After all, there is only one title element in every web page. How about the other elements that are used multiple times, like <p> and <span>?

But before you dive deep to that, know more about the document object and the concept of parents and children first.

The Document Object

The document object is the primary parent node of HTML DOM. Since it is in the topmost part of the Document Object Model, it is often called the root node or object. All other nodes, objects, or elements are contained within or are owned by the document object. By the way, the objects within DOM are often called as nodes due to the structural design of the DOM itself.

Also, despite being the root node, the document object is under the window object. The window object is the window of the browser. Unlike the document object, some browsers do not support the window object. For now, the main focus of this chapter will be the document object since it usually receives the most interaction from you.

Document Object’s Properties and Methods

The document object has a lot of properties, methods, and child nodes that you can access. Of course, you will not need to learn all of them at once at this point. For now, you will know the most used methods and properties you need.

Navigating Through the Document Object Model

Parent and Child Concept

Anyway, the concept of parent and children nodes is simple. If element A is within element B, element A is a child of element B and element B is the parent of element A. For example:

The element <body> is a child node of the element <html> or the document object itself. On the other hand, the element <html> or the document object is the parent node of element <head> and <body>.