ในบทนำของชุดข้อมูลนี้ จะมีข้อความว่า "องค์ประกอบ HTML เป็นโหนดที่ประกอบขึ้นเป็น Document Object Model" เราได้พูดถึงประเภทโหนดขององค์ประกอบไปแล้ว ในส่วนนี้ เราจะพูดถึง API ขององค์ประกอบที่เปิดใช้การค้นหาโหนดเหล่านั้น
DOM และ AOM
DOM คือ API สำหรับการเข้าถึงและจัดการเอกสาร DOM คือแผนผังของโหนดทั้งหมดในเอกสาร บางโหนดมีลูกได้ ส่วนบางโหนดอาจมีไม่ได้ โครงสร้างต้นไม้ประกอบด้วยองค์ประกอบ แอตทริบิวต์ และโหนดข้อความ
เครื่องมือของเบราว์เซอร์ไม่มีการแสดงภาพแบบต้นไม้เหมือนตัวอย่างข้างต้น แต่คุณจะดูโหนดในเครื่องมือตรวจสอบองค์ประกอบได้
การแทนแบบต้นไม้ที่ตรวจสอบในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เบราว์เซอร์ได้คือแผนผังการช่วยเหลือพิเศษ AOM อิงตาม DOM ในทำนองเดียวกัน โครงสร้างการช่วยเหลือพิเศษจะมีออบเจ็กต์ที่แสดงองค์ประกอบมาร์กอัป แอตทริบิวต์ และโหนดข้อความทั้งหมด
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 ทั้งหมดที่รับค่ามาจากองค์ประกอบดังกล่าว อินเทอร์เฟซเฉพาะองค์ประกอบบางอย่างมีการใช้งานโดยองค์ประกอบที่คล้ายกันหลายรายการ
อินเทอร์เฟซมีดังนี้
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>
รูปแบบการตั้งชื่อคือ "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 ย่อมาจากอะไร
อินเทอร์เฟซใดสามารถช่วยคุณค้นหาข้อมูลเกี่ยวกับแท็บที่มีเนื้อหาดังกล่าวอยู่