JavaScript DOM Manipulations

JavaScriptDOM Manipulations and Events

Slides By: Ynon Perek

Fine me at: http://ynonperek.com

Friday, April 12, 13

http://ynonperek.com

http://ynonperek.com

The Task

<BODY BGCOLOR='#FFFFFF' style="overflow:hidden;" LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0 CLASS="text" onload="DisplayAD();" onresize="if(typeof DZresize == 'function'){DZresize();};if(typeof dcOnResize == 'function'){dcOnResize();};if(typeof disYnetAdColOnResize == 'function'){disYnetAdColOnResize();};" lang=he><div id='divRedAlert' style='display:none;'></div><iframe id=frmRedAlert name=frmRedAlert frameborder=0 width=0 height=0 MARGINHEIGHT=0 MARGINWIDTH=0 src='/Ext/App/RedAlert/CdaRedAlert_iframe/0,12639,84-234-208-20,00.html'></iframe><div id='ads.ozen' style='position:absolute;z-index:2;left:0;top:0;'></div><div id='ads.elvisR.1' style='position:absolute;z-index:2;right:0;top:0;'></div><div id=mainCont style="overflow:hidden; width:100%; height:100%;" align=center ><div id='mainSpacer' style='overflow:auto;height:100%'><script><style>A.brightgrey:link{color:#7d7f7e}A.brightgrey:visited{color:#7d7f7e}A.brightgrey:active{color:#7d7f7e}A.brightgrey:hover{color:#f00}A.upnvl{color:#7d7f80}A.upnvl:visited{color:#7d7f80}A.upnvl:hover{color:#f00}A.btnvl{color:#7f90b0}A.btnvl:visited{color:#7f90b0}A.btnvl:hover{color:#f00}</style><table id=tbl_logos cellspacing=0 cetd width='46' align='left' style='line-height:12px;'><a href='http://www.ynetnews.com/home/0,7340,L-3083,00.html' class='text11 btnvl'>English</a></td></tr></table></div></td><td width=11> </td><td width=2 bgcolor=black></td><td width=11> </td><td width=132 valign=top style='direction: rtl;' class='ghci3' ><div id=divMainLogo style='margin-top:1px;'></div></td><td width=11><div style='width:11px;'></div></td><TD WIDTH=194 align=right dir=rtl VALIGN=top class='ghciTopStoryMain1' ><div dir=ltr style='height:38px;overflow:hidden;'><IMG SRC='/Common/Files/Images/Date/12.gif' alt="12/04/2013 11:20"><IMG SRC='/Common/Files/Images/D...

Read text Make web


http://www.ynet.co.il/Ext/App/RedAlert/CdaRedAlert_iframe/0,12639,84-234-208-20,00.html




http://www.ynetnews.com/home/0,7340,L-3083,00.html




http://www.ynet.co.il/Common/Files/Images/Date/12.gif




How Browsers Render

• Each browser has a Rendering Engine

• Rendering Engine takes an HTML text and produces a DOM tree


Rendering Engines

Engine Browser Developer

Blink Google Chrome Google

Gecko Mozilla Firefox Mozilla

Trident IE Microsoft

Webkit Apple Safari Apple, KDE, Nokia, Others


How Browsers Work

Parse HTML to make DOM Tree

Build Render Tree from CSS

Layout Elements

Paint


What’s a DOM Tree

<html><body> <p> Hello World </p> <div> <img src="example.png"/> </div></body></html>


Rendering DOM Tree


Rendering DOM Tree

• A Render tree is derived from DOM tree

• It’s not a 1-1 relation


Browser Flow

• Read page as text

• Create DOM tree

• Create Render tree

• Paint


Enter JavaScript

• Read page as text

• Create DOM tree

• Create Render tree

• Paint

JavaScript Manipulates the

data


Enter JavaScript

• JavaScript alters page load

• JavaScript alters DOM Tree

• JavaScript creates interactivity through events handling


JavaScript and DOM<!DOCTYPE html><html><head> <title></title></head><body> <script> var x = 5; var y = 3; console.log('Hello From JS'); </script> <p>This is just some text</p></body></html>

A <script> element is executed in place


http://december.com/html/4/element/html.html


http://december.com/html/4/element/head.html


http://december.com/html/4/element/title.html






http://december.com/html/4/element/body.html


http://december.com/html/4/element/script.html




http://december.com/html/4/element/p.html








Q & ABrowser Page Rendering


Interactive Apps

• Browser is a programming platform

• A web application is interactive


Interactivity

• Browser itself is interactive

• In addition: A web page is interactive

• Demo


Browser Events Loop

click

Event Queue


Event Loop

Wait for Events

Handle Events


Event Loop

Wait for Events

Handle Events


Event Loop

Wait for Events

Handle Events


Event Handling

DOM Node

+

Event

Event Handler (code)


Code Outline

• From HTML:

• <a on...=”handleEvent()”>


Code Outline

• But this can get messy

<a href="#" onclick="doclick" onblur="doblur" onchange="dochange" ondblclick="dodblclick" onmousemove="domove" onmouseover="doover">Too many events</a>


http://december.com/html/4/element/a.html




Code Outline

• From JS

• Get a DOM node

• Bind event to code


Getting DOM Nodes

• getElementById(...)

• getElementsByTagName(...)

• querySelector(...) - IE8 and up


Browser Events

• All browsers use:node.onevent = ...

• IE uses:node.attachEvent(...)

• Other browsers use node.addEventListener(...)


Demo: Events

• Write a simple page that shows alert as a response to click event

• Modify to change text of element


Using the Event Object• Event object includes info on the event

• Print it to console for inspection

<button>Click Me</button> <script> var btn = document.getElementsByTagName('button')[0]; btn.onclick = function(e) { if ( ! e ) e = window.event; console.dir( e ); }; </script>


http://december.com/html/4/element/button.html








Capturing vs. Bubbling

| |---------------| |-----------------| element1 | | || -----------| |----------- || |element2 \ / | || ------------------------- || Event CAPTURING |-----------------------------------

/ \---------------| |-----------------| element1 | | || -----------| |----------- || |element2 | | | || ------------------------- || Event BUBBLING |-----------------------------------



| |---------------| |-----------------| element1 | | || -----------| |----------- || |element2 \ / | || ------------------------- || Event CAPTURING |-----------------------------------

/ \---------------| |-----------------| element1 | | || -----------| |----------- || |element2 | | | || ------------------------- || Event BUBBLING |-----------------------------------

Netscape Microsoft



| | / \-----------------| |--| |-----------------| element1 | | | | || -------------| |--| |----------- || |element2 \ / | | | || -------------------------------- || W3C event model |------------------------------------------



• node.addEventListener takes a third parameter

• true means capturing

• false means bubbling

• defaults to false


Demo

• Capture all click events usingdocument.onclick = ...


Usages

• Default event handlers

• Dynamic event handlers


Double Handlers

Element1

Element2element1.onclick = doSomething;

element2.onclick = doSomething;


Double Handlers

Element1

Element2function doSomething(e) { if ( ! e ) e = window.event; // this refers to // the current element

// for inner event: // this = element2

// for outer event: // this = element1}


Event Types

Interface Events Mouse Events Form Events

load, unload click, dblclick submit

resize, scroll, mousedown, mouseup, mousemove reset

focus, blur mouseover, mouseout


Default Action

• Some events also have a “default” action

• For example: A link will take you to another page by default


Default Action

• Possible to prevent

• return false from handler

• Demo


Q & AHandling Events


Events Lab

• Implement 5 duplicated input boxes

• Each input box should have the same text

• Change one -> all change automatically


Events Lab


Altering Page Load

• Change Document

• Change DOM Tree

• Change Render Tree


Change Document

• (Don’t) use document.write to change the document as it’s being loaded

• Considered bad practice


Change Document

<!DOCTYPE html><html><head> <title></title></head><body> <script> document.write('<h1>Hello World</h1>'); </script> <p>This is just some text</p></body></html>
















http://december.com/html/4/element/h1.html














Change Document

body

script

1. Browser starts to create DOM tree

2. Finds a script tag. Stops to execute


Change Document

body

h13. script added <h1>element to documentscript


Change Document

body

h1

4. browser can continue to create the <p>

script p


Avoiding document.write

• Can insert invalid content

• Clobbers DOM if called after reading the document


Friendlier Ways

• Get a DOM node

• Change it using DOM API


Finding DOM Nodes


DOM Traversal

body<body> <div> <h1>Header</h1> <p> <img src="..." /> Paragraph text <a href="#">google</a> </p> </div></body>

#text #text#div

#h1#text #text #p#text




http://december.com/html/4/element/div.html








http://december.com/html/4/element/img.html

http://december.com/html/4/element/img.html











DOM Traversal

• n.childNodes[]

• n.firstChild

• n.lastChild

• n.nextSibling

• n.parentNode

• n.previousSibling


The (Past) Future

• document.querySelector takes any CSS selector and fetches DOM element

• Supported in IE8 and later


DOM API

• Allows

• Getting info on elements

• Changing element attributes

• Creating new elements

• Setting elements style


DOM API

• Use x.nodeName to get the tag name

if ( this.nodeName === 'INPUT' ){ // handle input element}


DOM API

• Use x.nodeValue to get/set the node value

a.firstChild.nodeValue = 'Go to google';


DOM API• Use getAttribute / setAttribute to

change element attributes

a.setAttribute('href', 'http://www.google.com');


http://www.google.com

http://www.google.com

Creating New Elements• Create elements and text nodes using

document

• Later you can add them to the DOM

document.createElement('P');

document.createTextNode('Hello World');


Creating New Elements• Insert new nodes by manipulating

existing

// append y to xx.appendChild(y) // insert y to x before zx.insertBefore(y,z) // remove y from xx.removeChild(y) // replace y with zx.replaceChild(y,z)


Change Style• Use .style property to set an element

style

• Note style keys are almost like CSS property names

p.style.backgroundColor = 'blue';


Q & AHandling Events


DOM Lab• Given the HTML at:

http://jsbin.com/ecitag/1/edit

• Use JavaScript to:

• write your name in the first <li> item of the second list

• Change the H3 to H4

• Set all links to point to google.com




DOM Lab

• Create a Money Converter calculator

• Support 3 currencies


Technology

JavaScript DOM Manipulations