itspoma/js-dom-bom-events.md

## js-dom-bom-events.md

      
    Raw
  

              js-dom-bom-events.md
            
          
    DOM, BOM and Events in JavaScript world

CURSOR Education ©
DOM

Document Object Model


represent html in cascading tree

BOM

Browser Object Model

No standart, so any browser can have own implementation of BOM (in practice, almost all browsers share the same objects)
Object to work with anything, except of document
window.navigation
window.location
window.history
window.screen
alert, confirm, etc
for (x in window) { document.writeln(x + window[x]) }
window.open(url)
location.href

DOM Tree & HTML DOM


DOM Nodes


document.body instanceof HTMLBodyElement
document.body instanceof HTMLElement
document.body instanceof Element
document.body instanceof Node
console.dir(document.body)
el.nodeName
el.tagName

Node types:
interface Node {
  const unsigned short ELEMENT_NODE = 1;
  const unsigned short ATTRIBUTE_NODE = 2;
  const unsigned short TEXT_NODE = 3;
  const unsigned short CDATA_SECTION_NODE = 4;
  const unsigned short ENTITY_REFERENCE_NODE = 5;
  const unsigned short ENTITY_NODE = 6;
  const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
  const unsigned short COMMENT_NODE = 8;
  const unsigned short DOCUMENT_NODE = 9;
  const unsigned short DOCUMENT_TYPE_NODE = 10;
  const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
  const unsigned short NOTATION_NODE = 12;
  ...
}

DOM from Google console


tab Elements
$0 - last selected node in Elements tab
$0.style.backgroundColor = 'green'
$$("div.myClass")
$("div.myClass")

DOM & js


.innerHTML vs .outerHTML
.nodeValue/data
.textContent
.hidden

Selecting


document & document.documentElement & document.body
document.getElementById()
document.getElementsByClassName(), document.getElementsByTagName()
document.querySelector(selector) & document.querySelectorAll(selector)
<div id="element-id"></div>" => window['element-id'].* && elementId.*
document.forms[], document.images[]
node.getAttribute(key) & node.setAttribute(key, value)
XPath - is a syntax for defining parts of an XML document

document.evaluate('/h2[contains(., "XPath")]', ..)


Navigation


node.previousSibling
node.nextSibling
node.childNodes
node.parentNode

Creating new nodes


document.createElement(element); - creates a new element node with the name element
document.createTextNode(string); - creates a new text node with the node value of string
newNode = node.cloneNode(bool);
node.appendChild(newNode);
node.insertBefore(newNode,oldNode);
node.removeChild(oldNode);
node.replaceChild(newNode, oldNode);
element.innerHTML

Events

Mouse events


onclick
contextmenu
ondblclick
onmousedown
onmousemove
onmouseover
onmouseout
onmouseup

Keyboard events


onkeydown
onkeypress
onkeyup

Elements events


submit on forms submit action

document.forms[0].method


focus on field focus-in
DOMContentLoaded when HTML parsed & DOM built and ready

Handlers


<div onclick='getACupcake(event)'>
button.onclick = function () { .. }
document.getElementById('cupcakeButton').addEventListener('click', getACupcake);
document.getElementById('cupcakeButton').attachEvent('onclick', getACupcake);
document.getElementById('cupcakeButton').onclick = getACupcake;
var event = new Event('click'); elem.dispatchEvent(event); to manually trigger event

Event object


function getACupcake(event) { ... }
event.target
var target = event.target || event.srcElement;

Samples


change size

setTimeout
el.style.fontSize = ++currentSize + "px"
add increment & dicrement
add direction


Questions


what alert will throws?

<html> <head> <script>alert(document.body)</script> </head><body>..</body> </html>


Read


https://maxello.gitbooks.io/js-note/content/10_dom/index.html
http://habrahabr.ru/post/243311/
http://learn.javascript.ru/browser-environment
http://learn.javascript.ru/dom-console