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>