API แบบ HTML

ในบทนำของชุดข้อมูลนี้ จะมีข้อความว่า "องค์ประกอบ HTML เป็นโหนดที่ประกอบขึ้นเป็น Document Object Model" เราได้พูดถึงประเภทโหนดขององค์ประกอบไปแล้ว ในส่วนนี้ เราจะพูดถึง API ขององค์ประกอบที่เปิดใช้การค้นหาโหนดเหล่านั้น

DOM และ AOM

DOM คือ API สำหรับการเข้าถึงและจัดการเอกสาร DOM คือแผนผังของโหนดทั้งหมดในเอกสาร บางโหนดมีลูกได้ ส่วนบางโหนดอาจมีไม่ได้ โครงสร้างต้นไม้ประกอบด้วยองค์ประกอบ แอตทริบิวต์ และโหนดข้อความ

แผนผังโหนด MLW แสดงองค์ประกอบและโหนดข้อความ

เครื่องมือของเบราว์เซอร์ไม่มีการแสดงภาพแบบต้นไม้เหมือนตัวอย่างข้างต้น แต่คุณจะดูโหนดในเครื่องมือตรวจสอบองค์ประกอบได้

DOM/ARIA

การแทนแบบต้นไม้ที่ตรวจสอบในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เบราว์เซอร์ได้คือแผนผังการช่วยเหลือพิเศษ AOM อิงตาม DOM ในทำนองเดียวกัน โครงสร้างการช่วยเหลือพิเศษจะมีออบเจ็กต์ที่แสดงองค์ประกอบมาร์กอัป แอตทริบิวต์ และโหนดข้อความทั้งหมด

ตัวอย่างของ AOM

API องค์ประกอบ HTML

ตัวอักษรกลางของ DOM คือ "ออบเจ็กต์" ทุกโหนดในโครงสร้างเอกสารคือออบเจ็กต์ที่ดูแลจัดการได้ด้วย JavaScript เช่นเดียวกับตัวอย่างออบเจ็กต์ person หรือ car จากช่วงอินโทรส่วนใหญ่ไปจนถึงคลาสการเขียนโปรแกรมเชิงวัตถุ

เบราว์เซอร์มี API จำนวนมากที่ให้เมธอด เหตุการณ์ รวมถึงการค้นหาและอัปเดตพร็อพเพอร์ตี้ที่รองรับโดยค่าเริ่มต้น โหนดองค์ประกอบมีข้อมูลเกี่ยวกับแอตทริบิวต์ทั้งหมดที่ตั้งค่าไว้ในองค์ประกอบ คุณสามารถใช้อินเทอร์เฟซ HTML เพื่อเข้าถึงข้อมูลเกี่ยวกับแอตทริบิวต์ขององค์ประกอบ ตัวอย่างเช่น เราสามารถใช้ HTMLImageElement.alt เพื่อรับแอตทริบิวต์ alt ของรูปภาพทั้งหมด ดังนี้

let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
  console.log(imageInstance.alt);
});

อินเทอร์เฟซ HTML ไม่เพียงแต่ให้การเข้าถึงแอตทริบิวต์ขององค์ประกอบ โดยคุณสามารถเข้าถึงข้อมูลเพิ่มเติมได้อีกมากมาย เราจะหา HTMLElement.offsetHeight แบบอ่านอย่างเดียวเพื่อดูความสูงของแต่ละส่วนในหน้าเว็บซึ่งสัมพันธ์กับเลย์เอาต์

let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
  console.log(sectionInstance.offsetHeight);
});

หากผู้ใช้เปลี่ยนการวางแนวอุปกรณ์หรือเปลี่ยนความกว้างของวิวพอร์ต ความสูงของ <section> แต่ละรายการจะเปลี่ยนแปลง และพร็อพเพอร์ตี้ DOM จะอัปเดตตามนั้นโดยอัตโนมัติ

API ของอินเทอร์เฟซ HTML ไม่จำกัดเพียงแค่การเข้าถึงค่าแอตทริบิวต์ DOM ให้ข้อมูลเชิงลึกเกี่ยวกับสถานะปัจจุบันของ UI HTML API สามารถเข้าถึงข้อมูลทั้งหมดนั้นได้ คุณสามารถเข้าถึงความยาวของวิดีโอ ส่วนตอนที่กำลังเล่นอยู่ และดูว่าวิดีโอ (หรือเสียง) เล่นจบแล้วด้วย HTMLMediaElement.duration, HTMLMediaElement.currentTime และ HTMLMediaElement.ended ตามลำดับหรือไม่

อินเทอร์เฟซขององค์ประกอบที่พร้อมใช้งาน

