How to get Elements by javascript

When you add some JavaScript code in your web page to make any control of any Object or to get its value you need to find and capture the target object then you can complete your functions, you have several options to get your objects by using its ID, Name, TagName or ClassName.

Syntax:
1
2
3
4

var Object_a = document.getElementById(x); 
var Object_b = document.getElementsByName(x);
var Object_c = document.getElementsByTagName(x); 
var Object_d = document.getElementsByClassName(x);



getElementById:

Search for element by a given ID and return a reference to that element or return a null value if not found,in case there are more one object having the same id then getElementById only return the first one.

Syntax:
1

var Object = document.getElementById(x);

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
 function GetMname(){
  var Obj = document.getElementById("Mname"); //will get the second text filed
  alert(Obj.value); // that will alert "bbbbbbb"
 }
</script>
 
<form name="main_form">
 <input type="text" id="Fname" size="20" value = "aaaaaaa">
 <input type="text" id="Mname" size="20" value = "bbbbbbb">
 <input type="text" id="Lname" size="20" value = "ccccccc">
</form>
<input type="button" value="Get Mid name" name="B1" onclick="javascript:GetMname();">




getElementsByName:

Search and get reference to all elements that match the name you looking for or return a null value if there is no match.

Syntax:
1

var Object = document.getElementsByName(x);

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script>
 function GetData(){
  var Obj = document.getElementsByName("info"); //will get the second text filed
  alert(Obj[0].value); // that will alert the first object value "aaaaaaa"
  alert(Obj.length); // that will alert 3 for matching elements.
  for (i=0; i<Obj.length; i++)
          alert(Obj[i].value);
 }
</script>
 
<form name="main_form">
 <input type="text" name="info" size="20" value = "aaaaaaa">
 <input type="text" name="info" size="20" value = "bbbbbbb">
 <input type="text" name="info" size="20" value = "ccccccc">
</form>
<input type="button" value="Get Data" name="B1" onclick="javascript:GetData();">




getElementsByTagName:

Search and get reference to all elements that belong to the given Tag or return a null value if there is no match.

Syntax:
1

var Object = document.getElementsByTagName(x);

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
 function GetData(){
  var Obj = document.getElementsByTagName("input"); //will get the second text filed
  alert(Obj[0].value); // that will alert the first object value "aaaaaaa"
  alert(Obj.length);
  // that will alert 4 for matching elements including the button Item.
  for (i=0; i<Obj.length; i++)
          alert(Obj[i].value);
 }
</script>
 
<form name="main_form">
 <input type="text" name="A" size="20" value = "aaaaaaa">
 <input type="text" name="B" size="20" value = "bbbbbbb">
 <input type="text" name="C" size="20" value = "ccccccc">
</form>
<input type="button" value="Get Data" name="B1" onclick="javascript:GetData();">




getElementsByClassName:

Using classes is great method to apply a lot of properties for many different objects, when we want to deal with all of these objects by javascript using the same way by class name is the best method, getElementsByClassName will return a referance for all objects that applaying that class we looking for, or return a null value if no object class match it.

Syntax:
1

var Object = document.getElementsByClassName(x);

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<style>
.c1 {
background-color:#CCFF99;
}
</style>
 
<script>
 function GetData(){
  var Obj = document.getElementsByClassName("c1"); //will get the second text filed
  alert(Obj[0].value); // that will alert the first object value "aaaaaaa"
  alert(Obj.length);
  // that will alert 4 for matching elements including the button Item.
  for (i=0; i<Obj.length; i++)
          alert(Obj[i].value);
 }
</script>
 
<form name="main_form">
 <input type="text" name="A" size="20" value = "aaaaaaa" class="c1">
 <input type="text" name="B" size="20" value = "bbbbbbb">
 <input type="text" name="C" size="20" value = "ccccccc" class="c1">
</form>
<input type="button" value="Get Data" name="B1" onclick="javascript:GetData();">




If this post was good and helpful for you, Please give it Like.
.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )