10JSDOM

28/11/2019
Javascript
Document Object
Model
Suprayogi,M.Kom
• Standard W3C (World Wide Web Consortium) utk mengakses

documents. Ketika halam web di load, browser membuat
halaman Document Object Model.
• Dengan object model : Javascript dapat melakukan perubahan
pada elemen,atribut,style CSS,penambahan elemen,dan atribut
HTML,bereaksi thd event HTML,membuat event HTML
• Jenis standarisasi W3C:
• Core DOM - model standard utk semua tipe document
• XML DOM - model standard utk documents XML
• HTML DOM - model standard utk documents HTML.
DOM
1
28/11/2019
Pohon object DOM
• methods DOM adalah aksi-aksi yg dpt dikerjakan (pd

elemen2 HTML).
• misl: getElementById
• properties DOM adalah suatu nilai (pd element2 HTML)
yang dapat diset dan diubah.
• Misl: innerHTML
Method & Properties

DOM
2
28/11/2019
Finding HTML Elements
Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name
Method DOM
<!DOCTYPE html>
<html> <script>
<body> //method:getElementById,property:innerHTML
<h1>penggunaan method getElementsById, document.getElementById("demo1").innerHTML = "Selamat
Belajar!";
getElementsByTagName,getElementsByClass
Name</b></h1> //method:getElementsByTagName
var x = document.getElementsByTagName("p");
<div class='kotak1'> document.getElementById("demo2").innerHTML = 'teks -
<p>Teks paragraf-1 pada kotak-1</p> (index 0) : ' + x[0].innerHTML;
<p>Teks paragraf-2 pada kotak-1</p>
</div> var y=document.getElementById("kotak2");
var z=y.getElementsByTagName("p");
<div id='kotak2'> document.getElementById("demo3").innerHTML="teks -
<p>Teks paragraf-1 pada kotak-2</p> (index 1) pd kotak2 :"+z[1].innerHTML;
<p>Teks paragraf-2 pada kotak-2</p>
</div> //getElementsByClassName
x = document.getElementsByClassName("para");
<p class="para">teks paragraf-3</p> document.getElementById("demo4").innerHTML="teks -
<p id="demo1"></p> (index 0) :"+x[0].innerHTML;
<p id="demo2"></p>
<p id="demo3"></p> </script>
<p id="demo4"></p>
</div> </body>
</html>
Method DOM
3
28/11/2019
Property Description
element.attribute = new value Change the attribute value of an HTML
element
element.style.property = new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, Change the attribute value of an HTML
value) element
Mengubah Elemen HTML
<!DOCTYPE html> <button type="button"

<html> onclick="document.getElementById('cssJ').style.visibility =
<body> 'hidden'">
<h1>merubah content dari element HTML</h1> Hide</button>
<h1 id="id01">Judul Lama </h1> <button type="button"
onclick="document.getElementById('cssJ').style.visibility =
<p>JavaScript merubah "Judul Lama" menjadi "Judul 'visible'">
Baru".</p> Show</button>
<h1>merubah isi suatu atribut element HTML</h1> <script>

<img id="image" src="image/bunga1.jpg" width="160" var element = document.getElementById("id01");
height="120"> element.innerHTML = "Judul Baru";
<p>JavaScript merubah "image/bunga1.jpg" menjadi document.getElementById("image").src = "image/animated.gif";
"image/animated.gif".</p>
document.getElementById("cssJ").style.color = "gold";
<h1 id="cssJ">merubah style/CSS suatu element document.getElementById("cssJ").style.fontFamily = "Arial";
HTML</h1> document.getElementById("cssJ").style.backgroundColor = "blue";
<p>JavaScript merubah "style" pd judul di atas</p> </script>
<button type="button"
onclick="document.getElementById('cssJ').style.backgr </body>
oundColor = 'red'"> </html>
GantiWarna</button>
Mengubah Elemen HTML
4
28/11/2019
<!DOCTYPE html> <script>

<html> document.getElementById("myBtn1").addEventListener("click",
<body> displayDate);
<h2>JavaScript addEventListener()</h2> function displayDate() {

document.getElementById("demo").innerHTML = Date();
<p>menggunakan method addEventListener() }
method utk membuat click event pd suatu
button.</p> document.getElementById("myBtn2").addEventListener("click",
function() {
<button id="myBtn1">ShowDate</button> alert("Hello World!");
<button id="myBtn2">ShowAlert</button> });
<p id="demo"></p>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>
Event Listener

<html> var p1 = 5;
<body> var p2 = 7;
<h2>JavaScript addEventListener()</h2> document.getElementById("bPlus").addEventListener("click",

function() {
<p>melewatkan nilai suatu parameter myFunction(p1, p2);
saat memanggil });
methodaddEventListener() .</p>
function myFunction(a, b) {
<p>Click button utk mneghitung var result = a + b;
penjumlahan.</p> document.getElementById("demo").innerHTML = result;
}
<button id="bPlus">+</button>
</script>
<p id="demo"></p>
</body>
</html>
Event Listener
5
28/11/2019
Hubungan
pada Node DOM
• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling
Navigasi pada Node
6
28/11/2019
<title id="demo">DOM Tutorial</title>
var myTitle = document.getElementById("demo").innerHTML;

