How JavaScript refers HTML elements in Page?
1. By using DOM hierarchy
- You can refer HTML elements by using their hierarchy in DOM.
- You have to access with reference of index number and
parent and child hierarchy.
Syntax:
[Link][index].src= "path";
[Link][index].elements[index].value=""
Good:
- Accessing with position is easy.
- Accessing in sequential order is easy
- Good for testing.
Bad:
- If you change the position of any element in page, then you have to update
its index in code.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy</title>
<script type="text/javascript">
function bodyload(){
[Link][0].src="../public/images/[Link]";
[Link][0].width = "200";
[Link][0].elements[0].value="Register";
[Link][1].elements[1].value="Login";
}
</script>
</head>
<body > <div>
<img width="100" height="100" border="1">
</div>
<div>
<form>
<h2>Register</h2>
<input type="button">
<input type="email">
</form>
</div>
<div>
<form>
<h2>Login</h2>
<input type="text">
<input type="button">
</form>
</div>
</body>
</html>
2. You can refer by using name
- Every element can have a reference name.
- You can access element by using the reference name.
Good:
- Easy to access
- Faster in access
- Even you change the position it will have the same values.
Bad
- Name can be common for multiple elements.
- If name is common then attributes are not applied.
- You can't refer child element directly.
- If child element is defined in a parent, you have to refer parent and child.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy</title>
<script type="text/javascript">
function bodyload(){
[Link]="../public/images/[Link]";
[Link]="Register";
[Link][1].[Link]="Login";
}
</script>
</head>
<body > <div>
<img width="100" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h2>Register</h2>
<input type="email">
<input type="button" name="btnRegister">
</form>
</div>
<div>
<form>
<h2>Login</h2>
<input type="text">
<input type="button" name="btnLogin">
</form>
</div>
</body>
</html>
3. Refer by using ID
- Every element can be defined with ID.
- ID is unique for JavaScript but not for CSS.
Good:
- You can refer any HTML element directly
[Link]("id")
- No more hierarchy issues
Bad:
- ID can be used by CSS and JavaScript
- CSS Id can be common for multiple elements
Ex:
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy</title>
<script type="text/javascript">
function bodyload(){
[Link]("pic").src="../public/images/[Link]";
[Link]("btnRegister").value = "Register";
[Link]("btnLogin").value = "Login";
}
</script>
</head>
<body > <div>
<img width="100" id="pic" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h2>Register</h2>
<input type="email">
<input type="button" id="btnRegister" name="btnRegister">
</form>
</div>
<div>
<form>
<h2>Login</h2>
<input type="text">
<input type="button" id="btnLogin" name="btnLogin">
</form>
</div>
</body>
</html>
4. Refer by using CSS selectors
- CSS provides selectors like
a) Id
b) Type
c) class
d) pseudo selector
e) decendent
f) attribute selectors etc..
- JavaScript uses
[Link]()
Good:
- Various technique to refer HTML elements
- You can access by name, id, class etc..
- You can also access by using attribute, pseudo classes..
Bad:
- Common name issues
Ex:
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy</title>
<script type="text/javascript">
function bodyload(){
[Link]("img").src="../public/images/[Link]";
[Link]("#btnRegister").value = "Register";
[Link](".btn-login").value = "Login";
}
</script>
</head>
<body > <div>
<img width="100" id="pic" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h2>Register</h2>
<input type="email">
<input type="button" id="btnRegister" name="btnRegister">
</form>
</div>
<div>
<form>
<h2>Login</h2>
<input type="text">
<input type="button" id="btnLogin" class="btn-login"
name="btnLogin">
</form>
</div>
</body>
</html>
5. You can refer multiple elements by using
getElementsByTagName()
getElementsByClassName()
getElementsByName()
Ex: Tag Name
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy</title>
<script type="text/javascript">
function bodyload(){
x = [Link]("form");
alert("Total Number of Forms : " + [Link]);
}
</script>
</head>
<body > <div>
<img width="100" id="pic" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h2>Register</h2>
<input type="email">
<input type="button" id="btnRegister" name="btnRegister">
</form>
</div>
<div>
<form>
<h2>Login</h2>
<input type="text">
<input type="button" id="btnLogin" class="btn-login"
name="btnLogin">
</form>
</div>
</body>
</html>
Ex: Class Name
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/[Link]">
<script type="text/javascript">
function bodyload(){
x = [Link]("btn-primary");
alert("Total Number of elements using btn-primary: " + [Link]);
}
</script>
</head>
<body class="container-fluid" > <div>
<img width="100" id="pic" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h2>Register</h2>
<input type="email">
<input type="button" class="btn btn-primary" id="btnRegister"
name="btnRegister">
</form>
</div>
<div>
<form>
<h2>Login</h2>
<input type="text">
<input type="button" id="btnLogin" class="btn btn-primary"
name="btnLogin">
</form>
</div>
</body>
</html>
Ex: Same Name
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/[Link]">
<script type="text/javascript">
function bodyload(){
x = [Link]("pic");
alert("Total Number of elements using pic name: " + [Link]);
}
</script>
</head>
<body class="container-fluid" > <div>
<img width="100" id="pic" name="pic" height="100" border="1">
</div>
<div>
<form name="frmRegister">
<h2>Register</h2>
<input type="email" name="pic">
<input type="button" class="btn btn-primary" id="btnRegister"
name="btnRegister">
</form>
</div>
<div>
<form>
<h2>Login</h2>
<input type="text">
<input type="button" id="btnLogin" class="btn btn-primary"
name="btnLogin">
</form>
</div>
</body>
</html>
Summary
1. DOM Hierarchy
2. By Name
3. By ID
4. QuerySelector [CSS Selectors]
5. Multiple
- TagName
- ClassName
- Name
Output and Input
