javascript_DOM_lecture_notes_for_std.pptx

JavaScript – The DOM
• JavaScript is object based
• The browser is object based
• We can access the browser's objects in the same way we
did JavaScript's
• Two Object-Models
• DOM (Document Object Model)
• BOM (Browser Object Model)
2

The DOM
• When Web page is loaded into the browser
• Every element on the page gets a "reference"
• JavaScript code can use these references to change elements on a page
3

Elements Become Objects
• Each Element on Web page becomes an objects
• Has properties
• Has methods
• Property values can often be changed
• Causes Web page to change in-place
4

Example Page Elements- Mapped
5

Nodes
6
Each Object is represented by a
Node
These are Element Objects
Every Element is identified by its tag name (e.g h1, p)
There is a parent-child relationship between the nodes

The Document Node
7
The document node is a special
node that is always at the top of
the tree.

Types of Nodes
8
Element nodes point to the
element itself, not its content!
Two other kinds of nodes for
content
A text node is anything contained between the angle brackets
An attribute node is used to access attributes of a tag (e.g. 'href')

Text Nodes
9
Each text node has its own value
and is attached to an element node

Attribute Nodes
10
Attribute nodes point to the
attributes of the element
Here we see an "Anchor" element node with a text node
and two attribute nodes, "href" and "rel"

example:
Using the following HTML, write JavaScript code to display the number
paragraphs in the 2nd div…
<div>
<p>Hi There</p>
<p>How are you?</p>
</div>
<div>
<p>I'm fine</p>
<p>Thanks for asking</p>
<p>How are you?</p>
</div>

Finding a Parent
• Finding a parent node
<p>
<a id="oliver" href="someURL">Oliver Twist</a>
</p>
var myOliver = document.getElementById("oliver");
var myPara = myOliver.parentNode;
15

Finding Children and Siblings
• Finding children nodes
<ul id="baldwins">
<li>Alec</li>
<li>Daniel</li>
<li>William</li>
<li>Stephen</li>
</ul>
var baldwins = document.getElementById("baldwins");
var alec = baldwins.firstElementChild;
var stephen = baldwins.lastElementChild;
var william = baldwins.children;
var stephen = William[2].nextElementSibling;
var daniel = William[2].previousElementSibling;
16

Exercises:
Using the following HTML, change the background color of the 1st
Div to
Yellow , the text color of the 2nd
Div to be blue and change the text content of
the 1st
p to “welcome There” . Use DOM methods and styles
<div id="intro">
<p>Hi There</p>
<p>How are you?</p>
</div>
<div>
<p>I'm fine</p>
<p>Thanks for asking</p>
<p>How are you?</p>
</div>

The Book List Exercises
Create a webpage with an h1 of "My Book List".
Add a script tag to the bottom of the page, where all your JS will go.
Copy this array of books:
var books = [
{
title: 'The Design of EveryDay Things',
author: 'Don Norman',
alreadyRead: false
}, {
title: 'The Most Human Human',
author: 'Brian Christian',
alreadyRead: true
}
];
1. Iterate through the array of books. For each book,
create a p element with the book title and author and append it to the page.
2. Change the style of the book depending on whether you have read it or not.

Exercises: Animation
The Cat Walk
Start with this webpage, which has a single img tag of an animated GIF of a cat walking.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cat Walk</title>
</head>
<body>
<img style="position:absolute;" src="cat-walk.gif">
</body>
</html>
• Add a script tag at the bottom of the page, where you'll put all your code.
• Create a variable to store a reference to the img.
• Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
• Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style
property.
• Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah!
• When the cat reaches the right-hand of the screen, restart them at the left hand side ("0px"). So they should keep walking
from left to right across the screen, forever and ever.

javascript_DOM_lecture_notes_for_std.pptx

More Related Content

Similar to javascript_DOM_lecture_notes_for_std.pptx

More from mostafaalgendy3

Recently uploaded

javascript_DOM_lecture_notes_for_std.pptx