Transcript HTML DOM
Slide 1
Document Object Model
HTML DOM
Slide 2
Pendahuluan
HTML DOM mendefinisikan cara untuk memanipulasi dan mengakses
HTML Document.
01/11/2015
By : Suwondo, S.Kom
2
Slide 3
DOM Node
Menurut DOM, segala sesuatu dalam sebuah dokumen HTMLadalah sebuah node.
DOM mengatakan:
o Seluruh dokumen adalah node dokumen
o Setiap elemen HTML adalah node elemen
o Teks dalam elemen HTML adalah node teks
o Setiap atribut HTML adalah atribut node
o Komentar node komentar
DOM Tutorial
Root Node adalah
mempunyai dua anak node yaitu dan
mempunyai node dan mempunyai dapat diakses dengan value atau innerHTML.
<script type="text/javascript">
document.getElementById("p1").innerHTML="New
text!";
01/11/2015
By : Suwondo, S.Kom
6
Slide 7
DOM How To
Menggunakan Object Style
Contoh :
<script type="text/javascript">
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
value="Change background color" />
01/11/2015
By : Suwondo, S.Kom
7
Document Object Model
HTML DOM
Slide 2
Pendahuluan
HTML DOM mendefinisikan cara untuk memanipulasi dan mengakses
HTML Document.
01/11/2015
By : Suwondo, S.Kom
2
Slide 3
DOM Node
Menurut DOM, segala sesuatu dalam sebuah dokumen HTMLadalah sebuah node.
DOM mengatakan:
o Seluruh dokumen adalah node dokumen
o Setiap elemen HTML adalah node elemen
o Teks dalam elemen HTML adalah node teks
o Setiap atribut HTML adalah atribut node
o Komentar node komentar
DOM Lesson one
Hello world!
Root Node adalah
mempunyai dua anak node yaitu dan
mempunyai node
dan
node.
Isi text yang ada pada node
atau
dapat diakses dengan value atau innerHTML.
01/11/2015
By : Suwondo, S.Kom
3
Slide 4
DOM Method
01/11/2015
By : Suwondo, S.Kom
4
Slide 5
DOM How To
Merubah HTML Element
Contoh :
<script type="text/javascript">
document.body.bgColor="lavender";
01/11/2015
By : Suwondo, S.Kom
5
Slide 6
DOM How To
Merubah isi text dalam HTML Element.
Contoh :
Hello World!
<script type="text/javascript">
document.getElementById("p1").innerHTML="New
text!";
01/11/2015
By : Suwondo, S.Kom
6
Slide 7
DOM How To
Menggunakan Object Style
Contoh :
<script type="text/javascript">
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
value="Change background color" />
01/11/2015
By : Suwondo, S.Kom
7