1.
JavaScript can refer HTMl elements by using DOM hierarchy
- It is faster in access
- It is the native method to access elements
- Whenever you change the element position in page, it update the position in
logic.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<script>
function bodyload(){
[Link][0].src = "/[Link]";
[Link][0].elements[1].value = "Register";
[Link][1].elements[1].value="Login";
}
</script>
</head>
<body > <div>
<img width="100" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h3>Register</h3>
User Name : <input type="text"> <input name="btnRegister" type="button">
</form>
</div>
<div>
<form name="frmLogin">
<h3>Login</h3>
Email : <input type="email"> <input name="btnLogin" type="button">
</form>
</div>
</body>
</html>
2. You can refer elements by using name.
- Every element can be defined with a "name" attribute.
- You can access by using "name"
- You can't access a child element without referring to its parent.
- "name" can be common for multiple elements, then it can't be applied.
Ex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script>
function bodyload(){
[Link]="/macos-big-sur-apple-layers-fluidic-colorful-wwdc-stock-4096x2304-
[Link]";
[Link] = "Register";
[Link] = "Login";
}
</script>
</head>
<body > <div>
<img width="100" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h3>Register</h3>
User Name : <input type="text"> <input name="btnRegister" type="button">
</form>
</div>
<div>
<form name="frmLogin">
<h3>Login</h3>
Email : <input type="email"> <input name="btnLogin" type="button">
</form>
</div>
</body>
</html>
3. You can refer by using ID
- Every element can have a unique ID.
- You can access any element directly without referring to its parent.
"[Link]()"
- ID is also used as a selector for CSS.
- CSS ID can be common for multiple elements.
Ex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script>
function bodyload(){
[Link]("pic").src = "/[Link]";
[Link]("btnRegister").value = "Register";
[Link]("btnLogin").value = "Login";
}
</script>
</head>
<body > <div>
<img width="100" id="pic" height="100" border="1">
</div>
<div>
<form id="frmRegister">
<h3>Register</h3>
User Name : <input type="text"> <input id="btnRegister" type="button">
</form>
</div>
<div>
<form id="frmLogin">
<h3>Login</h3>
Email : <input type="email"> <input id="btnLogin" type="button">
</form>
</div>
</body>
</html>
4. You can access elements by using CSS selectors
- JavaScript uses the method
"[Link]("cssSelector")"
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script>
function bodyload(){
[Link]("pic").src = "/[Link]";//image using type
[Link]("#btnRegister").value = "Register";//button using id
[Link](".btnLogin").value = "Login";//button using class
}
</script>
</head>
<body > <div>
<img width="100" type="pic" height="100" border="1">
</div>
<div>
<form id="frmRegister">
<h3>Register</h3>
User Name : <input type="text"> <input id="btnRegister" type="button">
</form>
</div>
<div>
<form id="frmLogin">
<h3>Login</h3>
Email : <input type="email"> <input class="btnLogin" type="button">
</form>
</div>
</body>
</html>
5. You can access multiple elements by using collection methods
"[Link]()"
"[Link]()"
"[Link]()"
Ex :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script>
function bodyload(){
alert([Link]("div").length);
alert([Link]("btnLogin").length);
}
</script>
</head>
<body > <div>
<img width="100" type="pic" height="100" border="1">
</div>
<div>
<form id="frmRegister">
<h3>Register</h3>
User Name : <input type="text"> <input id="btnRegister" type="button">
</form>
</div>
<div>
<form id="frmLogin">
<h3>Login</h3>
Email : <input type="email"> <input class="btnLogin" type="button">
</form>
</div>
</body>
</html>
Ex :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script>
function bodyload(){
alert([Link]("div").length);
alert([Link]("pay").length);
}
</script>
</head>
<body > <fieldset>
<legend>
Payment Methods
</legend>
<input type="radio" name="pay"> Credit Card <br>
<input type="radio" name="pay"> Debit Card <br>
<input type="radio" name="pay"> UPI <br>
</fieldset>
</body>
</html>
Summary:
- By DOM Hierarchy
- By Name
- By ID
- By CSS Selector
JavaScript Output Methods
-------------------------
1. alert()
2. confirm()
3. console methods [log(), debug(), error(), warn()..]
4. [Link]()
5. innerHTML
6. outerHTML
7. innerText
1. alert()
- It is a window object.
- It pops up a message box in window to display your message.
- You can't cancel.
- Mandatory confirm [OK]
- Esc is equal to OK
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function DeleteClick(){
alert("Record will be deleted.");
}
</script>
</head>
<body>
<button ></body>
</html>
2. confirm()
- It is same like alert() but have cancel option.
- Cancel cannot work without logic defined.
- Confirm returns
true : on OK
false : on Cancel
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function DeleteClick(){
flag = confirm("Are you sure, Record will be deleted.");
if(flag == true){
alert("Record Deleted..");
}else{
alert("Cancelled..");
}
}
</script>
</head>
<body>
<button ></body>
</html>
3. Console methods
- These are developer methods that display status of various actions in "console"
of debugger.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function DeleteClick(){
[Link]("Delete Button Clicked");
flag = confirm("Are you sure, Record will be deleted.");
if(flag == true){
alert("Record Deleted..");
[Link]("OK Clicked and Deleted..");
}else{
alert("Cancelled..");
[Link]("Cancel Clicked and Cancelled..");
}
}
</script>
</head>
<body>
<button ></body>
</html>
4. [Link]()
- It can display output on a new screen.
- Page will be same but output will be on new screen.
- It allows all markup to present.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function DeleteClick(){
flag = confirm("Are you sure, Record will be deleted.");
if(flag == true){
[Link]("<h2>Record Deleted..</h2><a
href='output_methods.html'>Back</a>");
}else{
[Link]("Cancelled..");
}
}
</script>
</head>
<body>
<button ></body>
</html>
5. innerText
- It can display output in any container.
- It is RC data type.
- No formats are allowed.
- Only plain text.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function DeleteClick(){
flag = confirm("Are you sure, Record will be deleted.");
if(flag == true){
[Link]("h3").innerText="Record Deleted";//in a container
when you want to show anything
}else{
[Link]("Cancelled..");
}
}
</script>
</head>
<body>
<button > <h3 align="center"></h3>
</body>
</html>
6. innerHTML
- It allows formats.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function DeleteClick(){
flag = confirm("Are you sure, Record will be deleted.");
if(flag == true){
[Link]("h3").innerHTML="<font color='red'>Record
Deleted</font>";//in a container when you want to show anything
}else{
[Link]("Cancelled..");
}
}
</script>
</head>
<body>
<button > <h3 align="center"></h3>
</body>
</html>
7. outerHTML
- innerHTML will keep the existing element and add new element into container.
- outerHTML will replace the existing element with new element.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function DeleteClick(){
flag = confirm("Are you sure, Record will be deleted.");
if(flag == true){
[Link]("container").outerHTML = "<h2>Record
Deleted..</h2>"; //using outerHTML paragraph will get changed by heading
[Link](".msg").innerHTML = "OK Button clicked and record
deleted..";
}else{
[Link]("Cancelled..");
}
}
</script>
</head>
<body>
<button > <p id="container"></p>
<div class="msg"></div>
</body>
</html>
