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 <body> mempunyai <h1> dan <p> node.<br />Isi text yang ada pada node <p> atau <h1> dapat diakses dengan value atau innerHTML.<br />01/11/2015<br /><br />By : Suwondo, S.Kom<br /><br />3<br /><br /> <br /><b>Slide 4</b><br /><br />DOM Method<br /><br />01/11/2015<br /><br />By : Suwondo, S.Kom<br /><br />4<br /><br /> <br /><b>Slide 5</b><br /><br />DOM How To<br />Merubah HTML Element<br />Contoh :<br /><html><br /><body><br /><script type="text/javascript"><br />document.body.bgColor="lavender";<br /></script><br /></body><br /></html><br />01/11/2015<br /><br />By : Suwondo, S.Kom<br /><br />5<br /><br /> <br /><b>Slide 6</b><br /><br />DOM How To<br />Merubah isi text dalam HTML Element.<br />Contoh :<br /><html><br /><body><br /><p id="p1">Hello World!</p><br /><script type="text/javascript"><br />document.getElementById("p1").innerHTML="New<br />text!";<br /></script><br /></body><br /></html><br />01/11/2015<br /><br />By : Suwondo, S.Kom<br /><br />6<br /><br /> <br /><b>Slide 7</b><br /><br />DOM How To<br />Menggunakan Object Style<br />Contoh :<br /><html><br /><head><br /><script type="text/javascript"><br />function ChangeBackground()<br />{<br />document.body.style.backgroundColor="lavender";<br />}<br /></script><br /></head><br /><body><br /><input type="button" onclick="ChangeBackground()"<br />value="Change background color" /><br /></body><br /></html><br /><br />01/11/2015<br /><br />By : Suwondo, S.Kom<br /><br />7<br /><br /> <br /></div>
</section>
</div>
</div>
</div>
</main>
<footer>
<div class="container mt-3">
<div class="row justify-content-between">
<div class="col">
<a href="/">
<img src="/theme/studyslide/static/logo-slideum.png" />
</a>
</div>
</div>
<div class="row mt-3">
<ul class="col-sm-6 list-unstyled">
<li>
<h6 class="mb-3">Company</h6>
<li>
<i class="fa fa-location-arrow"></i>
Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040
<li>
<i class="fa fa-phone"></i>
+357 64-733-402
<li>
<i class="fa fa-envelope"></i>
info@slideum.com </ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Links</h6>
<li>
<a href="/about">About</a>
<li>
<a href="/contacts">Contact</a>
<li>
<a href="/faq">Help / FAQ</a>
</ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Legal</h6>
<li>
<a href="/terms">Terms of Service</a>
<li>
<a href="/privacy">Privacy policy</a>
<li>
<a href="/page.html?code=public.usefull.cookie">Cookie policy</a>
<li>
<a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a>
</ul>
</div>
<hr>
<p>slideum.com ©
2025, Inc. All rights reserved.</p>
</div>
</footer>
<div class="modal directory" id="directory-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Directory</h5>
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script>
<script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script>
var __path_directory = [ ]
!function __draw_directory(data, root, uuid)
{
var ul = $('<ul>', uuid &&
{
id: 'category' + uuid,
class: !__path_directory.includes(uuid) ? 'collapse' : null
});
for (var item in data)
{
var li = $('<li>').appendTo(ul);
if (item = data[item], item.children)
{
li.append('<a href=#category' + item.id + ' data-toggle=collapse>')
__draw_directory(item.children, li, item.id);
}
else
{
li.append('<a href=' + item.url + '>');
}
var a = $('> a', li).addClass('item').text(item.name)
.append($('<a class="link fa fa-external-link" href=' + item.url + '>'));
if (item.id === +__path_directory.slice(-1))
{
a.addClass('active');
}
/*
if (item.id !== __path_directory[0])
{
a.addClass('collapsed');
}
*/
}
root.append(ul);
}
([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside'));
var __root_directory = $('#directory-aside > ul');
$('#directory-aside')
.on('show.bs.collapse', function()
{
//console.log('show.collapse')
})
.on('hide.bs.collapse', function()
{
//console.log('hide.collapse')
});
$('#directory-modal')
.on('show.bs.modal', function()
{
$('[class$="body"]', this).prepend(__root_directory);
})
.on('hide.bs.modal', function()
{
$('#directory-aside').prepend(__root_directory);
});
$('.directory-mobile').on('click', function(e)
{
e.preventDefault();
});
$('.directory .link').on('click', function(e)
{
e.stopPropagation();
});
</script>
<script>
function scrollToViewport()
{
$('html, body').stop().animate(
{
scrollTop: $('.navbar').outerHeight()
},
1000);
}
setTimeout(scrollToViewport, 1000);
$(window).on('orientationchange', scrollToViewport);
$('[data-toggle="tooltip"]').tooltip();
</script>
<script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter28397281 = new Ya.Metrika({
id:28397281
});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<style>
@media screen and (max-width: 768px)
{
.cc-revoke
{
display: none;
}}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function() {
window.cookieconsent.initialise(
{
content:
{
href: "https://slideum.com/dmca"
},
location: true,
palette:
{
button:
{
background: "#fff",
text: "#237afc"
},
popup:
{
background: "#007bff"
},
},
position: "bottom-right",
revokable: true,
theme: "classic",
type: "opt-in"
})});
</script>
</body>
</html>
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