1. Page Elements © Copyright 2014, Fred McClurg All Rights Reserved

2. Getting a Handle on Elements Discussion: It is possible to reference and manipulate HTML elements from within JavaScript. In order to do so, you must retrieve a handle to the element. From this handle you can get information regarding the current attributes (color, size, etc.) of the element. You can also use this handle modify the element. 2

3. Getting Elements by ID Discussion: HTML elements that have an “id” attribute, can be retrieved via the document method “getElementById()”. The property “innerHTML” contains the content. Example: "Integrity is the main issue that makes the difference between a good leader and a bad one." -- John MacArthur var txt = document.getElementById( "quote" ); alert( txt.innerHTML ); // get content of 3 getElementById.html

4. Text clock via setInterval() Discussion: The function “setInterval()” executes a function repeatedly every specified time interval. Example: var textClock = document.getElementById( "clock" ); setInterval( function() { var now = new Date(); // current time var textStr = now.toLocaleTimeString(); textClock.value = textStr; // set text value }, 1000 ); // update every one second 4 setIntervalClock.html

5. Slideshow via setInterval() <img src="images/000.jpg" id="slideShow" style="float: left; margin: 0 7px 7px 0;" /> var theImage = document.getElementById( "slideShow" ); var imageList = [ "000.jpg", "001.jpg", "002.jpg", "003.jpg", "004.jpg", "005.jpg", "006.jpg", "007.jpg", "008.jpg", "009.jpg" ]; var imageIndex = 1; // global index function rotateImage() { theImage.setAttribute( "src", "images/" + imageList[imageIndex] ); imageIndex++; if ( imageIndex >= imageList.length ) { imageIndex = 0; // start over with first } var intervalHandle = setInterval( rotateImage, 3000 ); // start timer theImage.onclick = function() { // add click event to image clearInterval( intervalHandle ); // remove timer on click }; 5 setIntervalSlideShow.html

6. Getting Elements by Tag Name Discussion: Multiple HTML elements with the same Tag Name can be retrieved via the document method “getElementsByTagName()”. Example: George Washington Carver Sir Isaac Newton Blaise Pascal var links = document.getElementsByTagName( "h2" ); for ( var i = 0; i < links.length; i++ ) { console.log( links[i].innerHTML ); // content } 6 getElementsByTagName.html

7. Getting Attributes via getAttribute() Discussion: An attribute of a HTML element can be retrieved via the “getAttribute()” method. Example: Centered Sub-Title... var subTitle = document.getElementById( "subHead" ); console.log( subTitle.getAttribute( "align" ) ); 7 getAttribute.html

8. In order to retrieve nested elements, it may require a combination of calls to “getElementById()” and “getElementsByTagName()”: First Item Second Item Third Item var parent = document.getElementById( "ulList" ); console.log( "Parent HTML:" + parent.innerHTML ); var child = parent.getElementsByTagName( "li" ); for ( var i = 0; i < child.length; i++ ) { console.log( "Child HTML:" + child[i].innerHTML ); } Getting Nested Elements 8 getNestedElem.html

9. An HTML Element attribute can be set via the “setAttribute()” method: Sub-Title Left Sub-Title Center Sub-Title Right var tagName = document.getElementsByTagName( "h2" ); tagName[0].setAttribute( "align", "left" ); tagName[1].setAttribute( "align", "center" ); tagName[2].setAttribute( "align", "right" ); var idName = document.getElementById( "leftHead" ); idName.setAttribute( "style", "color: red;" ); Setting Attributes via setAttribute() 9 setAttribute.html

10. The HTML content of an element can be set via the “innerHTML” property: var today = new Date(); var year = today.getFullYear(); var foot = document.getElementById( "footer" ); foot.innerHTML = "© Copyright " + year; Changing Content via innerHTML 10 innerHTML.html