HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom
HTML ? ▪ HTML merupakan Language.
singkatan
dari
Hypertext
Markup
▪ HTML adalah sekumpulan text atau file ASCII yang berisi intruksi atau perintah program untuk web browser untuk menampilkan tampilan grafis sebuah halaman website. ▪ HTML merupakan suatu bahasa yang dikenali oleh web browser untuk menampilkan informasi seperti teks, gambar, suara, animasi bahkan video.
HTML ? ▪ Kode HTML memiliki aturan dan struktur penulisan tersendiri yang disebut tag HTML. ▪ Tag adalah kode yang digunakan untuk memoles (mark-up) teks ASCII (American Standard Code for Information Interchange) menjadi file HTML. ▪ Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka yaitu dan ada tag penutup yaitu yang ditandai dengan tanda garis miring (slash) di depan awal tulisannya.
DOM ? ▪ HTML DOM mendefinisikan standar untuk mengakses dan memanipulasi dokumen HTML. ▪ DOM adalah perintah standar (World Wide Web Consortium) W3C. ▪ DOM mendefinisikan standar untuk mengakses dokumen HTML dan XML: "W3C Document Object Model (DOM) adalah sebuah platform dan bahasa-netral antarmuka yang memungkinkan program dan script atau sintaks yang secara dinamis mengakses dan memperbarui konten, struktur, dan gaya dari sebuah dokumen."
DOM ? W3C DOM standar dipisahkan menjadi 3 bagian yang berbeda: ▪ DOM Core - model standar untuk dokumen terstruktur ▪ XML DOM - model standar untuk dokumen XML ▪ HTML DOM - model standar untuk dokumen HTML
HTML DOM? HTML DOM adalah: ▪ Sebuah model objek standar untuk HTML ▪ Sebuah antarmuka pemrograman standar untuk HTML
▪ Sebuah standar W3C
HTML DOM? ▪ HTML DOM mendefinisikan objek dan properti dari semua elemen HTML, dan metode untuk mengaksesnya. Dengan kata lain: HTML DOM adalah standar untuk bagaimana untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML.
HTML DOM Nodes Dalam HTML DOM, semuanya node. DOM HTML dipandang sebagai pohon node.
DOM Nodes ▪ Menurut standar W3C HTML DOM, segala sesuatu dalam dokumen HTML adalah node: ▪ ▪ ▪ ▪ ▪
Seluruh dokumen adalah node dokumen Setiap elemen HTML adalah node elemen Teks di dalam elemen HTML node teks Setiap atribut HTML adalah node atribut Komentar adalah node komentar
HTML DOM Nodes ▪ HTML DOM Node Pohon HTML DOM memandang dokumen HTML sebagai struktur pohon. Struktur ini disebut Pohon Node:
HTML DOM Nodes ▪ Dengan HTML DOM, semua node dalam pohon dapat diakses oleh JavaScript. Semua elemen HTML (node) dapat dimodifikasi, dan node dapat dibuat atau dihapus. Node Parent (Orangtua), Children (Anak), dan Siblings (Saudara) ▪ Node dalam pohon node memiliki hubungan hirarki satu sama lain.
HTML DOM Nodes ▪ Istilah parent, children, dan siblings yang digunakan untuk menggambarkan hubungan. Node parent memiliki children. Children pada tingkat yang sama disebut siblings (brothers and sisters). ▪ Dalam pohon node, node atas disebut root ▪ Setiap node memiliki tepat satu parent, kecuali root (yang tidak memiliki parent) ▪ Sebuah node dapat memiliki sejumlah children ▪ Siblings adalah node dengan parent yang sama
HTML DOM Nodes ▪ Gambar berikut mengilustrasikan bagian dari pohon simpul dan hubungan antara node:
HTML DOM Nodes ▪ Gambar berikut mengilustrasikan bagian dari pohon simpul dan hubungan antara node:
HTML DOM Nodes ▪ Lihatlah fragmen HTML berikut:
HTML DOM Nodes Dari HTML di atas: ▪ Node tidak memiliki parent node, itu adalah root node ▪ dan parent node nya adalah node ▪ node teks "Hi DOM!" parent node nya adalah node
▪ The node memiliki dua child node:
dan ▪ Node memiliki satu child node yaitu node
<br />
<br />
HTML DOM Nodes ▪ <title> Node juga memiliki satu child node yaitu teks node "DOM Tutorial" ▪ <h1> Dan node <p> adalah siblings dan kedua child node adalah dari tag <body> ▪ Elemen <head> adalah first child dari elemen <html> ▪ Elemen <body> adalah last child dari elemen <html> ▪ Elemen <h1> adalah first child dari elemen <body> ▪ Elemen <p> adalah last child dari elemen <body><br />
<br />
HTML DOM METHODS Metode adalah tindakan yang dapat Anda lakukan pada node (Elemen HTML). Programming Interface<br />
<br />
▪ HTML DOM dapat diakses dengan JavaScript (dan bahasa pemrograman lain). ▪ Semua elemen HTML didefinisikan sebagai objects, dan antarmuka pemrograman adalah object methods dan object properties. ▪ Method (metode) adalah suatu tindakan yang dapat Anda lakukan (seperti menambahkan atau memodifikasi elemen). ▪ Property (properti) adalah nilai yang Anda bisa dapatkan atau atur (seperti nama atau isi dari sebuah node).<br />
<br />
HTML DOM METHODS Metode getElementById() ▪ Metode getElementById() mengembalikan elemen dengan ID yang ditentukan:<br />
<br />
HTML DOM METHODS<br />
<br />
Beberapa metode yang umum digunakan HTML DOM:<br />
<br />
▪ getElementById(id) – get (mendapatkan) node (elemen) dengan id tertentu ▪ appendChild(node) – insert (menyisipkan) node anak baru (elemen) ▪ removeChild(node) – remove (menghapus) child node (elemen)<br />
<br />
HTML DOM METHODS<br />
<br />
▪ innerHTML – nilai teks dari node (elemen) ▪ parentNode – parent node dari node (elemen) ▪ childNodes – child node dari node (elemen) ▪ attributes – attributes node dari node (elemen)<br />
<br />
HTML DOM METHODS<br />
<br />
Berikut adalah beberapa metode (paling umum): Method<br />
<br />
getElementById()<br />
<br />
Description<br />
<br />
Mengembalikan elemen yang memiliki atribut ID dengan sebuah nilai<br />
<br />
getElementsByTagNam Mengembalikan daftar node (collection/array e() of nodes) yang mengandung semua elemen dengan nama tag yang ditentukan getElementsByClassNa Mengembalikan daftar node yang berisi semua me() elemen dengan kelas tertentu<br />
<br />
HTML DOM PROPERTIES Properti adalah nilai-nilai dari node (Elemen HTML) bahwa Anda bisa mendapatkan (get) atau menetapkan (set). Programming Interface ▪ HTML DOM dapat diakses dengan JavaScript (dan bahasa pemrograman lain). ▪ Antarmuka pemrograman dari DOM didefinisikan oleh metode dan properti. ▪ Method adalah suatu tindakan yang dapat programmer lakukan (seperti menambahkan atau menghapus node). ▪ Property adalah nilai yang programmer bisa dapatkan atau mengatur (seperti nama atau isi dari sebuah node).<br />
<br />
HTML DOM PROPERTIES InnerHTML Properti ▪ Cara termudah untuk mendapatkan konten dari suatu elemen adalah dengan menggunakan properti innerHTML. ▪ InnerHTML properti berguna untuk mendapatkan atau mengganti isi dari elemen HTML. ▪ Contoh code berikut mendapat innerHTML dari elemen <p> dengan id="intro":<br />
<br />
HTML DOM PROPERTIES<br />
<br />
HTML DOM PROPERTIES ▪ Dalam contoh di atas, getElementById adalah metode, sementara innerHTML adalah sebuah properti.<br />
<br />
▪ Tips : InnerHTML properti dapat digunakan untuk mendapatkan atau mengubah elemen HTML, termasuk <html> dan body.<br />
<br />
HTML DOM PROPERTIES Properti nodeName Properti nodeName menentukan nama node. ▪ nodeName adalah read-only ▪ nodeName dari node elemen adalah sama seperti nama tag ▪ nodeName dari node atribut adalah nama atribut ▪ nodeName dari node teks selalu #text ▪ nodeName dari node dokumen selalu #document Catatan: nodeName selalu berisi nama tag huruf besar dari elemen HTML.<br />
<br />
HTML DOM PROPERTIES Properti nodeValue Property nodeValue menentukan nilai dari sebuah node. ▪ nodeValue untuk node elemen tidak terdefinisi ▪ nodeValue untuk node teks adalah teks itu sendiri<br />
<br />
▪ nodeValue untuk node atribut adalah nilai attribut<br />
<br />
HTML DOM PROPERTIES Contoh berikut mengambil teks nilai node tag <p id="intro"> :<br />
<br />
HTML DOM PROPERTIES The NodeType Properti ▪ Properti nodeType mengembalikan jenis node. nodeType hanya dapat dibaca. ▪ Jenis node yang paling penting<br />
<br />
adalah:<br />
<br />
Element type<br />
<br />
NodeType<br />
<br />
Element<br />
<br />
1<br />
<br />
Attribute<br />
<br />
2<br />
<br />
Text<br />
<br />
3<br />
<br />
Comment<br />
<br />
8<br />
<br />
Document<br />
<br />
9<br />
<br />
HTML DOM – ELEMENTS Menambah, Menghapus dan Mengganti Elemen HTML.<br />
<br />
Menciptakan Elemen HTML Baru - appendChild() ▪ Untuk menambahkan elemen baru ke HTML DOM, Anda harus membuat elemen (node elemen) pertama, dan kemudian tambahkan ke elemen yang ada.<br />
<br />
HTML DOM – ELEMENTS<br />
<br />
HTML DOM – ELEMENTS Membuat HTML Elemen baru - insertBefore() ▪ The appendChild() metode dalam contoh sebelumnya, ditambahkan elemen baru sebagai last child dari parent. ▪ Jika Anda tidak ingin bahwa Anda dapat menggunakan metode insertBefore() :<br />
<br />
HTML DOM – ELEMENTS<br />
<br />
HTML DOM – ELEMENTS Menghapus Elemen HTML yang ada ▪ Untuk menghapus ▪ sebuah elemen HTML, Anda harus mengetahui parent dari elemen:<br />
<br />
HTML DOM – ELEMENTS Mengganti Elemen HTML ▪ Untuk mengganti sebuah elemen ke HTML DOM, gunakan metode replaceChild():<br />
<br />
HTML DOM – EVENTS HTML DOM memungkinkan JavaScript untuk bereaksi terhadap event HTML. Bereaksi terhadap Events ▪ Sebuah JavaScript dapat dieksekusi ketika suatu event terjadi, seperti bila pengguna mengklik pada sebuah elemen HTML.<br />
<br />
▪ Untuk mengeksekusi kode ketika pengguna mengklik elemen, tambahkan kode JavaScript untuk atribut event HTML: onclick=JavaScript<br />
<br />
HTML DOM – EVENTS Contoh event HTML: ▪ Ketika pengguna mengklik mouse ▪ Ketika sebuah halaman web telah dimuat ▪ Ketika gambar telah dimuat ▪ Ketika mouse bergerak di atas elemen ▪ Ketika sebuah field input diubah/diganti ▪ Ketika form HTML di-submit ▪ Ketika seorang pengguna menekan kunci di keyboard<br />
<br />
HTML DOM – EVENTS<br />
<br />
HTML DOM – EVENTS Dalam contoh ini, fungsi ini dipanggil dari event handler:<br />
<br />
HTML DOM – EVENTS HTML Event Atribut ▪ Untuk menetapkan event untuk elemen HTML Anda dapat menggunakan atribut event.<br />
<br />
HTML DOM – EVENTS HTML Event Attribut<br />
<br />
HTML DOM – EVENTS Menetapkan Event Menggunakan HTML DOM ▪ HTML DOM memungkinkan Anda untuk menetapkan event untuk elemen HTML menggunakan JavaScript:<br />
<br />
HTML DOM – EVENTS Menetapkan Event Menggunakan HTML DOM<br />
<br />
HTML DOM – EVENTS Onload dan onunload Event ▪ Event onload dan onunload dipicu ketika pengguna memasuki atau meninggalkan halaman. ▪ Event onload dapat digunakan untuk memeriksa jenis browser pengunjung dan versi browser, dan memuat versi yang tepat dari halaman web berdasarkan informasi. ▪ Event onload dan onunload dapat digunakan untuk menangani cookie.<br />
<br />
HTML DOM – EVENTS<br />
<br />
HTML DOM – EVENTS Event onchange ▪ Event onchange sering digunakan dalam kombinasi dengan validasi field input. ▪ Berikut adalah contoh bagaimana menggunakan onchange tersebut. Huruf upperCase() fungsi akan dipanggil ketika pengguna mengubah konten sebuah field input.<br />
<br />
HTML DOM – EVENTS Event onchange<br />
<br />
TERIMA KASIH<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/html-dom-1-yosef-murya-kusuma-ardhana-st-mkom" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
