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.

Slides:



Advertisements
Similar presentations
HTML DOM Part-II. Create Node We can create a node in JavaScript dynamically. There are 3 types of Node –Comment –Element –Text Node We can also create.
Advertisements

Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
Document Object Model (DOM) JavaScript manipulation of the DOM.
COMPSCI 345 / SOFTENG 350 TUTORIAL WEEK 8 | SAM KAVANAGH.
Tutorial 16 Working with Dynamic Content and Styles.
Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.
 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Chapter 12 Creating and Using XML Documents HTML5 AND CSS Seventh Edition.
JQuery CS 268. What is jQuery? From their web site:
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.
HTML DOM.  The HTML DOM defines a standard way for accessing and manipulating HTML documents.  The DOM presents an HTML document as a tree- structure.
JS: Document Object Model (DOM)
 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
DOM and JavaScript Aryo Pinandito.
Lecture 11 – DOM Scripting SFDV3011 – Advanced Web Development Reference: 1.
D2L Notes Be sure to submit your link in the dropbox provided on D2L You can just upload an empty text file if a file upload is required Do not use D2L.
Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014.
Working with Objects Creating a Dynamic Web Page.
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.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
5.2 DOM (Document Object Model). 2 Motto: To write it, it took three months; to conceive it three minutes; to collect the data in it — all my life. —F.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
Javascript II DOM & JSON. In an effort to create increasingly interactive experiences on the web, programmers wanted access to the functionality of browsers.
USING XML AS A DATA SOURCE. Data binding is a process by which information in a data source is stored as an object in computer memory. In this presentation,
XP Tutorial 16 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Dynamic Content and Styles Creating a Dynamic Table of Contents.
Unleash the Power of jQuery Doncho Minkov Telerik Software Academy academy.telerik.com Senior Technical Trainer
Button and Textbox. Input  Input objects are used to obtain input from the user viewing the webpage. They allow the user to interact with the Web. 
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 10.
Internet & World Wide Web How to Program, 5/e. © by Pearson Education, Inc. All Rights Reserved.2 Revised by Dr. T. Tran for CSI3140.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website.
Unleash the Power of jQuery Learning & Development Team Telerik Software Academy.
1 Javascript DOM Peter Atkinson. 2 Objectives Understand the nature and structure of the DOM Add and remove content from the page Access and change element.
 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling – Inline – Scripting –
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
Lesson 16. Practical Application 1 We can take advantage of JavaScript and the DOM, to set up a form so that the first text box of a form automatically.
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.
Javascript Overview. What is Javascript? May be one of the most popular programming languages ever Runs in the browser, not on the server All modern browsers.
JS: Document Object Model (DOM) DOM stands for Document Object Model, and allows programmers generic access to: DOM stands for Document Object Model, and.
Introduction to JQuery COGS 187A – Fall JQuery jQuery is a JavaScript library, and allows us to manipulate HTML and CSS after the page has been.
Chapter 6 Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc.Slide 1.
Introduction to JavaScript LIS390W1A Web Technologies and Techniques 24 Oct M. Cameron Jones.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
SE-2840 Dr. Mark L. Hornick 1 Dynamic HTML Making web pages interactive with JavaScript.
IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.
XML DOM Week 11 Web site:
Introduction to JavaScript DOM Instructor: Sergey Goldman.
XP Tutorial 10 New Perspectives on JavaScript, Comprehensive 1 Working with Dynamic Content and Styles Creating a Dynamic Table of Contents.
THE DOM.
Programming Web Pages with JavaScript
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
CGS 3066: Web Programming and Design Spring 2017
© 2015, Mike Murach & Associates, Inc.
LINKS.
Document Object Model (DOM): Objects and Collections
DHTML Javascript Internet Technology.
Basic HTML and Embed Codes
DHTML Javascript Internet Technology.
© 2015, Mike Murach & Associates, Inc.
JavaScript and the DOM MIS 2402 Jeremy Shafer Department of MIS
Javascript and JQuery SRM DSC.
Web Programming and Design
Web Programming and Design
Web Programming and Design
Presentation transcript:

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 DOMinating JavaScript DOMinating JavaScript If you need some help, you might like to read articles from Dan Webb, PPK and Jeremy Keith.

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 node and 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 variable 2.Place the element on the page 8

Create an Element Elements are things like,,, 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… Snapshots The gallery is a ul element in this example and the DOM/JavaScript code inserts the element someimage before the list 14

Exercise 4.2 Create a small HTML file with a 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 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