HTML DOM Notes

• defines html elements as objects
• defines properties of all html elements
• defines methods to access all html events
• defines the events for all html events

W3C Dom standard separated into 3 Parts
• Core DOM
• XML DOM
• HTML DOM

What can JS do?
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events
• JavaScript can create new HTML events

Accessing Elements

various methods of accessing
• getElementById
• querySelector & All
• getElementsByTagName
• elem.getElementsByClassName
• document.getElementsByName

Changing HTML Elements

property
• element.innerHTML - new html content
• element.attribute - new value
• element.style.property - new style
method
• element.setAttribute(attribute, value)

DOM Events

Assign Events Using DOM

document.getElementById(id).onclick = displayDate;

onload and unload events

triggered when user enters or leaves page

• onload event used to check visitors browser type and browser version and load the prper version of the web page based on that info
• both can be used to deal with cookies

onchange event

used in combo with validation of input
ex: input type='text' id='fname' onchange='uppercase()'

mouse-click events

• first the onmousedown is triggered
• when released, onmouseup is triggered
• at the end, onclick is triggered

Passing Parameters

element.addEventListener('click', function(){ myFunction(p1, p2); });
• using an anonymous function that calls specified function w/ parameters

JS Output

Display possibilities
• innerHTML
• document.write()
• window.alert()
• console.log()

Event Propagation

bubbling

innermost element event handled first, then outer

capturing

outer most element event handled first, then inner

this can be specified with the 'useCapture' parameter

default value is false, which will use bubbling

DOM Node Classes

• Eventtarget - the root abstract class for everything
• Node - also an abstract class, serving as base for DOM nodes
• Document - serves as entry point to DOM
• CharacterData - abstract class, inherited by: text, like p, commentx
• Element - the base class for DOM elements, providing navigation like getElement, children, querySelector
• HTMLElement - basic class for all HTML elements - inherited by concrete HTML elements - htmlinputelement, htmlbodyelement, htmlanchorelement

Node Lists

• list/collection of nodes
• similar to html collection
• returned from queryselectorall
• not an array - can be looped through and referred by index
• cannot use array methods like push(), pop(), join()

HTML DOM Collections

• getElementsByTagName returns this
• array-like list/collection
• can loop through and refer to elements with number
• cannot use array methods like valueOf(), pop/push/join

Animation

Arrow Function

• hello = () => { return 'hello world!'; }
• return value by default = no need for return keyword
• parameters pass inside parentheses
• if only one parameter: hello = val => 'hello' + val;

this

represents the owner of the function

Regular Function

this

represents the object that calls the function

Forms

form validation

• onsubmit "return validateForm()" method="post"
• numeric validation
  let x = document.getelementbyid('num').value;
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
  text = "not valid";
  } else {
  text = "okay";
  }
  document.getelementbyid('demo').innerhtml=text;

constraint validation

attributes
• disabled
• max
• min
• pattern
• required
• type

clientWidth vs. innerWidth

clientWidth is smaller than innerWidth
CW - includinng padding, without the scrollbar. also include scrolled-out invisible parts of element. Provides the visible part of the document available for content.
IW - includes the scrollbar.

get date

dateBtn