องค์ประกอบ HTML ส่วนใหญ่ที่เราได้พูดถึงไปแล้วในซีรีส์นี้และยังไม่ได้พูดถึง นอกจากองค์ประกอบในส่วนบางรายการจะมีอินเทอร์เฟซ DOM ที่เกี่ยวข้องด้วย อินเทอร์เฟซพื้นฐานสำหรับองค์ประกอบทั้งหมดมีชื่อว่าองค์ประกอบอย่างเหมาะสม HTMLElement รับค่ามาจากองค์ประกอบและอินเทอร์เฟซเฉพาะองค์ประกอบ HTML ทั้งหมดที่รับค่ามาจากองค์ประกอบดังกล่าว อินเทอร์เฟซเฉพาะองค์ประกอบบางอย่างมีการใช้งานโดยองค์ประกอบที่คล้ายกันหลายรายการ

อินเทอร์เฟซมีดังนี้

รูปแบบการตั้งชื่อคือ "HTML" ตามด้วยองค์ประกอบหรือการจัดกลุ่มองค์ประกอบต่างๆ ที่เป็นตัวพิมพ์ใหญ่ของอูฐ ตามด้วย "องค์ประกอบ" แต่องค์ประกอบหรือการจัดกลุ่มส่วนขององค์ประกอบจะไม่มีรูปแบบที่แน่นอน ไม่ต้องกังวล ไม่จำเป็นต้องจดจำสิ่งเหล่านี้ สิ่งสำคัญที่ควรทราบคือมีแท็กเหล่านี้อยู่เพื่อให้ค้นหาได้เมื่อต้องการ

หากคุณมีคอลเล็กชันองค์ประกอบ อินเทอร์เฟซคอลเล็กชันก็จะมีด้วยเช่นกัน ตัวอย่างเช่น เมธอด HTMLCollection.namedItem() จะแสดงองค์ประกอบแรกในคอลเล็กชันที่มีแอตทริบิวต์ id หรือ name ตรงกับพารามิเตอร์ หรือแสดงผล Null หากไม่มีองค์ประกอบที่ตรงกัน

องค์ประกอบมากกว่า 30 รายการไม่มีอินเทอร์เฟซ DOM ที่เชื่อมโยงนอกจาก HTMLElement ซึ่งรวมถึง <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> และ <hgroup> องค์ประกอบจำนวนมากที่ไม่รองรับแอตทริบิวต์ที่ไม่ใช่ส่วนกลางและไม่เลิกใช้งานจะมีอินเทอร์เฟซเฉพาะองค์ประกอบ เช่น HTMLPElement (องค์ประกอบ <p>) และ HTMLUnknownElement (<😃> หรือองค์ประกอบอื่นๆ ที่ไม่ได้กำหนด) แต่อินเทอร์เฟซเหล่านั้นไม่ได้ใช้พร็อพเพอร์ตี้หรือเมธอดเพิ่มเติมใดๆ นอกเหนือจากพร็อพเพอร์ตี้และเมธอดที่รับช่วงมาจาก HTMLElement และไม่ได้ระบุไว้ข้างต้น

เมธอดและพร็อพเพอร์ตี้ของ API ที่ซ้ำซ้อน

หากอินเทอร์เฟซมีวิธีการหรือชื่อพร็อพเพอร์ตี้เดียวกันกับและอินเทอร์เฟซที่รับช่วงมา เมธอดหรือพร็อพเพอร์ตี้ที่รับช่วงมาจะเขียนทับวิธีการที่รับช่วงมา เมื่อเราเข้าถึงพร็อพเพอร์ตี้ alt และ offsetHeight ด้านบนด้วย imageInstance.alt และ sectionInstance.offsetHeight ตามลำดับ โค้ดไม่ได้ระบุ API ที่มีการเข้าถึง

โดยทั่วไปแล้วนี่ไม่ใช่ปัญหา ดังเช่นในตัวอย่างนี้ แต่ก็เป็นไปได้ ตัวอย่างเช่น HTMLCollection.length เป็นแบบอ่านอย่างเดียว ขณะที่พร็อพเพอร์ตี้ความยาวของอินเทอร์เฟซ HTMLOptionsCollection ที่รับค่ามา (ส่งคืนโดยพร็อพเพอร์ตี้ options ของ <select> เท่านั้น) ยังใช้เพื่อกำหนดขนาดคอลเล็กชันได้ด้วย

อินเทอร์เฟซอื่นๆ

มีอินเทอร์เฟซเพิ่มเติมที่เปิดใช้การจัดการตำแหน่งสาขาของโหนด DOM อินเทอร์เฟซ EventTarget ซึ่งมอบ addEventListener() และ removeEventListener() ให้กับเรานั้นรับค่ามาจากอินเทอร์เฟซ Node และ Window ในทางกลับกัน อินเทอร์เฟซ Element, Document และ DocumentFragment (ซึ่งเราเห็นในองค์ประกอบที่กำหนดเอง) จะรับค่าจากโหนด และอินเทอร์เฟซ HTMLElement จะรับค่าจาก Element

อินเทอร์เฟซ node

