Scribd
Upload
13 views

Module 6 JavaScript DOM

Module 6 covers JavaScript DOM, explaining how it allows access to HTML elements and enables dynamic manipulation of web pages. Key methods such as getElementById, getElementsByTagName, and innerHTML are discussed, along with examples of modifying content, attributes, and styles. The document also emphasizes the importance of the Document Object Model in web development for creating interactive and responsive user interfaces.

Uploaded by

richiee.rey12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Module 6 JavaScript DOM

Module 6 covers JavaScript DOM, explaining how it allows access to HTML elements and enables dynamic manipulation of web pages. Key methods such as getElementById, getElementsByTagName, and innerHTML are discussed, along with examples of modifying content, attributes, and styles. The document also emphasizes the importance of the Document Object Model in web development for creating interactive and responsive user interfaces.

Uploaded by

richiee.rey12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

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

You might also like