Javascript

The document object represents the web page

Finding HTML Elements

document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)

Changing HTML Elements

element.innerHTML = new html content
element.attribute = new value
element.style.property = new style
element.setAttribute(attribute, value)

Adding and Deleting Elements

document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(new, old)
document.write(text)

Adding Events Handlers

document.getElementById(id).onclick = function(){code}

Finding HTML Objects

document.anchors
document.baseURI
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode
document.documentURI
document.domain
document.embeds
document.forms
document.head
document.images
document.implementation
document.inputEncoding
document.lastModified
document.links
document.readyState
document.referrer
document.scripts
document.strictErrorChecking
document.title
document.URL

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; function init(){  
               imgObj = document.getElementById('myImage');
               imgObj.style.position = 'relative';     
               imgObj.style.left = '0px';   
            }     
            function moveRight(){  
               imgObj.style.left = parseInt(
               imgObj.style.left) + 10 + 'px';  
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 
   
   <body> 
      <form> 
         <img id = "myImage" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Valdosta_State_Blazers_logo.svg/1200px-Valdosta_State_Blazers_logo.svg.png" width = 20% /> 
         <p>Click button below to move the image to right</p> 
         <input type = "button" value = "Click Me" onclick = "moveRight();" /> 
      </form>
   </body>
   
</html>

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; 
            var animate ; 
            function init(){  
               imgObj = document.getElementById('myImage');     
               imgObj.style.position = 'relative';    
               imgObj.style.left = '0px'; 
            }  
            function moveRight(){  
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               position = parseInt(imgObj.style.left);
               if (position > 600)
                  imgObj.style.left = 0+'px';  
               animate = setTimeout(moveRight,20); 
               // call moveRight in 20msec  
            }  
            function stop() {     
               clearTimeout(animate);    
               imgObj.style.left = '0px';   
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 

   <body> 
      <form> 
         <img id = "myImage" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Valdosta_State_Blazers_logo.svg/1200px-Valdosta_State_Blazers_logo.svg.png" width = 20% /> 
         <p>Click the buttons below to handle animation</p> 
         <input type="button" value="Start" onclick = "moveRight();" /> 
         <input type = "button" value="Stop" onclick = "stop();" /> 
      </form>    
   </body> 
</html>