Dalam pengantar seri ini, dinyatakan "Elemen HTML adalah node yang membentuk Document Object Model". Kita telah membahas jenis node elemen. Di bagian ini, kita akan membahas API elemen yang memungkinkan pembuatan kueri node tersebut.
DOM dan AOM
DOM adalah API untuk mengakses dan memanipulasi dokumen. DOM adalah pohon dari semua simpul dalam dokumen. Beberapa node dapat memiliki turunan, sementara yang lain tidak. Hierarki itu berisi elemen, bersama atributnya, dan node teks.
Alat browser tidak menyediakan visualisasi hierarki seperti di atas, tetapi Anda dapat melihat node di pemeriksa elemen.
Representasi hierarki yang dapat diperiksa di alat developer browser adalah hierarki aksesibilitas. AOM didasarkan pada DOM; demikian pula, hierarki aksesibilitas berisi objek yang mewakili semua elemen markup, atribut, dan node teks:
API Elemen HTML
Huruf tengah DOM adalah "objek". Sama seperti contoh objek person
atau car
dari sebagian besar pengantar class pemrograman berorientasi
objek, setiap node dalam hierarki dokumen adalah objek yang dapat dimanipulasi dengan JavaScript.
Browser menyediakan berbagai
API yang menyediakan metode, peristiwa, serta pembuatan kueri dan update properti yang didukung secara native.
Node elemen berisi informasi tentang semua atribut yang disetel pada elemen. Anda dapat menggunakan antarmuka HTML
untuk mengakses informasi tentang atribut suatu elemen. Misalnya, kita dapat menggunakan HTMLImageElement.alt
untuk mendapatkan atribut alt
dari semua gambar:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
Antarmuka HTML menyediakan lebih dari sekadar akses ke atribut elemen; Anda bisa mengakses lebih banyak informasi. Kita dapat menemukan HTMLElement.offsetHeight
hanya baca untuk mendapatkan tinggi setiap bagian di halaman, sesuai dengan tata letak.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Jika pengguna mengubah orientasi perangkat atau mengubah lebar area tampilan, tinggi setiap <section>
akan berubah dan properti DOM akan otomatis diperbarui.
API antarmuka HTML tidak terbatas untuk mengakses nilai atribut. DOM memberikan insight tentang status UI saat ini.
API HTML dapat mengakses semua informasi tersebut. Anda dapat mengakses durasi video, dengan penayangan yang sedang diputar,
dan jika video (atau audio) telah selesai diputar dengan masing-masing HTMLMediaElement.duration
,
HTMLMediaElement.currentTime
, dan
HTMLMediaElement.ended
.
Antarmuka elemen yang tersedia
Sebagian besar elemen HTML yang telah kita bahas sejauh ini dalam seri video ini dan yang belum dibahas, selain beberapa elemen pembagian, memiliki
antarmuka DOM terkait. Antarmuka dasar untuk semua elemen diberi nama Elemen secara tepat.
HTMLElement
mewarisi dari Elemen dan semua antarmuka khusus elemen HTML
mewarisinya dari Elemen tersebut. Beberapa antarmuka khusus elemen diimplementasikan oleh beberapa elemen serupa.
Antarmuka meliputi:
HTMLAnchorElement
-<a>
HTMLAreaElement
-<area>
HTMLAudioElement
-<audio>
HTMLBaseElement
-<base>
HTMLButtonElement
-<button>
HTMLCanvasElement
-<canvas>
HTMLDataElement
-<data>
HTMLDataListElement
-<datalist>
HTMLDetailsElement
-<details>
HTMLDialogElement
-<dialog>
HTMLEmbedElement
-<embed>
HTMLFieldSetElement
-<fieldset>
HTMLFormElement
-<form>
HTMLHtmlElement
-<html>
HTMLIFrameElement
-<iframe>
HTMLImageElement
-<img>
HTMLInputElement
-<input>
HTMLLabelElement
-<label>
HTMLLegendElement
-<legend>
HTMLLIElement
-<li>
HTMLLinkElement
-<link>
HTMLMapElement
-<map>
HTMLMediaElement
-<audio>
,<video>
HTMLMenuElement
-<menu>
HTMLMetaElement
-<meta>
HTMLMeterElement
-<meter>
HTMLModElement
-<ins>
,<del>
HTMLObjectElement
-<object>
HTMLOListElement
-<ol>
HTMLOptGroupElement
-<optgroup>
HTMLOptionElement
-<option>
HTMLOutputElement
-<output>
HTMLPictureElement
-<picture>
HTMLProgressElement
-<progress>
HTMLQuoteElement
-<q>
,<blockquote>
,<cite>
HTMLScriptElement
-<script>
HTMLSelectElement
-<select>
HTMLSlotElement
-<slot>
HTMLSourceElement
-<source>
HTMLStyleElement
—<style>
HTMLTableCellElement
-<td>
,<th>
HTMLTableColElement
-<col>
,<colgroup>
HTMLTableElement
-<table>
HTMLTableRowElement
-<tr>
HTMLTableSectionElement
-<thead>
,<tbody>
,<tfoot>
HTMLTemplateElement
-<template>
HTMLTextAreaElement
-<textarea>
HTMLTimeElement
-<time>
HTMLTitleElement
-<title>
HTMLTrackElement
-<track>
HTMLVideoElement
-<video>
Konvensi penamaan adalah "HTML" yang diikuti dengan elemen atau pengelompokan elemen dalam camel case atas, yang diikuti dengan "Elemen", tetapi elemen atau pengelompokan bagian elemen tidak mengikuti pola yang tepat. Jangan khawatir. Anda tidak perlu mengingatnya. Penting untuk mengetahui bahwa mereka ada sehingga Anda dapat mencarinya kapan pun Anda membutuhkannya.
Jika Anda memiliki sekumpulan elemen, ada juga antarmuka koleksi. Misalnya, metode HTMLCollection.namedItem()
menampilkan elemen
pertama dalam koleksi yang atribut id
atau name
-nya cocok dengan parameter, atau null jika tidak ada elemen yang cocok.
Lebih dari 30 elemen tidak memiliki antarmuka DOM terkait selain HTMLElement
termasuk <address>
, <article>
,
<section>
, <nav>
, <header>
, <footer>
, <aside>
, dan <hgroup>
. Banyak elemen yang tidak mendukung atribut non-global
yang tidak digunakan lagi memiliki antarmuka khusus elemen, seperti HTMLPElement
(elemen <p>
) dan HTMLUnknownElement
( <😃>
atau elemen lain yang belum ditentukan), tetapi antarmuka tersebut tidak menerapkan properti atau metode tambahan
selain properti dan metode yang diwarisi dari HTMLElement
, dan tidak tercantum di atas.
Metode dan properti API redundan
Jika sebuah antarmuka memiliki nama properti atau metode yang sama dengan antarmuka yang diwarisinya, metode atau properti yang diwarisi akan menimpa metode atau properti yang diwarisinya. Saat kita mengakses properti alt
dan offsetHeight
di atas dengan masing-masing imageInstance.alt
dan sectionInstance.offsetHeight
, kode tidak mengidentifikasi API mana yang diakses.
Secara umum, seperti halnya dua contoh di atas, hal ini tidak menjadi masalah. Tapi, bisa saja demikian. Misalnya, HTMLCollection.length
bersifat hanya baca, sedangkan properti panjang antarmuka HTMLOptionsCollection
yang mewarisi (hanya ditampilkan oleh properti options
dari <select>
) juga dapat digunakan untuk menetapkan ukuran koleksi.
Antarmuka lainnya
Ada antarmuka tambahan yang memungkinkan manipulasi lokasi cabang simpul DOM. Antarmuka EventTarget
, yang memberi
kami addEventListener()
dan removeEventListener()
, diwarisi oleh antarmuka Node
dan Window
. Selanjutnya, antarmuka Element, Document, dan DocumentFragment (yang kita lihat di elemen khusus) mewarisi dari Node, dan antarmuka HTMLElement mewarisi dari Elemen.
Antarmuka node
Setiap jenis node DOM direpresentasikan oleh antarmuka berdasarkan Node
,
yang memberikan informasi dan metode sebagai elemen yang berkaitan dengan hierarki DOM. Antarmuka Node
memungkinkan pembuatan kueri dan penambahan node ke hierarki node.
Fungsi "walk the DOM" karya Douglas Crockford yang terkenal, memanfaatkan properti firstChild
dan nextSibling
Node.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Kita menggunakan metode appendChild()
dan cloneNode()
Node dalam menentukan elemen kustom.
Antarmuka Node menyediakan banyak properti dan metode yang berguna untuk membuat kueri dan memanipulasi DOM.
customElements.define('star-rating',
class extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
const starRating = document.getElementById('star-rating-template').content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(starRating.cloneNode(true));
}
});
Metode attachShadow()
adalah metode antarmuka
Elemen. Ada juga antarmuka shadowRoot
untuk
Shadow DOM API yang dirender secara terpisah dari
hierarki DOM utama dokumen.
Antarmuka Document
dan HTMLDocument
Antarmuka Document
mewarisi dari Node
. Format tersebut mewakili
halaman web yang dimuat di browser, baik dokumen berupa HTML, SVG, XML, MathML, atau lainnya. Antarmuka Document
juga
mewarisi dari antarmuka HTMLDocument
.
document
memungkinkan akses cepat ke jenis node dan kemampuan untuk membuat koleksi jenis elemen tertentu, seperti
document.body
dan document.styleSheets
. Dengan HTMLDocument, Anda dapat mengakses informasi yang relevan dengan dokumen yang tidak ditemukan di node HTML, seperti Document.location
, Document.lastModified
, dan Document.Cookie
.
Beberapa API tersedia berdasarkan fitur yang ditampilkan melalui antarmuka dokumen, termasuk Drag and Drop API
dan FullScreen API. Keduanya mewarisi dari Element
.
Antarmuka Window
Antarmuka Window menyertakan item yang tersedia secara global di luar DOM yang dapat digunakan untuk memanipulasi DOM. Window menyediakan fungsi, namespace, objek, dan konstruktor yang didokumentasikan dalam JavaScript dan Referensi DOM MDN.
Antarmuka Window adalah API untuk objek yang berisi dokumen. Objek window
global adalah jendela tempat skrip dijalankan. Setiap tab browser berisi objek Window-nya sendiri. Antarmuka Window dapat mengkueri konten tab
serta keseluruhan jendela dan perangkat. Misalnya, metode resizeTo()
dapat digunakan untuk mengubah ukuran jendela browser, properti devicePixelRatio
memberikan akses ke piksel tampilan perangkat. Saat mengakses informasi tentang tab tempat konten
berada, bukan hierarki DOM yang ditampilkan tab, jendela tersebut mungkin adalah antarmuka yang Anda cari.
Beberapa API tersedia berdasarkan fitur yang ditampilkan melalui antarmuka Window, termasuk Web Workers dan IndexedDB API.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang API HTML.
Apa kepanjangan dari O dalam DOM?
Antarmuka manakah yang dapat membantu Anda mengetahui informasi tentang tab tempat konten berada?