โหนด DOM ทุกประเภทจะแสดงด้วยอินเทอร์เฟซตาม Node ซึ่งให้ข้อมูลและวิธีการในฐานะองค์ประกอบที่เกี่ยวข้องกับแผนผัง DOM อินเทอร์เฟซ Node จะเปิดใช้การค้นหาและเพิ่มโหนดไปยังโหนดทรี

ฟังก์ชัน "walk the DOM" อันเลื่องชื่อของ Douglas Crockford ใช้ประโยชน์จากพร็อพเพอร์ตี้ firstChild และnextSibling ของโหนด

const walk_the_DOM = function walk(node, callback) {
  callback(node);
  node = node.firstChild;
  while (node) {
    walk(node, callback);
    node = node.nextSibling;
  }
};

เราใช้เมธอด appendChild() และ cloneNode() ของโหนดในการกำหนดองค์ประกอบที่กำหนดเอง อินเทอร์เฟซของโหนดมีฟีเจอร์และวิธีที่มีประโยชน์มากมายในการค้นหาและจัดการกับ 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));
    }
  });

เมธอด attachShadow() เป็นเมธอดของอินเทอร์เฟซองค์ประกอบ นอกจากนี้ ยังมีอินเทอร์เฟซ shadowRoot สำหรับ Shadow DOM API ที่แสดงผลแยกจากแผนผัง DOM หลักของเอกสาร

อินเทอร์เฟซ Document และ HTMLDocument

อินเทอร์เฟซ Document จะรับค่าจาก Node โดยจะแสดงหน้าเว็บที่โหลดในเบราว์เซอร์ ไม่ว่าจะเป็นเอกสาร HTML, SVG, XML, MathML หรือเอกสารอื่นๆ อินเทอร์เฟซ Document ยังรับค่าจากอินเทอร์เฟซ HTMLDocument ด้วย

document ช่วยให้เข้าถึงประเภทโหนดได้อย่างรวดเร็ว รวมถึงสร้างคอลเล็กชันของประเภทองค์ประกอบเฉพาะ เช่น document.body และ document.styleSheets HTMLDocument ช่วยให้เข้าถึงข้อมูลที่เกี่ยวข้องกับเอกสารที่ไม่พบในโหนด HTML เช่น Document.location, Document.lastModified และ Document.Cookie

มี API หลายรายการที่พร้อมให้ใช้งานโดยอิงตามฟีเจอร์ที่แสดงผ่านอินเทอร์เฟซของเอกสาร ซึ่งรวมถึง API การลากและวางและ API เต็มหน้าจอ ทั้ง 2 รายการรับค่าจาก Element

อินเทอร์เฟซ Window

อินเทอร์เฟซหน้าต่างมีรายการที่ใช้ได้ทั่วโลกนอกเหนือจาก DOM ซึ่งสามารถใช้ควบคุม DOM ได้ Window มีฟังก์ชัน เนมสเปซ ออบเจ็กต์ และตัวสร้างที่บันทึกใน JavaScript และการอ้างอิง DOM ของ MDN

อินเทอร์เฟซ Window คือ API สำหรับออบเจ็กต์ที่มีเอกสาร ออบเจ็กต์ window ส่วนกลางคือหน้าต่างที่สคริปต์ทำงานอยู่ แท็บเบราว์เซอร์ทุกแท็บจะมีออบเจ็กต์ Window ของตัวเอง อินเทอร์เฟซของ Window สามารถค้นหาเนื้อหาในแท็บ รวมถึงหน้าต่างและอุปกรณ์โดยรวม เช่น สามารถใช้เมธอด resizeTo() เพื่อปรับขนาดหน้าต่างเบราว์เซอร์ ส่วนพร็อพเพอร์ตี้ devicePixelRatio จะให้สิทธิ์เข้าถึงพิกเซลจอแสดงผลของอุปกรณ์ เมื่อเข้าถึงข้อมูลเกี่ยวกับแท็บที่เนื้อหาอยู่ ไม่ใช่แผนผัง DOM ที่แท็บแสดง หน้าต่างนี้น่าจะเป็นอินเทอร์เฟซที่คุณกำลังหาอยู่

มี API หลายรายการที่พร้อมให้ใช้งานโดยอิงตามฟีเจอร์ที่แสดงผ่านอินเทอร์เฟซของ Window ซึ่งรวมถึง API ของ Web Workers และ IndexedDB

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับ HTML API

O ใน DOM ย่อมาจากอะไร

วางแนว
โปรดลองอีกครั้ง
ออบเจ็กต์
ถูกต้องแล้ว!
ด้านนอก
โปรดลองอีกครั้ง

อินเทอร์เฟซใดสามารถช่วยคุณค้นหาข้อมูลเกี่ยวกับแท็บที่มีเนื้อหาดังกล่าวอยู่

หน้าต่าง
ถูกต้องแล้ว!
เอกสาร
โปรดลองอีกครั้ง
โหนด
โปรดลองอีกครั้ง