1 / 30

Manipulating the DOM

Manipulating the DOM. CST 200 – JavaScript 3 – 4 - 13. Objectives. Learn how to work with the Document Object Model (DOM) Learn about the various arrays stored within the Document object Work with the document.images[] Array Use the document.getElementById() function

denali
Download Presentation

Manipulating the 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. Manipulating the DOM CST 200 – JavaScript 3 – 4 - 13

  2. Objectives • Learn how to work with the Document Object Model (DOM) • Learn about the various arrays stored within the Document object • Work with the document.images[] Array • Use the document.getElementById() function • Work with the innerHTML property

  3. Document Object Model • The Document Object Model (DOM) is a hierarchy of objects that represent the web browser, the web page document and web page elements • The DOM provides programmatic access to different aspects of the Web browser window and Web page

  4. Document Object Model

  5. Document Object Model (cont) • Objects in the Document Object Model (DOM) are created automatically by the web browser when the web browser opens a page • The top-level object is the Window object, which represents the browser window

  6. Window Object • TheWindowobject represents a Web browser window • The Window object is called the global object because all other DOM objects are contained inside of it • We've used the Window object to display pop-up boxes to the user window.alert(msg);

  7. The Document Object • The Document object represents the Web page displayed in a browser • The Document objects contains all the Web page elements • Each web page element is further represented as its own object • We've used the Document object to write information to the web page document.write(msg);

  8. Document Object Arrays • The Document object contains arrays to store and organize specific html elements • Each array stores a specific category of html elements • These arrays include: • anchors[ ] • applets[ ] • forms[ ] • elements[ ] • images[ ] • links[ ] the images[ ] array stores Image objects corresponding to each <img> element

  9. Accessing DOM Objects Consider the page below, containing one <h2> element and three <img> elements: <body> <h2>Letters</h2> <img src="A.jpg" alt="A" /> <img src="B.jpg" alt="B" /> <img src="C.jpg" alt="C" /> </body>

  10. Accessing DOM Objects (cont) • When the web browser loads the page, each a new Image object will be created to represent each <img> element • The document.images[] array will store all of the Image objects document.images[0] document.images[1] document.images[2]

  11. Accessing DOM Objects (cont) • The first element of the document.images[] array is an Image object document.images[0] • This Image object has properties and methods that can be accessed

  12. Accessing Object Properties • Once identifying a specific object, we can then access specific properties • document.images[0]is the first Image object • We can access properties of theimage, such as document.images[0].src document.images[0].width document.images[0].height src = "A.jpg" height = 240 width = 240

  13. Web Console Exercise #1 • Open the following page in Firefox:http://www.capitalcc.edu/faculty/sfreeman/cst200/dom/letters.html • Enter the following expressions into Web Console. What does each statement return? document.images[0] document.images[0].src document.images[0].width document.images[0].border document.images[1] document.images[1].height

  14. Accessing DOM Objects (cont) • Another way of accessing DOM objects is by assigning the name attribute to html elements • Below we set the name attribute to the images: <imgsrc="A.jpg" name="imgA" alt="A"/> <imgsrc="B.jpg" name="imgB" alt="B"/> <imgsrc="C.jpg" name="imgC" alt="C"/>

  15. Accessing DOM Objects (cont) Elements can then be referenced by adding the name following a period(.), following the document object document.imgA document.imgB document.imgC

  16. Accessing DOM Objects (cont) Using the DOM, we can access the same Image object, in two different ways: Through the element's name: document.imgA or through the images[ ] array document.images[0]

  17. Modifying Object Properties • We can also modify the object properties by assigning a new value to a property // set a new file as the image src document.images[0].src= "newA.jpg"; // set a new image width document.images[0].width = 500; // set a new border width document.imgA.border = 5; // hide image by changing the css display // property document.imgA.style.display="none"

  18. Web Console Exercise #2 • Return to the letters.html web page in Web Console • Enter the following statements into Web Console. What does each statement do? document.imgA.src = "B.jpg" document.imgA.width = 50 document.imgA.width = 350 document.imgA.border = 15 document.imgA.src = "A.jpg" document.imgB.style.display = "none"

  19. Accessing DOM Object - Exercise • Assume the following page: <html> <body> <h2>Welcome Guests</h2> <imgsrc="porch.jpg" name="homePorch"/> <p>Guests can check in anytime after 8pm</p> <imgsrc="creek.jpg" name="creek"/> </body> </html> • Write down how to access the creek Image object through the images[ ] array and through the element name.

  20. Accessing JavaScript Objects (cont) • So far, we have accessed objects through the Document object and images[] array • When referring to the current object, another way of accessing an object is through the this keyword • The this keyword refers to the current object • Example: <img src="creek.jpg" alt="shallow creek" onclick="window.alert('This image is located at the following URL: ' + this.src);" />

  21. Accessing JavaScript Objects (cont) • Using the this keyword, we can easily manipulate the current object <img src="A.jpg" alt="A" onmousedown="this.src='B.jpg'" onmouseup="this.src='A.jpg'" /> <imgsrc="B.jpg" alt="B" onmouseover="this.border=20" onmouseout="this.border=0" />

  22. getElementById() function • We've seen two ways of accessing a DOM object through the document array and with the name attribute value • Another way of accessing a specific DOM object is with the document.getElementById() function JavaScript, Fifth Edition

  23. getElementById() function (cont) • The document.getElementById( ) function returns a DOM object based on the id attribute • In order to use this function, the html element must have been assigned an id attribute JavaScript, Fifth Edition

  24. getElementById() example Example: imagine in our html document we defined the following element: <img src="boy.jpg" name="john" id = "john" /> We can then use the JavaScript expression: document.getElementById("john") to access the DOM object representing the element JavaScript, Fifth Edition

  25. getElementById() example #2 document.getElementById("top") <body> <h1 id="top">Intro</h1> <div id="main" > <p id="welcome" > Welcome to the … </p> </div> <div id="footer"> </div> </body> document.getElementById("welcome") document.getElementById("main") document.getElementById("footer") JavaScript, Fifth Edition

  26. Web Console Exercise #3 • Return to the letters.html web page in Web Console • Enter the following statements into Web Console. What does each statement do? document.getElementById("letters") document.getElementById("summary") document.getElementById("img5") document.getElementById("img5").width

  27. innerHTML property • Each html element has an innerHTML property that can be used to change the content of the html element • Setting the innerHTML property to a value, will update the content of the html element • We will use innerHTML in conjunction with document.getElementById() JavaScript, Fifth Edition

  28. innerHTML property (cont) Example: imagine in our html document we defined the following element: <p id="welcome" >Welcome to Bill’s Auto</p> We can then use the JavaScript expression: document.getElementById("welcome").innerHTML to access the content of the paragraph element JavaScript, Fifth Edition

  29. Web Console Exercise #3 • Return to the letters.html web page in Web Console • Enter the following statements into Web Console. What does each statement do? document.getElementById("summary").innerHTML= “Welcome to Letters Page” document.getElementById("contact").innerHTML= “Contact Us “

  30. Summary • Document object model (DOM) is a hierarchy of objects representing web page elements • Document object represents the web page, and contains all web page elements • Document object contains arrays that can be used to identify Web page elements • JavaScript can reference any Web page element through the DOM JavaScript, Fifth Edition

More Related