Knowing about DOM

In this post,I will tell about DOM,or the full name is Document Object Model.The definition of DOM,maybe you can read it in w3schools.com.

“The HTML DOM defines a standard way for accessing and manipulating HTML documents.”

-w3schools

Or,DOM is the way to manipulate and change a basic HTML to be a dinamic HTML.

~~~

DOM always need javascript in the metode,the syntax like this :

document.getElementById(".........")

We can make the unique project in DOM.Example,in this projects,let’s look it.🙂

1.Change the text,to be a password

Let’s try this project,save the file with dom.php

<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("input1").type="password";
}
</script>
</head>
<body>
<input type="text" id="input1" value="Testing" />
<input type="button" value="change" onClick="change()" />
</body>
</html>

If you’ve maked it,so open the file,and click ‘change’ button,like in these pictures..

2.Make the text form,be capital

Let’s try this project,save the file with dom2.php

<html>
<head>
<script type="text/javascript">
function coba(id)
{
var val=document.getElementById(id).value;
document.getElementById(id).value=val.toUpperCase();
}
</script>
<body>
<input type="text" id="input1" OnKeyUp="coba(this.id)" />
</body>
</html>

Open the file,and fill the text form.Altough you turn off the Caps Lock,the text always be Capital.

Let’s try it,good luck !😀

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s