Javascript DOM (Document Object Model) Tutorial

In this Javascript tutorial we learn what the DOM is, how it works and how to interact with its objects and their methods and properties.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

What is the DOM

Before starting this tutorial, we recommend that you have at least the basic knowledge of objects in Javascript, which we cover in more detail in the Standalone Objects tutorialOpens up in a new page

Every webpage, and the elements inside of it, can be considered to be an object. For example, the webpage itself is an object called document and has properties and methods associated with it that allows us to interact with it.

Example:
<script>

  document.write("Hello Koders!");

</script>

The document object makes the write() method available to us to write some text to the webpage.

Similarly, all other document elements like <title>, <body> and <h1> are objects as well and have properties and methods available to them. All of these make up the Document Object Model, or DOM.

Objects are organized in a hierarchy. For example:

  • The window object is the outermost element.
  • Any html document that’s loaded into a window becomes a document object, and is a child of the window object.

The individual html elements are then children of the document object. For example:

  • The html object is the outermost child of the document.
  • The head and body elements are children of the html object.
  • The title element is a child of the head object.
  • The h1 element is a child of the body object.

Below is a simple tree to illustrate this concept.

DOM Example Flowchart

DOM Methods & Properties

We can interact with the DOM through a variety of object properties and methods.

The table below lists the properties available to DOM objects.

PropertyDescription
accessKeyReturn or set the accesskey attribute of an element
attributesReturn a NamedNodeMap of an element's attributes
childElementCountReturn the number of child elements in an element
childNodesReturn a collection of an element's child nodes
childrenReturn a collection of an element's children
classListReturn an element's class name(s)
classNameReturn or set the value of the class attribute of an element
clientHeightReturn the height of an element, including padding
clientLeftReturn the width of the left border of an element
clientTopReturn the width of the top border of an element
clientWidthReturn the width of an element, including padding
contentEditableReturn or set whether an element's content is editable
dirReturn or set the value of an element's dir attribute
idReturn or set the value of an element's id attribute
innerHTMLReturn or set the content of an element, including HTML
innerTextReturn or set the text content of a node, excluding HTML
langReturn or set the value of an element's lang attribute
lastChildReturn an element's last child node
lastElementChildReturn the last child element of a parent element
namespaceURIReturn the namespace URI of an element
nextSiblingReturn the next node at the same node tree level
nextElementSiblingReturn the next element at the same node tree level
nodeNameReturn the name of a node
nodeTypeReturn the type of a node
nodeValueReturn or set the value of a node
offsetHeightReturn the height of an element, including padding, border and scrollbar
offsetWidthReturn the width of an element, including padding, border and scrollbar
offsetLeftReturn the horizontal offset position of an element
offsetParentReturn the offset container of an element
offsetTopReturn the vertical offset position of an element
outerHTMLReturn or set the content of an element
outerTextReturn or set the outer text content of a node and its children
ownerDocumentReturn an element's root element (document object)
parentNodeReturn an element's parent node
parentElementReturn an element's parent element
previousSiblingReturn the previous node at the same node tree level
previousElementSiblingReturn the previous element at the same node tree level
scrollHeightReturn the entire height of an element, including padding
scrollLeftReturn or set the number of pixels an element's content is scrolled horizontally
scrollTopReturn or set the number of pixels an element's content is scrolled vertically
scrollWidthReturn the entire width of an element, including padding
styleReturn or set the value of the style attribute of an element
tabIndexReturn or set the value of the tabindex attribute of an element
tagNameReturn an element's tag name
textContentReturn or set the text content of a node and its children, excluding HTML
titleReturn or set an element's title attribute

The table below lists methods available to DOM objects.

MethodDescription
addEventListener()Attach an event to the specified element
appendChild()Add a new child node to an element as the last child node
blur()Remove focus from an element
click()Simulate a mouse-click on an element
cloneNode()Clone an element
compareDocumentPosition()Compare two elements' document position
contains()Return whether a node is a child of another node
exitFullscreen()Exit an element from fullscreen mode
firstChildReturn an element's first child node
firstElementChildReturn an element's first child element
focus()Give focus to an element
getAttribute()Return specified attribute value of an element
getAttributeNode()Return a specified attribute node
getBoundingClientRect()Return the size of an element and its position relative to the viewport
getElementById()Return an element that matches the specified id
getElementsByName()Return all elements that match the specified name into an array
getElementsByTagName()Return all elements that match the specified tag name into an array
getElementsByClassName()Return all elements that match the specified class into an array
hasAttribute()Return whether an element has the specified attribute
hasAttributes()Return whether an element has any attributes
hasChildNodes()Return whether an element has any child nodes
insertAdjacentElement()Insert an element at the specified position, relative to the current element
insertAdjacentHTML()Insert formatted text at the specified position, relative to the current element
insertAdjacentText()Insert text into the specified position, relative to the current element
insertBefore()Insert, a new child node before a specified child node
isDefaultNamespace()Returns whether a specified namespaceURI is the default
isEqualNode()Evaluate if two elements are equal
isSameNode()Evaluate if two elements are the same node
isSupported()Return whether a specified feature is supported on the element
normalize()Join adjacent text nodes in an element, and removes any empty text nodes
querySelector()Return the first child element that matches a specified CSS selector(s)
querySelectorAll()Return all child elements that matches a specified CSS selector(s)
remove()Remove an element from the DOM
removeAttribute()Remove a specified attribute from an element
removeAttributeNode()Remove a specified attribute node, and return the removed node
removeChild()Remove a child node from an element
removeEventListener()Remove an event that added with the addEventListener() method
replaceChild()Replace a child node in an element
requestFullscreen()Show an element in fullscreen mode
scrollIntoView()Scroll the specified element into the visible area of the browser window
setAttribute()Set the specified attribute to a specified value
setAttributeNode()Set the specified attribute node
toString()Convert an element to a string

We will discuss many of these properties and methods, with examples, in the following lessons.

Summary: Points to remember

  • The html document and the elements inside are objects and form the Document Object Model, or DOM.
  • DOM objects have properties and methods that allow us to interact with them, accessed through dot notation.