Lab Assignment –DOM Manipulation
1- Here is a sample html file with a submit button. Now modify the style of the
paragraph text through javascript code.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS DOM paragraph style</title>
</head>
<body>
<p id ='text'>JavaScript Practice</p>
<div>
<button id="jsstyle"
onclick="js_style()">Style</button>
</div>
</body>
</html>
Clicking on the button the font, font size, and color of the paragraph text
will be changed.
2- Write a JavaScript program to set web page color to light or dark mode.
3- Here is a sample HTML file with a submit button. Write a JavaScript
function to get the value of the href, hreflang, rel, target, and type attributes
of the specified link.
<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
</head>
<body>
<p><a id="comsats" type="text/html" hreflang="en-us" rel="nofollow" target="_self"
href="https://www.mywebpage.com">my web page</a></p>
<button onclick="getAttributes()">Click here to get attributes value</button>
</body></html>
4- Write a JavaScript function to add rows to a table.
<!DOCTYPE html>
<html><head><meta charset=utf-8 />
<title>Insert row in a table </title>
</head><body>
<table id="sampleTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
</table><br>
<input type="button" onclick="insert_Row()" value="Insert row">
</body></html>
5- Write a JavaScript function to create a table, accept row and column
numbers, and input row-column numbers as cell content (e.g. Row-0
Column-0).
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Change the content of a cell</title>
<style type="text/css">
body {margin: 30px;}
</style>
</head><body>
<table id="myTable" border="1">
</table><form>
<input type="button" onclick="createTable()" value="Create the table">
</form></body></html>
6- Write a JavaScript program to count and display dropdown list items in an
alert window.
<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<style type="text/css">
body {margin: 30px;}
</style>
<title>Count and display items of a dropdown list - w3resource</title>
</head><body><form>
Select your favorite Color :
<select id="mySelect">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>White</option>
</select>
<input type="button" onclick="getOptions()" value="Count and Output all items">
</form>
</body>
</html>
7- Create a form as shown in the figure and write a JavaScript program to
calculate sphere volume.