document-object-model.md

Document Object Model (DOM)

"The Document Object Model (DOM) is a programming interface for HTML and XML 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." - Mozilla web docs

Familiarize yourself with all of the following reference material:

• The HTML DOM Document Object
• The HTML DOM Element Object
• Using JavaScript to Manipulate the DOM

"When an HTML document is loaded into a web browser, it becomes a document object." - w3schools

window.document
document

document.URL
document.cookie

The document object provides properties and methods to access all node objects, from within JavaScript." - w3schools

document.childNodes
document.children
document.children[0].children

Selections

Reference: https://www.w3schools.com/js/js_htmldom_elements.asp.

// document.getElementById()
// document.getElementsByTagName()
// document.getElementsByClassName()
// document.querySelectorAll()

Events

Reference: https://www.w3schools.com/js/js_htmldom_events.asp.

Event-listening

Reference: https://www.w3schools.com/jsref/met_document_addeventlistener.asp.

// document.addEventListener()

DOM Manipulation

Again, reference: https://www.w3schools.com/js/js_htmldom_document.asp.