What is the Document Object Model (DOM)

Intro

In a nutshell, DOM is a way to represent the structure of a document in memory. Keywords here are structure and in memory. The structure is represented as a tree while the in memory part refers to the fact that DOM is used only to transiently represent a document; it is not for storing said document or transferring it. It exists solely in memory to allow programming languages to traverse and manipulate the said document. DOM is used to represent HTML, XML and SVG (I think you can see the pattern here).

Basics

Let's start with an excerpt from mdn-dom:

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and  each node contains objects. DOM methods allow programmatic access to the tree. With   them, you   can change the document's structure, style, or content.
  • Document: that is the root document itself; i.e. in html speak, the web page.
  • Node: Makes sense due to the tree representation to have nodes that refer to anything; elements, text, attributes. This is the base interface so everything is a Node (java: everything is an Object)
  • Element: Well, these are the elements. For HTML DOM APIs, such as HTMLElement or HTMLTableElement
  • NodeList: An array of nodes. Ordered and indexed.
  • NamedNodeMap: Like the NodeList but accessible via names or indexes (this is just a convenience as this is not ordered).
  • Attribute: Just like elements they are nodes. but what are they??

Most commonly Used (According to MDN)

  • document.querySelector(selectors) and document.querySelectorAll(selectors): selectors can only be values css selectors. Very similar functions the different being querySelector returns the first matching element and querySelectorAll returns a list of all matching elements.
  • document.createElement(name): Creates a new element of type name; think a new table(<table>), paragraph (<p>), ...etc.
  • parentNode.appendChild(node): Add the node as the last child of the node parentNode. You can't make a tree without connecting some nodes together. Think about how a <tr> node is a child of a <table> node while also having children of <td>.
  • document.createTextNode(contents): Well as the name suggests, creates a... text node. This is how you can add the contents of a paragraph or a table cell; the actual text in between the tags.
  • element.setAttribute(attrib, value) and element.getAttribute(attrib): how can you set the border attribute of a table without these? or the attributes of an input element?
  • element.style.stylename = value: similar to settings the style = "stylename:value;"
  • element.innerHTML: Get the HTML contents of a element. This includes everything between the opening and closing tags of that elements; i.e. all of its children and their children and so on. Can be used to get the value or set it. Lots of potential here.

Pending

  • element.addEventListener():
  • window.content:
  • GlobalEventHandlers/onload:
  • window.scrollTo():
← Back to home