Professional Documents
Culture Documents
Mirpur University of Science and Technology: Department Software Engineering
Mirpur University of Science and Technology: Department Software Engineering
Mirpur University of Science and Technology: Department Software Engineering
Web Engineering 3
Element Handling
• To access HTML elements using the DOM, several methods are offered by the object
document
• document.getElementById(“element-id”): accesses an element via its id
• getElementByTagName(“tag-name”): gets all the elements of the given tag as an
array of objects
• getElementsByName(“name”): returns an array of objects containing all the
elements whose attribute name is equal to the given argument
• querySelector(); This function takes as a parameter a string representing a CSS
selector, Returns the first element that corresponds to this selector
• querySelectorAll(); Returns an array of all the elements corresponding to the given
selector
• getAttribute() method is used to retrieve values of attributes
• document.getElementById(“elementid”).getAttribute(“attribute-name”)
• document.getElementById(“pic”).getAttribute(“src”)
• setAttribute() method is used to set values of attributes
• document.getElementById(“element-id”).setAttribute(“attribute-name”, ”Value”)
• document.getElementById(“pic”).setAttribute(“src”, ”abc.jpg”)
4
Web Engineering
Element and Query Selector
var getByid=
<!doctype html> document.getElementById('myMenu');
<html>
<head> var getElementByTagName =
<meta charset="utf-8" /> document.getElementsByTagName("div");
<title> My Test Page </title> var getElementByName =
</head>
<body> document.getElementsByName("myName");
<div id="myMenu"> console.log("Result of getElementById : " +
<div class="item"> getByid.textContent);
<span> Menu 1</span>
<span> Menu 2</span> console.log("Result of getElementByTagName:");
</div> for(var i=0;i<getElementByTagName.length;i++){
<div class="Pub"> console.log(getElementByTagName[i]);
<span> Pub 1</span>
<span> Pub 2</span> }
</div> console.log("Result of getElementByName : ");
</div> for(var i=0;i<getElementByName.length;i++){
<div id="content">
<span> console.log(getElementByName[i]);
Here is my content } var querySel=
</span>
document.querySelector("head title");
</div>
A weird form to test var querySelAll=
getElementsByName() : document.querySelectorAll("#myMenu .item
<form name="myName">
span");
<input type="password"
name= "myName"> console.log("Result of querySelector : " +
<input> querySel.textContent);
<button name="myName"></button>
console.log("Result of querySelectorAll : ");
</form>
<script src="test.js"></script> for(var i=0;i<querySelAll.length;i++){
</body> console.log(querySelAll[i].textContent);
</html>
}
Web Engineering 5
Image Rolling and Slide Show
Web Engineering 7
Event Handling
Web Engineering 10
Task
• Step1: Interface
• Create an interface that looks like the following
• Step 2:
• Add a listener to the button add, that adds the written element to the todolist
• Add a listener for the modify button, that modifies the element which id is
given in the first input with the task in the second
• Add a listener for the delete button, that deletes the task which id is given in
the input
• Add a listener to the toggle completed button, that does that to the task which
id is given in the input
• Add a listener to the ToggleAll button
• Step 3:
• Now, the tasks will be displayed in an unordered list under the form. Every
modification of the list is immediately impacted on the display
Web Engineering 11
History
The history object contains the URLs visited by the user (within a browser window)
The history object is part of the window object and is accessed through the window.history
property
12
Web Engineering
History
• The history object contains the URLs visited by the user (within a browser
window)
• The history object is part of the window object and is accessed through the
window.history property
• Used to move forward and backward through the visitor’s browsing history
• Length: Returns the number of URLs in the history list
• back(): Loads the previous URL in the history list
• forward(): Loads the next URL in the history list
• go(): Loads a specific URL from the history list
Web Engineering 13
Navigator
Web Engineering 14
Form
15
Web Engineering
References
Web Engineering 16
THANKS