javascript the dom
Download
Skip this Video
Download Presentation
JavaScript – The DOM

Loading in 2 Seconds...

play fullscreen
1 / 36

JavaScript – The DOM - PowerPoint PPT Presentation


  • 153 Views
  • Uploaded on

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). The DOM. When Web page is loaded into the browser

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' JavaScript – The DOM' - lara


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
javascript the dom
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)
the dom
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
example html code
Example HTML Code
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  • <head>
    • <title>DOMinating JavaScript</title>
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • </head>
  • <body>
    • <h1> DOMinating JavaScript </h1>
    • <p> If you need some help with your JavaScript, you might like to read articles
    • from <a href="http://www.danwebb.net/" rel="external">Dan Webb</a>, <a href="http://www.quirksmode.org/" rel="external">PPK</a>
    • and <a href="http://adactio.com/" rel="external">Jeremy Keith</a>. </p>
  • </body></html>
elements become objects
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
nodes
Nodes

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
The Document Node

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

types of nodes
Types of Nodes

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

Each text node has its own value

and is attached to an element node

whitespace and text nodes
Whitespace and Text Nodes
  • Whitespace may produce text nodes
  • Different browsers handle whitespace differently… so be careful
    • Never rely upon the number or order of nodes when accessing the DOM
attribute nodes
Attribute Nodes

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"

accessing nodes
Accessing Nodes
  • Finding an element by a specific ID

<p id="uniqueElement">Hi There</p>

  • Use getElementById() method

var myPara1 = document.getElementById("uniqueElement");

a node s name
A Node\'s Name
  • Once you have reference to an element, you have access to it\'s properties
  • Example: nodeName

var target = document.getElementById("para1");

alert(target.nodeName);

<p id="para1">Hi There</p>

exercise 3 1
Exercise 3.1
  • Create a small HTML file with a paragraph in the body
  • Get a reference to the paragraph object
    • Use an alert() to display its nodeName
    • Use an alert() to display the object by itself
check for unknown objects
Check for Unknown Objects
  • If your JavaScript tries to perform an operation or refer to a property of an object that does not exist, your program will stop running
  • Check for null first

var target = document.getElementById("notthere");if (target != null){ alert(target.nodeName);}

exercise 3 2
Exercise 3.2
  • Add the check for null to your last program from Exercise 3.1
finding elements by tag name
Finding Elements by Tag Name
  • You can retrieve a list of elements
  • Use getElementsByTagName()

var myParaList = document.getElementsByTagName("p");alert(myParaList.length);<p>Hi There</p><p>How are you?</p>

  • myParaList is a node list
node list
Node List
  • A node list can be treated much like an Array
  • Use a for-loop to process each item in list

var myParaList = document.getElementsByTagName("p");

for (var i=0; i<myParaList.length; i++)

{alert(myParaList[i].nodeName);

}

finding elements in other elements
Finding Elementsin Other Elements
  • You don\'t have to use "document"

var myListitems = document.getElementsByTagName("li");

var my2ndListItems =

myListitems.getElementsByTagName("li");

exercise 3 3
Exercise 3.3
  • 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>

navigating the dom tree
Navigating the DOM Tree
  • Finding a Parent
  • Finding Children
  • Finding Siblings
  • Getting Attributes
  • Setting Attributes
finding a parent
Finding a Parent
  • Finding a parent node

<p><a id="oliver" href="someURL">Oliver Twist</a>

</p>

varmyOliver = document.getElementById("oliver");

varmyPara = myOliver.parentNode;

finding children and siblings
Finding Children and Siblings
  • Finding children nodes

<ul id="baldwins"> <li>Alec</li>

<li>Daniel</li>

<li>William</li>

<li>Stephen</li>

</ul>

varbaldwins = document.getElementById("baldwins");

varalec = baldwins.firstChild;

varstephen = baldwins.lastChild;

varwilliam = baldwins.childNodes[2];

varstephen = william.nextSibling;

vardaniel = william.previousSibling;

interacting with attributes
Interacting with Attributes
  • Attributes are always associated with a particular Element tag
  • There are no DOM functions that a particular attribute node (apart from it\'s Element) or look across the page for similar attribute values.
getting an attribute
Getting an Attribute
  • Use the getAttribute() function
  • Example….

<a id="koko" href="http://koko.org">Koko</a>

var koko = document.getElementById("koko");

var kokoHref = koko.getAttribute("href");

The variable kokoHref will now be "http://koko.org"

browser differences
Browser Differences
  • Firefox returns Null for unset attributes
  • IE returns and empty String for unset attributes, but a Null for non-string attributes like onclick
  • IE may alter href values to absolute URLs :-P
old ways may be best
"Old" Ways May be Best
  • In most cases you can just append the attribute name with the dot operator…

<a id="koko" href="http://koko.org">Koko</a>

var koko = document.getElementById("koko");

var kokoHref = koko.href;

setting an attribute s value
Setting an Attribute\'s Value
  • All HTML attributes are writable as well as readable
  • You can make dynamic changes happen to your Web page
  • Use the setAttribute() function
    • Pass the attribute name and its value
setattribute example
setAttribute Example

<a id="koko" href="http://koko.org">Koko</a>

var koko = document.getElementById("koko");

koko.setAttribute("title", "Web site for Koko!");

Now the HTML is …

<a id="koko" title="Web site for Koko!" href="http://koko.org">Koko</a>

styles
Styles
  • Styles are the standard way to change to look of an HTML page.
  • Using <style> section in the head area example … makes the text in all paragraphs be blue

<style>

p {color: blue;}

</style>

  • Inline style example making text blue on this line only

<span style="color: blue;">Hi there</span>

changing styles with javascript
Changing Styles with JavaScript
  • You can change the style property of any tag using dot notation
  • Examples

varmyPara = document.getElementById("para");

myPara.style.color = "blue";

varmyDiv = document.getElementById("div1");

myDiv.style.backgroundColor= "#000066";

rules for converting styles
Rules for Converting Styles
  • There are many, many style properties
  • Here are a few rules for converting style code to JavaScript code that changes styles
    • Most CSS properties are just appended to the style for the element (e.g. myPara.style.color)
    • Any style that has a hyphen in it convert like so…
      • text-indent becomes textIndent
      • E.g. myPara.style.textIndent = "10px";
style changes happen immediately
Style Changes Happen Immediately!!

Becomes

Using the following code…

var body = document.getElementsByTagName("body")[0];

body.style.backgroundColor = "#000000";

body.style.color = "#FFFFFF";

exercise 3 4
Exercise 3.4
  • Using the following HTML, change the background color of the 1st Div to Yellow and the text color of the 2nd Div to be blue. 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>

slide36
End
  • End of Lesson
ad