Module 6 JavaScript DOM
Module 6 JavaScript DOM
document.getElementsByName("name")
<script type="text/javascript">
function totalelements()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="totalelements()" value="Total Genders">
</form>
• The document.getElementsByTagName() method returns all
the element of specified tag name.
document.getElementsByTagName("name")
<script type="text/javascript">
function countpara(){
var totalpara=document.getElementsByTagName("p");
alert("total p tags are: "+totalpara.length);
}
</script>
<p>This is a pragraph</p>
<p>Here we are going to count total number of paragraphs by
getElementByTagName() method.</p>
<p>Let's see the simple example</p>
<button onclick="countpara()">count paragraph</button>
• The innerHTML property can be used to write the
dynamic html on the html document.
• It is used mostly in the web pages to generate the
dynamic html such as registration form, comment form,
links etc.
<script type="text/javascript" >
function showcommentform() {
var data="Name:<input type='text' name='name'><br>Comment:
<textarea rows='5' cols='80'></textarea><br>
<input type='submit' value='comment'>";
document.getElementById('mylocation').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
• The innerText property can be used to write the
dynamic text on the html document. Here, text will not
be interpreted as html text but a normal text.
• It is used mostly in the web pages to generate the
dynamic content such as writing the validation
message, password strength etc.
<script type="text/javascript" >
function validate() {
var msg;
if(document.myForm.userPass.value.length>5){ msg="good";
}
else{ msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}
</script>
<form name="myForm">
<input type="password" value="" name="userPass" onkeyup="validate()">
Strength:<span id="mylocation">no strength</span>
</form>
• BhenanaQue = 15 • Buy any of the following
• QuickKwek = 20 with quantity
• Banana Roll = 10 • Show purchased items
• Squid Ring = 17 with total amount
tendered
• Ask for payment
• Display Change
• Apply DOM
• Apply Validations