var myTitle = document.getElementById("demo").firstChild.nodeValue;
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Mengakses teks pd Title

<html> document.getElementById("id02").innerHTML =
<body> document.getElementById("id01").firstChild.nodeValue;
document.getElementById("id03").innerHTML =
<h1 id="id01">Judul 1</h1> document.getElementById("id01").childNodes[0].nodeValue;
<p id="id02"></p> function getDocBody(){
<p id="id03"></p> alert(document.body.innerHTML);
<button onclick="getDocBody()">Get }
Document Body</button> function getDocFull(){
<button onclick="getDocFull()">Get alert(document.documentElement.innerHTML);
Document Full</button> }
</script>
</body>
</html>
Navigasi Node &

Root Nodes(document.body, document.documentElement)
7
28/11/2019
<!DOCTYPE html>
<html> //var child = document.getElementById("p1");
<body> //parent.removeChild(child);
<div id="div1"> //p1 diganti

<p id="p1">paragraph Pertama</p> var parent = document.getElementById("div1");
<p id="p2">Paragraf Kedua.</p> var child = document.getElementById("p1");
</div> var para = document.createElement("p");
<button var node = document.createTextNode("Ini lagi baru Lagi.");
onclick="setWarna()">setWarna</button> para.appendChild(node);
<button parent.replaceChild(para,child);
onclick="setBG()">setBackGround</button>
function setWarna() {
<script> var myCollection = document.getElementsByTagName("p");
var para = document.createElement("p"); var i;
var node = document.createTextNode("Paragraf for (i = 0; i < myCollection.length; i++) {
Baru."); myCollection[i].style.color = "red";
para.appendChild(node); }
var element = }
document.getElementById("div1"); function setBG() {
element.appendChild(para); var myNodelist = document.querySelectorAll("p");
var i;
para = document.createElement("p"); for (i = 0; i < myNodelist.length; i++) {
node = document.createTextNode("Paragraf myNodelist[i].style.backgroundColor = "yellow";
Baru Lagi."); }
para.appendChild(node); }
element = document.getElementById("div1");
child = document.getElementById("p1"); </script>
element.insertBefore(para,child);
Node
</body>
//var elmnt = document.getElementById("p1"); </html>
//elmnt.remove();
//var parent =
document.getElementById("div1");
<!DOCTYPE html> <button onclick="fShow()">Show</button>

<html>
<body> <p id="demo"></p>
<h2>menggunakan document.forms</h2> <script>

function fShow() {
<form id="frm1" action="/action_page.php"> var x = document.forms["frm1"];
Nama: <input type="text" name="tnama" var text = "";
value="Bejo"><br> var i;
Alamat: <input type="text" name="talamat" for (i = 0; i < x.length ;i++) {
value="Jl. Semarang"><br><br> text += x.elements[i].value + "<br>";
<input type="submit" value="Submit"> }
</form> document.getElementById("demo").innerHTML = text;
}
<p>Click "Show" utk menampilkan isi dari tiap </script>
elemen pd form.</p>
</body>
</html>
mengakses: Elemen form

10JSDOM

Uploaded by

Copyright:

Available Formats

10JSDOM

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

10JSDOM

Uploaded by

Copyright:

Available Formats

28/11/2019

• Standard W3C (World Wide Web Consortium) utk mengakses

Pohon object DOM

• methods DOM adalah aksi-aksi yg dpt dikerjakan (pd

Method & Properties

Finding HTML Elements

document.getElementById(id) Find an element by element id

document.getElementsByTagName(name) Find elements by tag name

document.getElementsByClassName(name) Find elements by class name

element.style.property = new style Change the style of an HTML element

Mengubah Elemen HTML

<!DOCTYPE html> <button type="button"

<h1>merubah isi suatu atribut element HTML</h1> <script>

Mengubah Elemen HTML

<!DOCTYPE html> <script>

<h2>JavaScript addEventListener()</h2> function displayDate() {

<!DOCTYPE html> <script>

<h2>JavaScript addEventListener()</h2> document.getElementById("bPlus").addEventListener("click",

Navigasi pada Node

<title id="demo">DOM Tutorial</title>

var myTitle = document.getElementById("demo").innerHTML;

Mengakses teks pd Title

<!DOCTYPE html> <script>

Navigasi Node &

<div id="div1"> //p1 diganti

<!DOCTYPE html> <button onclick="fShow()">Show</button>

<h2>menggunakan document.forms</h2> <script>

mengakses: Elemen form

You might also like