JavaScript DOM Intro

Dr. Greg Bernstein

Updated August 29th, 2019

Intro to the JavaScript DOM

Readings

  1. Introduction to the DOM. Fundamental.

  2. The Basics of DOM Manipulation in Vanilla JavaScript. Just a portion of this for now.

References

What is the DOM?

From MDN:

The Document Object Model (DOM) is a programming interface for HTML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content.

What is the DOM?

From MDN:

The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.

Accessing the DOM

  • The DOM is available to JavaScript running in a browser
  • We will use the window and document objects as starting points
  • For non-browser applications there are a variety of libraries to help work with HTML but these don’t need to implement the full DOM. For example the BeautifulSoup library for Python.

Containment Hierarchy

Inheritance Hierarchy

Document and Element inherit from Node
Document and Element inherit from Node

What’s in Node?

Some of the properties and methods:

  • Node.childNodes, Node.firstChild, Node.lastChild
  • Node.nodeName (tag for HTMLElement), Node.nodeType
  • Node.appendChild(), Node.insertBefore(),Node.removeChild()

Why Node?

The Node class provides functionality for creating, traversing, and modifying the DOM tree.

The elements that make up a document are modeled as a containment tree!

Window

The Window Object

From MDN:

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the document.defaultView property.

Sizing and Placing the Window

  • Size
    • Window.innerHeight, .innerWidth, .outerHeight, .outerWidth
    • Window.resizeBy(), .resizeTo()
  • Placement
    • Window.screenX, .screenY
    • Window.moveBy(), .moveTo()

Window: URL & History

  • Window.history
    • Returns a reference to the history object.
  • Window.location Gets/sets the location, or current URL, of the window object.

Window: Search & Selection

  • Window.find()
    • Searches for a given string in a window.
  • Window.getSelection()
    • Returns the selection object representing the selected item(s).

Window: Storage

  • Window.localStorage
    • Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
  • Window.sessionStorage
    • Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it. Unavailable after page is closed.

Window: Scrolling

  • Scroll boundaries and position
    • Window.scrollMaxX, .scrollMaxY, .scrollX, .scrollY
  • Scroll control
    • Window.scroll(), .scrollBy(), .scrollByLines(), .scrollByPages(), .scrollTo()

Document

Page = Document

The document represents the web page. Through the document its elements we can query, enhance, and modify the webpage.

Basic Content

  • Document.title
    • Sets or gets title of the current document.
  • Document.head
    • Returns the <head> element of the current document.
  • Document.body Returns the <body> element of the current document.

Content Lists

Document.forms - a list of the <form> elements within the current document.

Document.images - a list of the images in the current document.

Document.links - a list of all the hyperlinks in the document.

Document.scripts - Returns all the <script> elements on the document.

Meta Information

  • Document.charset, .doctype, .lastModified
  • Document.URL, .documentURI, .location
  • Document.cookie (list of the cookies for that document or sets a single cookie)
  • Document.referrer (*the URI of the page that linked to this page)

Stylesheet Info

  • Document.selectedStyleSheetSet
    • Returns which style sheet set is currently in use.
  • Document.styleSheets
    • Returns a list of the style sheet objects on the current document.
  • Document.styleSheetSets
    • Returns a list of the style sheet sets available on the document.

Element Creation

  • Document.createElement()
    • Creates a new element with the given tag name.
  • Document.createAttribute()
    • Creates a new Attr object and returns it.
  • Document.createDocumentFragment()
    • Creates a new document fragment. Use for more efficient creation.

Element Queries

  • Document.getElementsByClassName(), .getElementsByTagName(), .getElementById(String id)

  • document.querySelector(String selector)
    • Returns the first Element node within the document, in document order, that matches the specified CSS selectors.

Element Queries

  • document.querySelectorAll(String selector)
    • Returns a list of all the Element nodes within the document that match the specified CSS selectors.

Elements

What are they?

Almost everything in the document!

Element Attributes

  • Element.getAttribute(): Retrieves the value of the named attribute from the current node
  • Element.hasAttribute(): a Boolean indicating if the element has the specified attribute
  • Element.removeAttribute(): Removes the named attribute from the element.
  • Element.setAttribute(): Sets the value of a named attribute of the element.

Element Classes

  • Element.classList is a DOMTokenList containing the list of class attributes.

    • This is Powerfull! DOMTokenList supports: .contains(), .add(), .remove(), .replace(), .toggle() and more.
    • Gives you lots of control over classes associated with an element. You will use these alot of the framework you use will.

Element Id

  • Element.id: a DOMString representing the id of the element.

Element Content

  • Element.innerHTML: a DOMString representing the markup of the element’s content.

  • Element.outerHTML: a DOMString representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.

Element Queries

Just like on Document!

  • Element.getElementsByClassName(), .getElementsByTagName(), .getElementById(String id)

  • Element.querySelector(String selector)
    • Returns the first Element node within the element, in document order, that matches the specified CSS selectors.

Element Queries

  • Element.querySelectorAll(String selector)
    • Returns a list of all the Element nodes within the element that match the specified CSS selectors.

Element Sizing Info

Element.clientHeight: Returns a Number representing the inner height of the element.

Element.clientWidth: Returns a Number representing the inner width of the element.

Element Scrolling

Element.scrollHeight, Element.scrollLeft, Element.scrollLeftMax, Element.scrollTop, Element.scrollTopMax, Element.scrollWidth