Browser Events

Browser Object Model

Window Object

  • Acts as Global object.
  • Variables added to global scope via var have their [[Configurable]] attribute set to false and cannot be removed via delete.
  • If foo is not defined, trying to access foo will throw a Reference Error: foo is not defined while window.foo will return undefined (because it is a property lookup).
  • Each frame has its own window object. top ferences the outermost frame, parent points to the current frame's immediate parent frame.
  • window.screenLeft, window.screenX, window.screenTop, window.screenY
  • window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight
    • window.resizeTo(), window.resizeBy()
  • window.open() can return null if pop-up blocker prevents it from happening. window.close() to close.
  • setTimeout() and setInterval() are window methods.
    • Avoid intervals, better to recurseviely call setTimeout()

Location Object

  • hash, hostname, href, pathname, search (query string)
  • Set window.location to navigate
  • replace() to navigate to a URL but not update the history stack
  • reload() reloads current page

Navigator Object

TODO * Browser information

Document Object Model

Node Type

All node types inherit from Node in JavaScript. A node n shares the same basic properties:

n.nodeType
A number from 1 - 12 
n.nodeName
For elements, the tag name 
n.nodeValue
For elements, always null 
n.childNodes
A NodeList, an array like object of child nodes.
Can be accessed via bracket notation, n.childNodes[0]
or the item() method, n.childNodes.item(1)
Also contains a length property. 
n.parentNode
Parent in the document tree 
n.previousSibling

n.nextSibling

n.firstChild

n.lastChild

n.hasChildNodes()
More efficient than n.childNodes.length 
n.ownerDocument()
Quick way to access Document node rather than traversing up the node hierarchy 
n.appendChild()
Add node to the end of childNodes.
If passing in a node, remove it from previous location.		 
n.insertBefore()
Accepts two arguments: node to insert and reference node.
null reference node? Act as .appendChild()		 
n.replaceChild()

n.removeChild()

n.cloneNode()

n.normalize()
Remove empty text nodes and join text nodes that are immediate siblings.

Document Type

Properties
document.anchors

document.applets

document.forms

document.images

document.links

document.readyState == 'loading'

document.readyState == 'interactive'
DOMContentLoaded 
document.readyState == 'complete'
sub-resources loaded
Methods
document.getElementById()

document.getElementsByTagName()

document.getElementsByClassName()

document.querySelector('.some.selector')

$('.some.selector')[0];

document.querySelectorAll('.some.selector')
Returns array of 0 or more matched elements 
$('.some.selector');

document.createElement()

document.createDocumentFragment()

Element Type

Properties
element.childElementCount
Number of children 
element.firstElementChild

element.lastElementChild

element.previousElementSibling

element.nextElementSibling

element.className

element.classList

add()
, 
remove()
, 
contains()
, 
toggle()
Methods
element.getElementById()
$('#...') 
element.getElementByTagName()

element.querySelector()

element.createElement()

element.createDocumentFragment()