DOM

Question 1

Root Node & Root’s children

Answer 1

document
// document has one child node: `html`
// ... accessed via:
document.documentElement

Question 2

Properties w/ references to related nodes

Answer 2

.parentNode // all nodes
.parentElement // html element nodes

// the following will traverse
// html + text nodes
.childNodes
.firstChild
.lastChild
.previousSibling
.nextSibling

// only traverse html nodes
.children

Question 3

Properties that explain the node itself (3)

Answer 3

// name of node
// for HTML elements, it is the
// ... HTML tag in all caps
// for text node, value == '#text'
// for document node, value == '#document'
.nodeName

// text of text-node
.nodeValue

// number reflecting type of node—1 for html node, 2 for text, 8 for comments, 9 for document, 10 for 
.nodeType

Question 4

Shortcut to reference body node

Answer 4

document.body

Question 5

Shortcut to ref every form on page

Answer 5

document.forms

Question 6

Shortcut to ref every link on page

Answer 6

document.links

Question 7

Methods for finding DOM nodes (3)

Answer 7

.getElementById(str id)
=> {object|null} if DOM contains 1 node w/ that ID, returns a reference to that node, else, null

.getElementsByTagName(str tag)
=>  {array-like-object} all nodes that have that tag
#note: can be used off any node for finer control
#example:
document.getElementById('header').getElementsByTag('a');

.getElementsByClassName(str class)
=>  {array-like-object} all nodes w/ that class name

.querySelector(str cssSelector)
=>  {obj|null} first node that matches selector, else, null
#IE8+ support, but IE8 can only use CSS 2.1 selectors

.querySelectorAll(str cssSelector)
=>  {array} all nodes that match selector
#see .querySelector

Question 8

Working w/ HTML attributes of node

Answer 8

You can add/remove/edit HTML attributes as node-object properties:

node. href = ‘http://google.com’; // add/edit
node. href = null; // remove

Watch out for class and for, since they’re reserved words, use className and htmlFor instead. Also, this doesn’t seem to work w/ custom attributes or attributes not expected for that element. An alternative:

node. hasAttribute(str name) //=> boolean
node. getAttribute(str name) //=> value
node. setAttribute(str name, str value)
node. removeAttribute(str name)

Question 9

Editing inner node content (fast way)

Answer 9

.innerText // W3C standard, doesn’t work in IE
.textContent // doesn’t work in Firefox

.innerHTML

Concatenation works, if not wanting to replace:
node.innerHTML += ‘add this’;

Question 10

Creating nodes

Answer 10

// both create and return node objects
// you can then use the usual node props & methods
document.createElement(str tag)
document.createTextNode(str value)

// or clone an existing node
// (doesn't clone event handlers)
node.cloneNode()  //=> node ref

Question 11

Determine if node has a child-node

Answer 11

parentNode.contains(obj nodeRef)
//=> {bool} if parent contains nodeRef as child

Question 12

Determine if node is a parent

Answer 12

node.hasChildNodes()
//=> {bool} true if child nodes exist, else false

Question 13

Remove or replace nodes

Answer 13

parentNode.replaceChild(newNode, oldNode)
//=> {obj} newNode replaces oldNode, then returns reference to *oldNode*
#note: if newNode is already somewhere in the document, it is removed first

parentNode.removeChild(nodeRef)
//=> {obj} removes and returns node
#note: throws if child isn't a child of parentNode

Question 14

Add nodes into DOM (slower than .innerHTML)

Answer 14

parentNode.insertBefore(newNode, refNode)
//=>  add node before refNode, then return ref to new node
#note:  if refNode is not given, newNode is last child

parentNode.appendChild(nodeRef)
//=>  add node as last child, then return ref to node
#note: if nodeRef is already somewhere in the document, it is removed first and then added as last-child of parent

Question 15

Add & remove event listener

Answer 15

node.addEventListener(str eventType, func listener, bool useCapture=false)
//=> {undefined} add event listener to node
- keep a reference to the function if you want to remove the event later
- duplicate event listeners are ignore (same eventType + same listener)
- use of this refers to the node
#compatibility—IE8 will need a shim for event handling methods

// same signature as .addEventListener
.removeEventListener(str eventType, func listner, bool useCapture=false)
//=> {undefined} removes event listener from node

Question 16

Trigger event manually

Answer 16

node.displayEvent(obj event)
=>  {bool} false if any event-handler called .preventDefault, true otherwise
#compatibility—IE8 needs a shim, Event constructor (from example) won't work in IE at all
#example:
ref.displayEvent(new Event('click'));

Question 17

Stop default handling

Answer 17

// finish
.stopPropagation
.preventDefault

Question 18

Finish event API

https://developer.mozilla.org/en-US/docs/Web/API/Event

Answer 18

true