Dalam pengantar seri ini, dinyatakan "Elemen HTML adalah node yang membentuk Model Objek Dokumen." Kita telah membahas jenis node elemen. Di bagian ini, kita akan membahas API elemen yang memungkinkan kueri untuk node tersebut.
DOM dan AOM
DOM adalah API untuk mengakses dan memanipulasi dokumen. DOM adalah hierarki semua node dalam dokumen. Beberapa node dapat memiliki turunan, sebagian lainnya tidak. Hierarki mencakup elemen, bersama dengan 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 keluar dari DOM; sama halnya, hierarki aksesibilitas berisi objek yang mewakili semua elemen, atribut, dan teks markup node:
API Elemen HTML
Huruf tengah DOM adalah "object". Sama seperti contoh objek person
atau car
dari sebagian besar pengantar pemrograman berorientasi objek
setiap node dalam hierarki dokumen adalah objek yang dapat dimanipulasi dengan JavaScript.
Browser ini menyediakan berbagai
API yang menyediakan metode, peristiwa, serta kueri dan pembaruan properti yang didukung secara native.
Node elemen berisi informasi tentang semua atribut yang ditetapkan pada elemen. Anda dapat menggunakan
antarmuka HTML untuk mengakses
informasi tentang atribut suatu elemen. Misalnya, kita dapat menggunakan HTMLImageElement.alt
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 suatu elemen; Anda dapat mengakses
lebih banyak informasi. Kita dapat
temukan HTMLElement.offsetHeight
hanya-baca untuk mendapatkan tinggi setiap bagian di halaman, relatif terhadap tata letak.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Jika pengguna mengubah orientasi perangkatnya atau mengubah lebar area tampilan, tinggi setiap <section>
akan berubah dan properti DOM akan secara otomatis diperbarui dengannya.
API antarmuka HTML tidak terbatas untuk mengakses nilai atribut. DOM memberikan analisis tentang status UI saat ini.
API HTML dapat mengakses
semua informasi tersebut. Anda dapat mengakses durasi video, di mana penayangan dalam pemutaran saat ini,
dan jika video (atau audio) telah selesai diputar dengan HTMLMediaElement.duration
,
HTMLMediaElement.currentTime
, dan
HTMLMediaElement.ended
.
Antarmuka elemen yang tersedia
Sebagian besar elemen HTML yang telah kita bahas sejauh ini dalam seri ini dan belum mencakup, selain beberapa elemen pemisah, memiliki
antarmuka DOM yang terkait. Antarmuka dasar untuk semua elemen diberi nama yang tepat sebagai Element.
HTMLElement
mewarisi dari Elemen dan semua khusus elemen HTML
mewarisi darinya. Beberapa antarmuka khusus elemen diimplementasikan oleh banyak elemen serupa.
Antarmuka tersebut 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" diikuti dengan elemen atau pengelompokan elemen dalam camel case, diikuti dengan "Element", tetapi bagian elemen atau pengelompokan elemen tidak mengikuti pola yang tepat. Jangan khawatir. Tidak perlu menghafal ini. Hanya penting untuk mengetahui keberadaannya sehingga Anda dapat mencarinya kapan saja.
Jika Anda memiliki sebuah kumpulan elemen, ada juga antarmuka pengumpulan. Misalnya,
Metode HTMLCollection.namedItem()
menampilkan
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 elemen
yang tidak digunakan lagi,
Atribut non-global memiliki antarmuka khusus elemen, seperti HTMLPElement
(elemen <p>
) dan HTMLUnknownElement
( <😃>
atau elemen lain yang tidak didefinisikan), namun antarmuka tersebut tidak mengimplementasikan properti atau metode tambahan
selain properti dan metode yang diwarisi dari HTMLElement
, dan tidak tercantum di atas.
Metode dan properti Redundant API
Jika antarmuka memiliki metode atau nama properti yang sama dengan antarmuka yang diwarisinya, metode atau properti yang mewarisi akan menimpa
yang diwariskan. Saat kami mengakses properti alt
dan offsetHeight
di atas dengan imageInstance.alt
dan sectionInstance.offsetHeight
masing-masing, kode tidak mengidentifikasi
API mana yang diakses.
Umumnya, seperti dua contoh tersebut, ini tidak menjadi masalah. Tapi, bisa jadi. Misalnya, HTMLCollection.length
bersifat hanya baca, sedangkan antarmuka HTMLOptionsCollection
yang mewarisi
properti length (hanya ditampilkan oleh properti options
dari <select>
) juga dapat digunakan untuk menetapkan ukuran koleksi.
Antarmuka lainnya
Ada antarmuka tambahan yang memungkinkan manipulasi lokasi cabang node DOM. Antarmuka EventTarget
, yang menyediakan
kita dengan addEventListener()
dan removeEventListener()
, diwarisi oleh antarmuka Node
dan Window
. Selanjutnya, antarmuka Element, Document, dan DocumentFragment (yang kita lihat di elemen kustom) mewarisi antarmuka dari Node, dan antarmuka HTMLElement mewarisi elemen dari Elemen.
Antarmuka node
Setiap jenis node DOM direpresentasikan oleh antarmuka berdasarkan Node
,
yang menyediakan informasi dan metode sebagai elemen yang berhubungan dengan hierarki DOM. Antarmuka Node
memungkinkan pembuatan kueri dan penambahan node ke hierarki node.
"walk the DOM" yang terkenal dari Douglas Crockford , memanfaatkan firstChild
Node
dan properti nextSibling
.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Kita menggunakan appendChild()
Node, dan
Metode cloneNode()
untuk menentukan elemen kustom.
Antarmuka Node menyediakan banyak properti dan metode yang berguna untuk mengkueri 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 Elemen
dalam antarmuka berbasis web
yang sederhana. Ada juga antarmuka shadowRoot
untuk
Shadow DOM API dirender secara terpisah dari
hierarki DOM utama dokumen.
Antarmuka Document
dan HTMLDocument
Antarmuka Document
mewarisi dari Node
. Model tersebut mewakili
yang dimuat di browser, baik dokumen berupa HTML, SVG, XML, MathML, maupun lainnya. Antarmuka Document
juga
diwarisi dari antarmuka HTMLDocument
.
document
memungkinkan akses cepat ke jenis node dan kemampuan untuk membuat koleksi jenis elemen tertentu, seperti
document.body
dan document.styleSheets
. HTMLDocument memungkinkan pengaksesan informasi yang relevan dengan dokumen
tidak ditemukan dalam 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 Jendela menyertakan item yang tersedia secara global di luar DOM yang dapat digunakan untuk memanipulasi DOM. Jendela menyediakan fungsi, namespace, objek, dan konstruktor yang didokumentasikan dalam JavaScript MDN dan Referensi DOM.
Antarmuka Window adalah API untuk objek yang berisi dokumen. Objek window
global adalah jendela tempat
skrip berjalan. Setiap tab browser berisi objek Window-nya sendiri. Antarmuka {i> Window<i} dapat
melakukan kueri konten tab
serta keseluruhan jendela dan perangkat. Misalnya, resizeTo()
dapat digunakan untuk mengubah ukuran jendela browser, devicePixelRatio
menyediakan akses ke piksel tampilan perangkat. Saat mengakses informasi tentang tab, konten
ada di dalam hierarki DOM yang ditampilkan tab, kemungkinan jendela adalah antarmuka yang Anda cari.
Beberapa API tersedia berdasarkan fitur yang muncul 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 mencari tahu informasi tentang tab tempat konten berada?