ome.com code example

Example: ome tv

<!DOCTYPE html>
<!-- THIS IS A SMAPLE OF USING 'DOM' INSIDE JAVASCRIPT'-->
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>WEB222</title>
   <style> 
      body { margin: 0 18%; }
   </style>
   <script>
		function doit(){
		    var addrParas = document.querySelector("#address").querySelectorAll("p"); 
			//var addrParas = document.getElementById("address").getElementsByTagName("p"); 

			// highlight paragraphs inside of the section with "address" div element: 
			for (var i = 0; i < addrParas.length; i++) {   
					addrParas[i].style.backgroundColor = "yellow"; 
			}
		}
		
		function tryit(){
		    var allParas = document.querySelectorAll("p");

			// highlight all paragraphs in the web page
			for (var i = 0; i < allParas.length; i++) {   
					allParas[i].style.backgroundColor = "lightgreen"; 
			}
		}
	</script>
</head>
<body>
   <h1>WEB222 - Accessing elements within an element (node)</h1>

   <p>Mail to: </p> 
   <div id="address"> 
       <p>70 The Pond Road</p> 
       <p>Toronto, ON</p>
   </div>

   <p>
      Highlight paragraphs inside of the section with "address" div element:<br> 
      <input type="button" onclick="doit()" value="Do it">
   </p>
   <hr>
   
   <p>
	  Highlight all paragraphs in the web page:<br>
      <input type="button" onclick="tryit()" value="Try it">
   </p>
   <hr>


   <!-- for view-source and download -->
   <br><p><a href='' download>Download</a></p>
</body>

</html>

Tags:

Html Example

Recent Posts