JavaScript DOM Manipulations

JavaScriptDOM Manipulations and Events

Slides By: Ynon Perek

Fine me at: http://ynonperek.com

Friday, April 12, 13

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

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

What’s a DOM Tree

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

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

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

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

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 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>

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>

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

• 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>

Change Document

script

1. Browser starts to create DOM tree

2. Finds a script tag. Stops to execute

Change Document

h13. script added <h1>element to documentscript

Change Document

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

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');

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

• 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

JavaScript DOM Manipulations

Technology

JavaScript: DOM and jQuery

JavaScript Objects, Variables, and DOM

Javascript, DOM, browsers and frameworks basics

ODIG - Javascript, DOM Elements e jQuery

Javascript: Ajax & DOM Manipulation v1.2

g22 3033 002 c52.prn - New York University · 2008. 4. 28. · 9 25 DOM Part V XML Data Manipulations Using the DOM API and Java 26 Java-based XML Data Manipulations Using the DOM

Javascript & DOM

Programmation Web : DOM / JavaScript

Javascript et DOM js-dom Javascript et DOM

JavaScript DOM and CSS

€¦ · Using JavaScript DOM BOM jQuery AJAX Knockout Long Polling WebSocket Without JavaScript framework Without a JavaScript frameworkthat handles viewmodel-to-DOM bindings, where

JavaScript DOM & event

JavaScript Ajax & DOM Manipulation

JavaScript – The Theory of the DOM

DOM, Javascript, and jQueryaryo.lecture.ub.ac.id/files/2014/11/DesainWeb-08-DOM-Javascript-and-jQuery.pdf · Java ! Cannot interact with Browser or control content ! JavaScript is

Javascript DOM

Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples

HTML DOM Javascript

JavaScript and the DOM

JavaScript Basics And DOM Manipulation