Graduate Program KB

The DOM (Document Object Model)

  • HTML

    • Hyper Text Markup Language
    • Standard markup language for creating webpages

  • Markup Language

    • Use tags to define elements in a document
    • Most common languages (HTML, XML)

  • History: Static vs Dynamic

    • HTML created in the 1990's
    • HTML primarily used for sharing scientific data and news
    • Web pages begin to evolve and become interactive
    • The rise of JavaScript in web browsers

  • JavaScript in Web Browsers

    • Websites given the ability to read and execute scripts
    • JavaScript: Most common scripting language that runs in almost all modern browsers
    • Standardized by ECMA International

  • Dynamic Web Pages give the:

    • Ability to change web pages without having to refresh the page
    • Ability to respond to user events

  • DOM (Document Object Model)

    • The DOM is an API that interacts with the HTML document
    • The DOM takes a HTML document and represents its elements as a tree structure

  • DOM representation

    • Document : Refers to the HTML web page document
    • Object : Refers to the browser's internal representation of the document
    • Model : Refers to the created tree like representation
    • DOM Objects are referred to as Nodes
    • Node is an interface class in which many concrete classes implement. This makes every object of the DOM a node type
    • The entire HTML document can be represented internally as a JavaScript object

  • DOM Classes dom-classes

  • DOM Manipulation Example:

//Appending a Text Node
const body = document.body
body.append('Welcome')

//Create h1 Element
const h1_header = document.createElement('h1')
h1_header.innerText = 'Hello'
h1_header.textContent = 'Hello'
body.append(h1_header)

//Use innerHTML - Strong Tags within string are used
const paragraphElement = document.createElement('p')
paragraphElement.innerHTML = 'Welcome to the <strong>tutorial</strong> page'
body.append(paragraphElement)

//Query Selectors
document.querySelector('h1').innerText = 'This is a change' //Finding by Tag
document.querySelector('#demo').innerText = 'Hello World!' //Finding by ID

//OnClick Listener
const onClickFunc = () => {
  //Event Handler
  document.getElementById('demo').innerHTML = 'Button was clicked'
}
document.querySelector('#demo').addEventListener('click', onClickFunc)

//OnClickBtn Listener
const onClickBtn = () => {
  //Event Handler
  document.getElementById('demo').innerHTML = 'Button was clicked'
}

document.querySelector('#btn').addEventListener('click', onClickBtn)

//Mouse Events - onMouseOver change background color
const onMouseColorChange = () => {
  //Event Handler
  document.getElementById('textArea').style.backgroundColor = 'red'
}

document
  .getElementById('textArea')
  .addEventListener('mouseover', onMouseColorChange)

References / Resources

Powerpoint Slides

Recording

DOM Viewers

MDN DOCS

DOM Manipulation