API HTML

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.

Hierarki Node MLW yang menampilkan elemen dan node teks.

Alat browser tidak menyediakan visualisasi hierarki seperti di atas, tetapi Anda dapat melihat node di pemeriksa elemen.

DOM/ARIA.

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:

Contoh AOM.

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:

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?

Berorientasi.
Coba lagi.
Objek.
Benar.
Luar.
Coba lagi.

Antarmuka manakah yang dapat membantu Anda mengetahui informasi tentang tab tempat konten berada?

Jendela
Benar.
Dokumen
Coba lagi.
Node
Coba lagi.