Embed Size (px)
Citation preview
Advanced DOM
• Builds on last presentation on DOM• Allows you to dynamically create elements
and position them on a page• DOM methods/properties are W3C standard
– innerHTML is not
1
The DOM Tree
• When Web page is loaded into the browser– Every element on the page gets a "reference"– New elements can be created and referenced– JavaScript code can use these references to create
new elements on a page
2
Reminder Graphs
• The next few slides are a repeat of some graphs I used in the last presentation and will used again here– We need to know what's on a page to know where
to place new elements
3
Types of Nodes
4
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')
Simplified HTML Code
5
<html>
<head> <title>DOMinating JavaScript</title> </head>
<body id="mybody"> <h1> DOMinating JavaScript </h1>
<p> If you need some help, you might like to read articles from
<a href="http://www.danwebb.net/ ">Dan Webb</a>, <a href="http://www.quirksmode.org/">PPK</a> and <a href="http://adactio.com/">Jeremy Keith</a>.
</p>
</body></html>
Text Nodes
6
Each text node has its own value and is attached to an element node
Attribute Nodes
7
Attribute nodes point to the attributes of the element
Here we see an "Anchor" element node with a text nodeand two attribute nodes, "href" and "rel"
Two Step Process
• To get a brand new element on a page…1. Create the element in a JavaScript variable2. Place the element on the page
8
Create an Element
• Elements are things like <p>, <li>, <div>, etc.• To create an element use the DOM method
createElement, e.g.
var mypara = document.createElement("p");
– This creates a paragraph element– Stores a reference to the element in mypara
9
Adding a Child Element
• One way to place a dynamically created element on a page is with the appendChild
• First get a reference to a parent node and add another child element to the end e.g.var mypara = document.createElement("p");var mybody = document.getElementById("mybody"); mybody.appendChild(mypara);
• We are still not finished…
10
Adding Text to the Paragraph
• In the last slide, I created an empty paragraph and added to the end of elements in the body.
• To add text to an paragraph you first must use the createTextElement method and then append that to the paragraph element, e.g.
var myText = document.createTextNode("Hello World!");
mypara.appendChild(myText);
11
Exercise 4.1
• Create a small HTML file with a paragraph and a button in the body
• Use JavaScript to add a paragraph to the display that says "I did it!" when the button is clicked
12
Inserting an Element
• If you want to place an element before an existing element, use insertBefore– Syntax:
parentElement.insertBefore(newElement, targetElement)
• Example:var gallery = document.getElementById('imagegallery');gallery.parentNode.insertBefore(placeholder, gallery);
13
Seems a Bit Strange• You have to get the parent of the element you want
to insert before then insert before that element. var gallery = document.getElementById('imagegallery ');gallery.parentNode.insertBefore(someimage, gallery);
• Here is some of the HTML…<h1>Snapshots</h1><ul id='imagegallery'><li><img src="images/fireworks.jpg">
• The gallery is a ul element in this example and the DOM/JavaScript code inserts the element someimage before the <ul> list
14
Exercise 4.2
• Create a small HTML file with a <ul> list and a button in the body. The list items are: John, George, Ringo.
• When the button is clicked, use JavaScript to insert a list item "Paul" before "George" list item
• NOTE: only put an id value on the <ul> tag, not any of the list items.
15
Removing Elements
16
Questions
• Where did the paragraph appear on the page?• What happens if you click the button a few
more times?
17
End
• End of Lesson
18
