MODULE 6
ADVANCE WEB DESIGN
MODULE 6
JavaScript DOM
• With the HTML DOM, JavaScript can access all the
elements of an HTML document.
• When a web page is loaded, the browser creates a
Document Object Model of the page.
• The HTML DOM model is constructed as a tree of Objects:
• With a programmable object model, JavaScript gets all the
power it needs to create dynamic HTML:
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can react to all the events in the page
• Often, with JavaScript, you want to manipulate HTML
elements.
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• The easiest way to find HTML elements in the DOM, is by using the
element id.
<p id="intro">Hello World!</p>
<p>This example demonstrates the
<b>getElementById</b> method!
</p>
<script>x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " +
x.innerHTML + "</p>");
</script>
• This example finds the element with id="main", and
then finds all <p> elements inside "main":
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b>
method
</p></div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('First paragraph inside "main" is ' + y[0].innerHTML);
</script>
Finding elements by class name does not work in Internet
Explorer 5,6,7, and 8.
• In JavaScript, document.write() can be used to write
directly to the HTML output stream:
<script>
document.write(Date());
< /script>
Note: Never use document.write() after the
document is loaded. It will overwrite the document.
• The easiest way to modify the content of an HTML
element is by using the innerHTML property.
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New
text!";
< /script>
• To modify the attribute of an HTML element, we use:
<img id="image" src="smiley.gif“>
< script>
document.getElementById("image").src="landscape.
jpg";
< /script>
• The HTML DOM allows JavaScript to change the style of
HTML elements:
• <p id="p1">Hello World!</p>
• <p id="p2">Hello World!</p>
• <script>
• document.getElementById("p2").style.color="blue";
• document.getElementById("p2").style.fontFamily="Arial";
• document.getElementById("p2").style.fontSize="larger";</script>
• Introduce DOM
• getElementById() method
• getElementsByName() method
• getElementsByTagName()
• Javascript - innerHTML
• Javascript - innerText
• The document object represents the whole html document.
• When html document is loaded in the browser, it becomes a
document object. It is the root element that represents the html
document.
• According to W3C - "The W3C Document Object Model (DOM)
is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the
content, structure, and style of a document."
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
The document.getElementById() method returns
the element of specified id.
<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number“ name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
• The document.getElementsByName() method returns all the
element of specified name.
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
