API HTML

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.

Hierarki MLW Node yang menunjukkan 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 keluar dari DOM; sama halnya, hierarki aksesibilitas berisi objek yang mewakili semua elemen, atribut, dan teks markup node:

Contoh AOM.

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:

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?

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

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

Jendela
Benar.
Dokumen
Coba lagi.
Node
Coba lagi.