1 / 25

Advanced DOM

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 officially part of the standard. The DOM Tree. When Web page is loaded into the browser

eliora
Download Presentation

Advanced DOM

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 officially part of the standard

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

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

  4. 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')

  5. Simplified HTML Code • <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>

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

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

  8. Two Step Process • To get a brand new element on a page… 1. Create the element in a JavaScript variable • Place the element on the page

  9. Create an Element • Elements are things like <p>, <li>, <div>, etc. • To create an element use the DOM method createElement, e.g. varmypara = document.createElement("p"); • This creates a paragraph element • Stores a reference to the element in mypara

  10. 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. varmypara = document.createElement("p"); varmybody = document.getElementById("mybody"); mybody.appendChild(mypara); • We are still not finished…

  11. 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. varmyText = document.createTextNode("Hello World!"); mypara.appendChild(myText);

  12. Exercise 5.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

  13. Questions • Where did the paragraph appear on the page? • What happens if you click the button a few more times?

  14. 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);

  15. Seems a Bit Strange • You have to get the parent of the element you want to insert before then insert before that element.vargallery = document.getElementById('imagegallery '); gallery.parentNode.insertBefore(someimage, gallery); • Here is some of the HTML… <h1>Snapshots</h1> <ul id='imagegallery'> <li><imgsrc="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

  16. Exercise 5.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.

  17. Clone an Element • You can make an exact copy of an element node by using the cloneNode function • Example… var list = document.getElementById("headlines"); varnewlist = list.cloneNode();

  18. Clone an Element and Children • To clone the entire list (with child nodes) like so… var list = document.getElementById("headlines"); varnewlist = list.cloneNode(true);

  19. Exercise 5.3 • Create a small HTML file with a <ul> list and a button in the body. The list items are: John, Paul, George, Ringo. • When the button is clicked, use JavaScript to make a copy of the entire list and insert it below the original list and before the button • NOTE: only put an id value on the <ul> tag, not any of the list items.

  20. Removing Elements • To remove elements use the removeChild method • NOTE: If an Element that you remove has children then all children are removed as well var message = document.getElementById('msg'); var container = message.parentNode; container.removeChild(message);

  21. Exercise 5.4 • Create a small HTML file with a <ul> list and a button in the body. The list items are: John, Paul, George, Ringo. • When the button is clicked, use JavaScript to make a remove Paul from the list • NOTE: Use an id value for "Paul"

  22. Replacing Elements • To replace an element use the replaceChildmethod varmessage = document.getElementById('msg'); var container = message.parentNode; varpara = document.createElement('p'); container.replaceChild(para, message); - this replaces message with para

  23. Exercise 5.5 • Create a small HTML file with a <ul> list and a button in the body. The list items are: John, Paul, George, Pete. • When the button is clicked, use JavaScript to make a replace the listitem for Pete to a listitem for Ringo • NOTE: Use an id value for "Pete"

  24. More Things to Know • hasChildNodes • Boolean value = element.hasChildNodes • If (mylist.hasChildNodes) { … • Useful nodeType values 1: Element2: Attribute3: Text 8: Comment

  25. End • End of Lesson

More Related