JavaScript
The Game
le vel
2
JavaScript DOM
Fact #2
“
Firstly you will hate me. Then you will depend on me. Finally You will
really love me.
-- JavaScript ”
Overview
Browser Browser GUI
<html> Rendering Engine Hello
<p>Hello</p>
Document Object
</html>
{
html:{
p:{
text:
DOM “Hello”
style:{
color: ”red”
}
}
}
}
document.p.style.color = “red” JS Engine
DOM
HTML DOM
The HTML DOM is a standard object model and programming interface for HTML.
It defines:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
In other words:
The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.
DOM
DOM Tree
html
head body
myForm
a div form
meta title
class1 p img input
firstname
Element Node ‘any text’
Text Node
Attribute Node
DOM
Document Object
document. documentElement
html
head body
a div form
meta title
p img input
DOM
Document Object
document. body
html
head body
a div form
a div form
meta title
a img input
a img input
DOM
Document Object
document.forms
html
head body
a div form
meta title
a img input
DOM
Document Object
document. links
html
head body
a div form
meta title
a img input
DOM
Document Object
document. images
html
head body
a div form
meta title
a img input
DOM
DOM Navigation
document.body. parentElement
html
head body
a div form
meta title
a img input
DOM
DOM Navigation
document.body. previousElementSibling
html
head body
a div form
meta title
a img input
DOM
DOM Navigation
document.body. firstElementChild
html
head body
a div form
meta title
a img input
DOM
DOM Navigation
document.body.lastElementChild
html
head body
a div form
meta title
a img input
DOM
DOM Navigation
document.body. children
html
head body
a div form
meta title
a img input
DOM
DOM Navigation
document.body.children[1]
html
head body
a div form
meta title
a img input
DOM
Finding Elements
document. getElementsByTagName(‘a’);
html
head body
myForm
a class1 div form
meta title
class1 img a input
firstname
DOM
Finding Elements
document. getElementById(‘myForm’);
html
head body
myForm
a class1 div form
meta title
class1 img a input
firstname
DOM
Finding Elements
document. getElementsByName(‘firstname’);
html
head body
myForm
a class1 div form
meta title
class1 img a input
firstname
DOM
Finding Elements
document. getElementsByClassName(‘class1’);
html
head body
myForm
a class1 div form
meta title
class1 img a input
firstname
DOM
DOM Manipulation
Appending Child Element
1 Creating The Element(get The Element):
var paragraph = document.createElement("p")
p
myDiv
div
DOM Manipulation
Appending Child Element
1 Creating The Element(get The Element):
var paragraph = document.createElement("p")
myDiv
2 Adding this Element:
var myDiv = document.getElementById(‘myDiv’) div
myDiv.appendChild(paragraph)
DOM Manipulation
Inserting Element
var paragraph = document.createElement("p")
p
var parent = document.getElementById(‘myDiv’)
var child = document.getElementById(‘myImg’)
body
a myForm div form
img a input
myImg
DOM Manipulation
Inserting Element
var paragraph = document.createElement("p")
var parent = document.getElementById(‘myDiv’)
var child = document.getElementById(‘myImg’)
parent.insertBefore(paragraph, child)
body
a myForm div form
p img a input
myImg
DOM Manipulation
Removing Elements
var parent = document.getElementById(‘myDiv’)
var child = document.getElementById(‘myImg’)
body
a myDiv div form
img a input
myImg
DOM Manipulation
Removing Elements
var parent = document.getElementById(‘myDiv’)
var child = document.getElementById(‘myImg’)
parent.removeChild(child)
body
a myDiv div form
a input
DOM Manipulation
Replacing Elements
var paragraph = document.createElement("p")
p
var parent = document.getElementById(‘myDiv’)
var child = document.getElementById(‘myImg’)
body
a myForm div form
img a input
myImg
DOM Manipulation
Replacing Elements
var paragraph = document.createElement("p")
var parent = document.getElementById(‘myDiv’)
var child = document.getElementById(‘myImg’)
parent.replaceChild(paragraph, child)
body
a myForm div form
p a input
DOM Manipulation
Changing HTML Content
innerHTML
Getting the HTML inside an Element
var html = document.getElementById(‘myDiv’).innerHTML
Setting the HTML inside an Element
document.getElementById(‘myDiv’).innerHTML =‘<new HTML Content/>’
DOM Manipulation
Changing Text Content
textContent
Getting the HTML inside an Element
var text = document.getElementById(‘myDiv’).textContent
Setting the HTML inside an Element
document.getElementById(‘myDiv’).textContent =‘hi there’;
DOM Manipulation
Changing CSS Styling
This is Div Hello World
var div = document.getElementById(‘myDiv’)
div.style.backgroundColor = ‘green’
div.style.borderColor = ‘red’
div.style.color = ‘orange’
DOM Manipulation
Treating with attributes
Getting an attribute value of an Element
var imgSource = document.getElementById(‘myImg’).src
Setting an attribute value of an Element
document.getElementById(‘myImg’).src =‘orange-juice.png’
DOM Manipulation
Treating with Attributes
Getting an attribute value of an Element
var img = document.getElementById(‘myImg’)
var imgSource = img.getAttribute(‘src’)
Setting an attribute value of an Element
img.setAttribute(‘src’,‘orange-juice.png’)
DOM Manipulation
Getting Class names
My Div <div id=“my-div” class=“blue square”> My Div</div>
Getting class list of an Element
var div = document.getElementById(‘my-div’)
var classes = div.classList
console.log(classes) //[blue, square]
DOM Manipulation
Treating with Classes
My Div
<div id=“my-div” class=“square”> My Div</div>
Setting class list of an Element
var div = document.getElementById(‘my-div’)
div.classList.add(‘blue’)
div.classList.remove(‘blue’)
div.classList.toggle(‘red’)
div.classList.toggle(‘red’)
DOM Manipulation
Creating & Forming HTML Elements
var article = document.createElement(‘p’)
var content = document.createTextNode(“I’m an article”)
article.appendChild(content)
var myAttr = document.createAttribute(‘class’)
myAttr.value = ‘make-me-bold’
article.setAttributeNode(myAttr)
<p >
class=‘make-me-bold’>
I’m an article
</p>
DOM Manipulation
BOM
Intro
The Browser Object Model (BOM) allows JavaScript to talk to the browser.
BOM
Window Object
The window object represents the browser's window
-All global JavaScript objects, functions, and variables automatically become members of the
window object.
alert( “Hello”) === window.alert(“hello”)
document === window.document
- Global variables are properties of the window object.
- Global functions are methods of the window object.
BOM
Window Object Properties
MISSION #2
Try
exploring window object properties
BOM
Tips and Tricks
DOM Element Cloning
Node.cloneNode([deep])
var element = document.getElementByTagName(‘a’)[0]
var elementCopy = element.cloneNode(true)
Tips and Tricks
Access DOM carefully
Dom Access is costly , So try to reduce using it as much as possible
// Bad
for (var i = 0; i < 100; i += 1) {
document.getElementById("result").innerHTML += i + ", ";
}
// Good
var i, content = "";
for (i = 0; i < 100; i += 1) {
content += i + ",";
}
document.getElementById("result").innerHTML += content;
--- ‘JavaScript Patterns’ Book
Tips and Tricks
Challenges
Rules
1 If you have Syntax Error, Solve it yourself. You are able to do that.
2 Mentors exist to guide you to the best way to solve the problem and why errors raised
not to solve the problem or trace your code to solve syntax errors.
3 Steps of Solving the problem:
-Think.
-Think again.
-Use Pen and Papers to convert your thoughts into Procedures.
-Convert your previous pseudo code into JavaScript Code using
its syntax rules.
-Don’t be afraid of syntax errors. It is easy to solve. Read it clearly
and you will solve it.
- Check the output of every step you do and then check them all.
4 The most important rule is to enjoy challenging yourself and don’t stress your mind by the
headache of assignments delivery’s deadlines.
Lab 1
Beginner
Ready Go Game
Write a function that follow the below rule. Take the given number and light the corresponding
circle.
Number
Input 2
Output
steady
Rule :
Notes 1=“Ready”, 2 =“Steady”, 3= “Go”
Challenges
Intermediate
Make Me Stylish Game
Write a function that take a tag name and style object and apply this style to the DOM element which
match the tag name.
Tag Name Object
Input
“div” {color: “red”, background: “blue”}
Output hello
Challenges
Advanced
Count Me Game
Write a function that take a tag name and some attributes values and return an Object that contains the
number of elements that match each criteria as shown below.
Tag Name Object
Input
“div” {Class: ‘my-class’, Id: ‘my-id’, Name: ‘my-name’}
Object
Output {all: 7, Class: 3, Id: true, Name: 2}
Challenges
Bonus
Make Me Live Game
Write a function that convert all the paragraphs in the Html page into anchors with href =
‘http://www.{Paragraph Text Content}.com’
Input No Input
google
Output
facebook
twitter
Challenges
