JavaScript’s Document Object Model (DOM)

AJ Auntor

What is the DOM?

A website consists of HTML and CSS at its most basic level. Document Object Model (DOM) is what the browser creates as a representation of the document. The documents in this section enable Javascript to manipulate a website’s elements and styles. This is achieved through the use of objects in a tree model.

  • HTML elements as objects
  • Properties and events of the HTML elements
  • Methods to access the HTML elements

DOM Document

All other objects on your website are owned by the DOM Document. This means you must always start at the document in order to access any object on your webpage. As well as properties and methods that enable us to access and modify our website, it contains many other useful properties and methods.

Finding HTML Elements

As we now know what DOM documents are, we can begin to construct our first HTML elements. You can use the Javascript DOM to accomplish this in many different ways. Here are some of the most common:

A single element is retrieved by its id using the getElementById() method. The following example shows how to retrieve a single element:

We are going to save the variable header title with the element with the id of the header title.

The getElementsByClassName() method returns a list of all the elements found in an object using an array.

We are getting all the items with class list-items and storing them in a variable.

By using the getElementsByTagName() method, we can also get our elements by tag name.

Our HTML document contains all li elements, so we are going to get them as variables.

When a CSS selector is specified, the querySelector() method returns the first matching element. Thus, you can get elements according to their ids, classes, tags, and all other valid CSS selectors. These are only a few of the most commonly used selectors.

Get by id:

Get by class:

Get by tag:

Get more specific elements:

Selectors allow us to access more specific elements as well.

Here, we are looking for both a tag and its class simultaneously, and returning the first element that passes the CSS Selector.

With querySelectorAll(), all elements that fit the CSS Selector are returned instead of only those that match querySelector().

An array of h1 tags with a heading class is created by putting them all in this example.

Changing HTML Elements

By changing the HTML element’s properties, we are able to modify its content and appearance.

Changes can be made to the content of an HTML element by using the innerHTML property.

Our example gets the element with the id header and sets the inner content to “Hello World””.

Another way to use InnerHTML is to put tags inside another tag.

All already existing div tags are given a h1 tag.

It is also possible to modify the value of an attribute using the DOM.

Throughout this example, all *img/> tags point to test.jpg as the src.

Our HTML elements’ style property needs to be changed in order to change their style. We can do this with the following example syntax:

We can now test the example by changing the bottom border of an element to a solid black line:

In place of the normal CSS property names, the CSS properties should be written in camelcase. For instance, borderBottom should be written instead of border-bottom.

Adding and deleting elements

The next step will be to learn how we can add new elements and delete existing ones.

With this method, we simply create a div element using a tagname instead of passing it through the createElement() method. Afterward, we just need to insert it into our DOM document and give it some content.

The content is created with a String parameter with the createTextNode() method and then an element is added before an existing div.

The removeChild() method is used to delete an element.

Let’s examine how we can replace items now.

The replaceChild() method is used to replace an element. There are two arguments in the above code, the first representing the new element and the second representing the element we wish to replace.

The write() method also allows us to write HTML expressions and Javascript directly into the HTML output stream.

JavaScript expressions, such as dates, can also be passed.

In addition to taking multiple arguments, the write() method will append them in order of occurrence to the document.

Event Handlers

HTML DOM events can also be reacted to by Javascript. To summarize them, here are a few examples:

mouse click

page load

mouse move

input field change

Using the attributes on your tags, you can create events directly in HTML code. For example, here is an example of an onclick event:

In the example given, the *h1/> text changes to “Hello””“Hello””“Hello”” as soon as you click the button.

As you can see in the next example, you can also call functions when an event occurs.

As soon as the button is clicked, we call the changeText() method with the element passed as an attribute.

Assigning the same events in JavaScript is also possible.

In the next section, we’ll take a look at assigning event listeners to HTML elements.

Our btn element is simply associated with a clickevent that triggers the runEvent method when clicked.

An element can also have multiple events assigned to it:

Node Relationships

A DOM Document has a hierarchical relationship between its nodes. A tree-like structure can be seen in this arrangement. A node’s relationship to its child, siblings, and parent is often described using the terms parent, sibling, and child.

There is only one node with no parent at the top of the graph, which is called the root. HTML documents usually have a root tag called *html/>, since it has no children and is the top tag of the document.

Nodes can be navigated using these properties:

parentNode

childNodes

firstChild

lastChild

nextSibling

The following example shows how you can get the parent element of an h1.

Finally, my conclusion

Congratulations on making it all the way to the end! I hope this article helped you better understand how to manipulate elements on your website using Javascript DOM.

Contact me via Linkedin or leave a comment below if you have any questions or feedback…Thanks!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store